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

Zhi Lv - MSFT 32,441 信誉分 Microsoft 供应商
2024-03-01T07:09:26.4466667+00:00

在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来检查值是否改变

Blazor
Blazor
一个免费的开源 Web 框架,使开发人员能够使用 Microsoft 开发的 C# 和 HTML 创建 Web 应用。
23 个问题
0 个注释 无注释
{count} 票

接受的答案
  1. XuDong Peng-MSFT 10,746 信誉分 Microsoft 供应商
    2024-03-01T10:30:16.58+00:00

    你好,

    在 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 调用。


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

    0 个注释 无注释

0 个其他答案

排序依据: 非常有帮助

你的答案

问题作者可以将答案标记为“接受的答案”,这有助于用户了解已解决作者问题的答案。