Maui Blazor Hybrid双向绑定失效：回车触发无法更新UI

问题原因 #

Blazor的异步事件处理机制要求方法返回Task而非async void。你用async void定义的KeyPressHandler会绕过Blazor的状态更新跟踪逻辑——当异步操作（PushToDatabaseFunction）完成后，框架无法感知到statusLabelBindString的变化，因此不会触发UI重新渲染。而按钮点击绑定的PushToDatabaseFunction返回Task，框架能自动处理后续的UI更新，所以按钮触发时正常。

解决方案 #

将KeyPressHandler的返回类型从async void改为async Task，让Blazor能够正确跟踪异步操作的完成状态，自动触发组件重新渲染。

修改后的代码示例 #

C#代码

private string statusLabelBindString = ""; 
private string inputFieldString = "";

// 替换async void为async Task
private async Task KeyPressHandler(string inputField, KeyboardEventArgs e) {
    if (e.Key == "Enter")
    {
        if (inputField == "inputFieldForUploading")
            await PushToDatabaseFunction();
    }
}

private async Task PushToDatabaseFunction() {  
    await db.insertAsync(inputFieldString);     

    if(db.status=="ok")
        statusLabelBindString = $" {inputFieldString} was added to db";
    else
        statusLabelBindString = "Error - Duplicate value";

    // 若修改后仍存在更新延迟，可手动调用此方法强制通知状态变化
    // StateHasChanged();
}

HTML代码（无需修改）

<div>
<button @onclick=PushToDatabaseFunction> upload to db </button>

 <input @onkeyup="@(e => KeyPressHandler("inputFieldForUploading", e))"
                @bind-value:event="oninput"
                @bind-value="inputFieldString" 
             type="text" 
             placeholder="..." /> 
</div>

<div>
          <label>Status Label: @statusLabelBindString</label> 
</div>

额外建议 #

解决UI更新问题后，为避免连续回车导致的重复提交异常，可以在PushToDatabaseFunction执行期间添加输入框/按钮的禁用逻辑，比如新增一个isSubmitting变量控制状态：

private bool isSubmitting = false;

private async Task PushToDatabaseFunction() {  
    if (isSubmitting) return;
    isSubmitting = true;

    try {
        await db.insertAsync(inputFieldString);     

        if(db.status=="ok")
            statusLabelBindString = $" {inputFieldString} was added to db";
        else
            statusLabelBindString = "Error - Duplicate value";
    }
    finally {
        isSubmitting = false;
    }
}

HTML中对应修改按钮和输入框的禁用状态：

<button @onclick=PushToDatabaseFunction disabled=@isSubmitting> upload to db </button>
<input @onkeyup="@(e => KeyPressHandler("inputFieldForUploading", e))"
       @bind-value:event="oninput"
       @bind-value="inputFieldString" 
       type="text" 
       placeholder="..." 
       disabled=@isSubmitting />

内容的提问来源于stack exchange，提问作者BMET1