在Razor 组件中，如何使用input 事件来检查值是否改变？

Question

在Razor 组件中，如何使用input 事件来检查值是否改变？

<input class="form-control border" 
               type="search" 
               placeholder="Zadejte jméno, telefonní číslo nebo oddělení..."
               id="example-search-input"
               @onchange="HandleSearch">
        <div class="input-group-append">

注意: 此问题总结整理于：如何在Razor文件中添加input来检查值是否改变

Answer 1

你好，

在 Blazor 应用中，你可以使用以下方法添加 Input 事件。

1.使用@oninput，代码如下：

@page "/inputhandler"
 
<PageTitle>Input Handler</PageTitle>
 
<h1>Input Handler </h1>
 
<input class="form-control border"
        type="search"
        placeholder="Zadejte jméno, telefonní číslo nebo oddělení..."
        id="example-search-input"
       @oninput="TextInput"
       @onchange="TextChanged">
<div class="input-group-append">
    <p>@textInputMessage</p>
 
    <p>@textChangeMessage</p>
</div>

@code {
    private string? textInputMessage;
    private string? textChangeMessage;
    private void TextInput(ChangeEventArgs e)
    {
        textInputMessage =$"Text Input, New Value: {e.Value.ToString()}";
    }
    private void TextChanged(ChangeEventArgs e)
    {
        textChangeMessage =$"Text Changed, New Value: {e.Value.ToString()}";
        // Do something with the changed text
    }
}

当在文本框中输入值时，会触发 input 事件：

2.使用 @bind:event="{EVENT}"属性绑定 input 事件：

@page "/bind-event"

<PageTitle>Bind Event</PageTitle>

<h1>Bind Event Example</h1>
<p>
    <label>
        InputValue:
        <input @bind="InputValue" @bind:event="oninput" />
    </label>
</p>
<p>
    <code>InputValue</code>: @InputValue
</p>

@code {
    private string? InputValue { get; set; }
}

更多详细信息，参考以下链接：

ASP.NET Core Blazor 事件处理

ASP.NET Core Blazor 数据绑定

如果应用为Asp.net Core Web 应用（Razor 页面）则没有服务器事件绑定。您将调用 JavaScript，它将对服务器进行 AJAX 调用。

---

如果答案是正确的解决方案，请单击“接受答案”并请投赞成票。如果您对此答案有其他疑问，请点击“评论”。 注意：如果您想接收此线程的相关电子邮件通知，请按照我们文档中的步骤启用电子邮件通知。