Blazor: data binding requires additional trigger events - .net-core

Question

UI Section
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect">AppId</label>
</div>
<select class="custom-select" id="inputGroupSelect" #bind="#appId">
#if (appIds != null)
{
foreach (var appId in appIds)
{
<option value="#appId">#appId</option>
}
}
</select>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for="appKeyFormControlInput">AppKey</label>
</div>
<input type="text" class="form-control" id="appKeyFormControlInput" #bind="#appKey" #bind:event="oninput">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" #onclick="SetAppKey">Get AppKey</button>
</div>
</div>
Code section
#code
{
private IEnumerable<string> appIds;
private string appId { get; set; }
private string appKey { get; set; }
protected override async Task OnInitializedAsync()
{
using HttpClient httpClient = new HttpClient();
var result = await httpClient.GetAsync("API_ADDR");
appIds = JObject.Parse(await result.Content.ReadAsStringAsync())["content"].ToObject<IEnumerable<string>>();
appId = appIds?.FirstOrDefault();
}
private async void SetAppKey()
{
using HttpClient httpClient = new HttpClient();
var result = await (await httpClient.GetAsync("API_ADDR")).Content.ReadAsStringAsync();
if (!string.IsNullOrWhiteSpace(result))
{
var app = JObject.Parse(result)["content"].ToObject<Application>();
appKey = app.AppKey;
}
}
}
Expectation
When I click the Get AppKey button,
the value of input#appKeyFromControlInput shows
the appkey of current AppId(which in input#inputGroupSelect).
Actually:
When I click the Get AppKey button,
input#appKeyFromControlInput have no reaction;
When I click the Get AppKey again,
input#appKeyFromControlInput shows the correct appkey.
Environment:
.NET 5 preview 6
Blazor WebAssembly
windows 10 2004

Answer 1

The following code"
<label class="input-group-text" for="appKeyFormControlInput">AppKey</label>
Should be
<label class="input-group-text" for="appKeyFormControlInput">#AppKey</label>
AppKey is interpreted by the compiler as a string, whereas #AppKey is considered an expression that should be evaluated, the result of which is to be displayed between the opening and the closing tags.
You should also changed this: private async void SetAppKey()
to this: private async Task SetAppKey()
When you use async void your method does not return a completed Task object, and thus no one around knows when your component should be re-rendered. Thus, your component is not rendered on the first click, only on the second click, reflecting the values from the first click.
Always use async with Task, not with void.
Note: UI events such as the click event always trigger re-rendering of the component.