Blazor 服务器端输入字段：结合 Onchange 和 Bind答案

【问题标题】：Blazor server-side Input Field: Combine Onchange and BindBlazor 服务器端输入字段：结合 Onchange 和 Bind
【发布时间】：2021-06-27 08:10:22
【问题描述】：

我有一个包含大量输入字段的页面。它们的初始值来自从 SQL 服务器获取的模型。

每次用户更改其中一个输入字段中的值时，我都想将新值发送到 SQL 服务器。

我的第一个想法是使用onchange事件触发sql更新，使用@bind事件更新模型。事实证明，Onchange 和 blazors 的 @bind 不能一起工作，因为 @bind 已经实现了 onchange 事件处理程序。

我目前的解决方案是将@bind 设置为 oninput 事件。这是代码

<input @onchange="@(e => ValueChanged(e, "someid"))" @bind-value="@this.model.someValue" @bind-value:event="oninput" class="form-control form-control-sm border rounded" />

private void ValueChanged(ChangeEventArgs e, string id)
{
    // Update the sql server
}

这可以解决这个问题。但它创造了大量的流量。对于用户在输入字段中输入的每个字母，一旦完成，就会向服务器发送一条消息而不是一条消息。

有没有更好的方法来实现这一点？

【问题讨论】：

标签： c# blazor

【解决方案1】：

对于单行字符串输入，我通常使用 Keyup 事件来检查 Enter。（我也可以添加一个提交按钮，以防用户退出或点击退出而不按回车）：

<input @onkeyup="ValueChanged" @bind="SomeText" />

@code {
     string SomeText;
     public async Task ValueChanged(KeyboardEventArgs e)
     {
        if (e.Code == "Enter")
        {
             // Do SQL stuff with SomeText
        }
     }
}

【讨论】：

当用户没有按回车键而是在另一个字段内单击时，我如何识别更改？
“我还可以添加一个提交按钮，以防用户在不按 Enter 的情况下退出或点击退出。” 如果您不想这样做，那么我建议遵循@enet 的建议。