Blazor-EditContext

MaybeHC

发布于 2025-07-22 08:27:38

880

EditContext 是 Blazor 中用于管理表单状态和验证的核心类。EditContext 称为编辑上下文对象，在编辑表单中，可以绑定模型对象。它跟踪表单字段的修改状态、验证状态，并提供事件通知机制（如 OnFieldChanged 和 OnValidationStateChanged）。

绑定方式

如何使用EditContext 绑定模型对象

示例

@page "/EditContextDemo"
<h3>EditContextDemo</h3>
<EditForm EditContext="editContext" OnSubmit="Submit">
    <div class="mb-3">
        <label class="form-label">Name</label>
        <InputText class="form-control" @bind-value="Model!.Name"/>
    </div>
    <div class="mb-3">
        <button class="btn btn-primary" type="submit">提交</button>
    </div>
</EditForm>
@code {
    public User? Model { get; set; }
    private EditContext? editContext;

    protected override void OnInitialized()
    {
        Model = new User();
        editContext = new EditContext(Model);
    }
    
    void Submit()
    {
        Console.WriteLine(Model?.Name);
    }
}

在OnInitialized生命周期方法中初始化，User类实例Model。

editContext实例通过Model对象创建，跟踪表单的编辑状态和验证。

通过以上的方式我们就可以通过EditContext与属性进行绑定

运行结果：

获取字段定义

使用editContext.Field("xxx")方法可以获得绑定模型的字段定义

示例

@page "/EditContextDemo"
<h3>EditContextDemo</h3>
<EditForm EditContext="editContext" OnSubmit="Submit">
    <div class="mb-3">
        <label class="form-label">Name</label>
        <InputText class="form-control" @bind-value="Model!.Name"/>
    </div>
    <div class="mb-3">
        <button class="btn btn-primary" type="submit">提交</button>
    </div>
</EditForm>
@code {
    public User? Model { get; set; }
    private EditContext? editContext;

    protected override void OnInitialized()
    {
        Model = new User();
        editContext = new EditContext(Model);
    }
    
    void Submit()
    {
        var field = editContext.Field("Name");
        Console.WriteLine(Model?.Name);
        Console.WriteLine($"字段名：{field.FieldName}，字段所在的模型：{field.Model}");
    }
}

我们使用 editContext.Field("Name");方法就可以获得所绑定模型的字段定义

运行结果

OnFieldChanged事件使用

在 EditContext 对象中有一个 OnFieldChanged 事件，当表单中的任何绑定的字段值发生变化，就会触发该事件。在 FieldChaged 事件处理程序中，需要带有(object? sender,Field Changed EventArgse)这 2 个参数，使用 e.F ieldIdentifier 可以得到当前值发生改变的字段定义。

示例

@page "/EditContextDemo"
@implements IDisposable
<h3>EditContextDemo</h3>
<EditForm EditContext="editContext" OnSubmit="Submit">
    <div class="mb-3">
        <label class="form-label">Name</label>
        <InputText class="form-control" @bind-value="Model!.Name"/>
    </div>
    <div class="mb-3">
        <button class="btn btn-primary" type="submit">提交</button>
    </div>
</EditForm>
@code {
    public User? Model { get; set; }
    private EditContext? editContext;

    protected override void OnInitialized()
    {
        Model = new User();
        editContext = new EditContext(Model);
        editContext.OnFieldChanged += EditContextOnOnFieldChanged;
    }

    private void EditContextOnOnFieldChanged(object? sender, FieldChangedEventArgs e)
    {
        Console.WriteLine($"值发生变化的字段：{e.FieldIdentifier.FieldName}");
    }

    void Submit()
    {
        var field = editContext!.Field("Name");
        Console.WriteLine(Model?.Name);
        Console.WriteLine($"字段名：{field.FieldName}，字段所在的模型：{field.Model}");
    }

    public void Dispose()
    {
        // TODO 在此释放托管资源
        editContext!.OnFieldChanged -= EditContextOnOnFieldChanged;
    }

}

当姓名输入框失去焦点时会触发EditContextOnOnFieldChanged

运行结果

参数使用

对于< EditForm>组件，在 OnSubmit、OnInvalidSubmit、OnValidSubmit 这 3 个事件挂载的事件处理程序中，都可以使用EditContext 类型的参数。

    void Submit(EditContext editContext)
    {
        Console.WriteLine(editContext.Field("FullName").FieldName);
    }

在事件方法中直接添加EditContext

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-07-16，如有侵权请联系 cloudcommunity@tencent.com 删除

事件

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度