Blazor 自定义绑定 - 获取已更改模型的属性

Question

我从 SQL Server 接收数据并将其加载到模型中：

namespace BlazorServer.Models
{
    public class Animal
    {
        public int height { get; set; }

        public string name { get; set; }

        public string origin { get; set; }
    }
}

在一个组件中，我使用模型来显示数据。用户可以编辑数据。这是一个示例：

<input @onchange="args => ValueChanged(args)" value="@animal.name" class="form-control form-control-sm border rounded" />

如何获取模型的哪个属性发生了变化？我尝试了以下方法，但我只得到了新值：

private void ValueChanged(ChangeEventArgs args)
{
    var newValue = args.Value;
}

我想更新组件中的模型（相当于blazor的绑定）AND也马上将数据发送到SQL服务器。

Answer 1

Blazor 附带 EditForm，它管理 EditContext，以及一组输入控件 - 在您的情况下为 InputText - 与 EditContext 接口。您可以访问EditContext，在OnFieldChanged 上注册事件处理程序并获取更改事件。您会收到一个FieldIdentifier，您可以使用它来识别哪个字段已更改。

见 - MS Documentation

这是一个简单的剃​​须刀页面，使用EditContext 和OnFieldChanged 进行演示

@page "/Test"

@implements IDisposable

<EditForm EditContext="this.editContext" class="m-3">
    Animal: <InputText @bind-Value="this.model.name"></InputText><br />
    Origin: <InputText @bind-Value="this.model.origin"></InputText><br />
</EditForm>

<div class="m-3">FieldChanged:<i>@this.FieldChanged</i> </div>


@code {

    public class Animal
    {
        public int height { get; set; }
        public string name { get; set; }
        public string origin { get; set; }
    }

    private Animal model = new Animal() { height = 2, name = "giraffe", origin = "Africa" };

    private EditContext editContext;

    private string FieldChanged = "none";

    protected override Task OnInitializedAsync()
    {
        this.editContext = new EditContext(model);
        this.editContext.OnFieldChanged += this.OnFieldChanged;
        return base.OnInitializedAsync();
    }

    private void OnFieldChanged(object sender, FieldChangedEventArgs e)
    {
        var x = e.FieldIdentifier;
        this.FieldChanged = e.FieldIdentifier.FieldName;

    }

    // Need to  Implement IDisosable to unhook event handler
    public void Dispose ()
    {
        this.editContext.OnFieldChanged -= OnFieldChanged;
    }
}