时间戳

首页 > 解决方案 > Blazor - 检测任何表单值何时更改

blazor - Blazor - 检测任何表单值何时更改

问题描述

在 Blazor 表单中，我希望能够检测表单值何时发生变化，并设置一个布尔值作为结果。

这里有一些代码来说明我目前是如何做到的：

<EditForm Model="Person" OnValidSubmit="OnSubmitValidateForm">
   <div class="form-group">
      <label>First Name</label>
      <input type="text" value="@Person.FirstName" @onchange="OnFirstNameChanged" />
   </div>
   <div class="form-group">
      <label>Surname</label>
      <input type="text" value="@Person.Surname" @onchange="OnSurnameChanged" />
   </div>
   <input type="submit" class="btn btn-primary" value="Save"/>
</EditForm>

@code {
   Person Person = new Person();
   bool dataChanged = false;
  
   void OnFirstNameChanged(ChangeEventArgs e)
   {
      Person.FirstName = e.Value.ToString();
      dataChanged = true;
      StateHasChanged();
   }
   
   void OnSurnameChanged(ChangeEventArgs e)
   {
      Person.Surname = e.Value.ToString();
      dataChanged = true;
      StateHasChanged();
   }
}

在上面的表格中，我有两个字段——“FirstName”和“Surname”，它们是“Person”类的属性。每个属性都有一个输入文本框。每当任一文本框中的值发生更改时，都会调用相应的方法，该方法将更新属性值，并指示表单数据已更改。

为每个表单项设置一个事件处理程序似乎有些过分，而在每种情况下，它真正所做的只是 @bind="" 所做的，另外将 dataChanged 设置为 true。

我的问题是，虽然这种方法有效，但似乎我必须编写很多额外的代码。有没有更好的方法来处理这个？

标签： blazor

解决方案

您应该使用原生的 Forms 组件，例如 InputText、InputDate 等，并实现OnFieldChanged事件。为模型中的每个字段引发 OnFieldChanged 事件。

代码示例

@page "/"

@using Microsoft.AspNetCore.Components.Forms;

<EditForm EditContext="@ValidationContext.EditContext" 
            OnValidSubmit="HandleValidSumit">
    <DataAnnotationsValidator />

    <div class="form-group">
        <label for="name">FirstName: </label>
        <InputText Id="FirstName" Class="form-control" @bind- 
      Value="@person.FirstName"></InputText>
        <ValidationMessage For="@(() => person.FirstName)" />

    </div>
    <div class="form-group">
        <label for="body">Surname: </label>
        <InputText Id="body" Class="form-control" @bind- 
       Value="@person.Surname"></InputText >
        <ValidationMessage For="@(() => person.Surname)" />
    </div>
    <button type="submit" class="btn btn-success">Submit</button>
</EditForm>


@code
{
   Person person = new Person();
   protected override void OnInitialized()
   {
        EditContext = new EditContext(person);
        EditContext.OnFieldChanged += EditContext_OnFieldChanged;
       
        base.OnInitialized();
   }     
    private async Task HandleValidSumit()
    {
       
        Console.WriteLine("Saving...");
        Console.WriteLine(person.FirstName);
        Console.WriteLine(Person.Surname);
    }

   
    // Note: The OnFieldChanged event is raised for each field in the 
     // model
    private void EditContext_OnFieldChanged(object sender, 
            FieldChangedEventArgs e)
    {
        Console.WriteLine(e.FieldIdentifier.FieldName);

    }
    
}

注意：StateHasChanged从事件处理程序中为 UI 事件（例如 、 等）调用 () 方法Click是Change多余的。它由框架自动调用。

推荐阅读