Very new to Blazor, trying to create a simple form where the button updates text on the UI when clicked. I am changing the existing Weather page.
The form:
<form action="" method="post" @formname="main">
<InputText @bind-Value="ApiKey" type="password" @onchange="PasswordUpdated" size="60"/>
<Button Type="submit" Color="ButtonColor.Primary" To="#" @onclick="ValidateClicked"> Submit </Button>
<AntiforgeryToken/>
</form>
Only added a <p>
on top of the table below:
@if (forecasts == null)
{
<p>
<em>Processing...</em>
</p>
}
else
{
<p>Result: @response.Response</p>
<table class="table">
<thead>
<tr>
<th>Date</th>
<th aria-label="Temperature in Celsius">Temp. (C)</th>
<th aria-label="Temperature in Farenheit">Temp. (F)</th>
<th>Summary</th>
</tr>
</thead>
<tbody>
@foreach (var forecast in forecasts)
{
<tr>
<td>@forecast.Date.ToShortDateString()</td>
<td>@forecast.TemperatureC</td>
<td>@forecast.TemperatureF</td>
<td>@forecast.Summary</td>
</tr>
}
</tbody>
</table>
}
Setting the field in OnInitializedAsync
just works fine.
protected override async Task OnInitializedAsync()
{
// Simulate asynchronous loading to demonstrate streaming rendering
await Task.Delay(500);
var startDate = DateOnly.FromDateTime(DateTime.Now);
var summaries = new[] { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" };
forecasts = Enumerable.Range(1, 5).Select(index => new WeatherForecast
{
Date = startDate.AddDays(index),
TemperatureC = Random.Shared.Next(-20, 55),
Summary = summaries[Random.Shared.Next(summaries.Length)]
}).ToArray();
response = new ResponseModel() { Response = "Starting..." };
}
However, when I click the button, although the weather forecast is updated, response stays unchanged.
private async void ValidateClicked()
{
await Task.Delay(1000);
response.Response = "Validating...";
var startDate = DateOnly.FromDateTime(DateTime.Now);
var summaries = new[] { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" };
forecasts = Enumerable.Range(1, 5).Select(index => new WeatherForecast
{
Date = startDate.AddDays(index),
TemperatureC = Random.Shared.Next(-20, 55),
Summary = summaries[Random.Shared.Next(summaries.Length)]
}).ToArray();