Blazor Server中禁用绑定回调或无绑定更新输入框值的方法

一、关闭/拦截双向绑定的服务器回调（优先方案） #

Blazor Server的@bind默认绑定oninput事件，每一次输入都会触发服务器回调，这正是快速输入时出现滞后、值被覆盖的核心原因。你可以通过以下几种方式控制回调时机：

1. 切换绑定触发事件为onchange
   把默认的实时同步触发事件换成onchange，只有当输入框失去焦点时才同步数据到服务器，彻底避免频繁的服务器通信。代码示例：

   <input type="text" @bind="InputValue" @bind:event="onchange" />
   
   @code {
       private string InputValue { get; set; } = "预填充内容";
   }
   

2. 防抖（Debounce）自定义绑定
   如果需要保留输入时的视觉反馈，但不想每次输入都触发服务器回调，可以实现防抖逻辑，延迟一段时间再同步数据：

   <input type="text" value="@InputValue" @oninput="HandleInput" />
   
   @code {
       private string InputValue { get; set; } = "预填充内容";
       private CancellationTokenSource? _debounceTokenSource;
   
       private async void HandleInput(ChangeEventArgs e)
       {
           _debounceTokenSource?.Cancel();
           _debounceTokenSource = new CancellationTokenSource();
           var inputValue = e.Value?.ToString() ?? string.Empty;
   
           try
           {
               // 延迟300ms再更新值，过滤频繁输入的回调
               await Task.Delay(300, _debounceTokenSource.Token);
               if (!_debounceTokenSource.Token.IsCancellationRequested)
               {
                   InputValue = inputValue;
                   await InvokeAsync(StateHasChanged);
               }
           }
           catch (TaskCanceledException)
           {
               // 忽略被取消的防抖任务
           }
       }
   }
   

3. 完全手动控制回调时机
   彻底放弃@bind，仅用@oninput更新本地变量，只在特定时机（比如用户点击保存）才同步到服务器，平时不触发服务器回调：

   <input type="text" value="@InputValue" @oninput="(e) => InputValue = e.Value?.ToString() ?? string.Empty" />
   <button @onclick="SaveInput">保存</button>
   
   @code {
       private string InputValue { get; set; } = "预填充内容";
   
       private async Task SaveInput()
       {
           // 这里再执行服务器端操作
           await YourDataService.SaveValue(InputValue);
       }
   }
   

二、不使用绑定更新输入框值 #

如果不想依赖Blazor的绑定机制来预填充或更新输入框，可以通过ElementReference + JSInterop直接操作DOM：

<input type="text" @ref="inputElement" />
<button @onclick="SetPreFillValue">设置预填充内容</button>

@code {
    private ElementReference inputElement;
    [Inject] private IJSRuntime JSRuntime { get; set; } = default!;

    private async Task SetPreFillValue()
    {
        // 通过JS直接设置输入框的值
        await JSRuntime.InvokeVoidAsync("setInputValue", inputElement, "预填充的内容");
    }
}

在wwwroot/js/site.js中添加对应的JS函数：

function setInputValue(element, value) {
    element.value = value;
}

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