Blazor-表单提交的艺术：如何优雅地实现 （下）

在上一章节中我们使用HTML的方式介绍了如何在Blazor框架下进行表单的提交，而在Blazor框架中也为我们内置了<EditForm>组件来代替原始的HTML,<form>，下面我们将对<EditForm>的用法进行讲解，并将两种表单方式进行对比，为大家提供使用的建议。

交互式SSR访问

@page "/SSREditForm"
<h3>SSREditForm</h3>
@rendermode InteractiveServer
<EditForm Model="Model" OnSubmit="Submit">
    <div class="mb-3 w-25">
        <label for="name" class="form-label">姓名：</label>
        <InputText @bind-Value="Model.Name" class="form-control" placeholder="请输入姓名" />
    </div>
    <div class="mb-3 w-25">
        <label for="age" class="form-label">年龄：</label>
        <InputNumber @bind-Value="Model.Age" class="form-control" placeholder="请输入年龄" />
    </div>
    <div class="mb-3 w-25">
        <button type="submit" class="btn btn-primary">提交</button>
    </div>
</EditForm>
@code {
    //页面模型
    public User Model { get; set; } = new();
    //当用户提交窗体时，该处理程序将被调用。
    private void Submit()
    {
        Console.WriteLine($"输入姓名：{Model.Name}");
        Console.WriteLine($"输入年龄：{Model.Age}");
    }
    //模型类
    public class User
    {
        public string? Name { get; set; }
        public int Age { get; set; }
    }
}

• 在组件中，必须使用 Model 属性指定一个关联的模型类.
• 在组件中，使用Model="Model"关联表单模型，以向表单提供绑定的属性。
• 在组件中，使用OnSubmit="Submit"指定将表单提交到Submit()方法中。
  

静态SSR访问

静态 SSR 中，不能使用事件处理程序，所以要以 HTTP 的方式提交表单
需要使用POST访问，并指定@formname,对应的表单接收类需要使用特性进行接收，其他方面与交互式SSR一致

[SupplyParameterFromForm(FormName = "StaticSSREditForm")]
public User Model { get; set; } = new();

@page "/SSREditForm"
<h3>SSREditForm</h3>
@rendermode InteractiveServer
<EditForm Model="Model" OnSubmit="Submit" method="post" FormName="StaticSSREditForm">
    <div class="mb-3 w-25">
        <label for="name" class="form-label">姓名：</label>
        <InputText @bind-Value="Model.Name" class="form-control" placeholder="请输入姓名" />
    </div>
    <div class="mb-3 w-25">
        <label for="age" class="form-label">年龄：</label>
        <InputNumber @bind-Value="Model.Age" class="form-control" placeholder="请输入年龄" />
    </div>
    <div class="mb-3 w-25">
        <button type="submit" class="btn btn-primary">提交</button>
    </div>
</EditForm>
@code {
    //页面模型
    [SupplyParameterFromForm(FormName = "StaticSSREditForm")]
    public User Model { get; set; } = new();
    //当用户提交窗体时，该处理程序将被调用。
    private void Submit()
    {
        Console.WriteLine($"输入姓名：{Model.Name}");
        Console.WriteLine($"输入年龄：{Model.Age}");
    }
    //模型类
    public class User
    {
        public string? Name { get; set; }
        public int Age { get; set; }
    }
}

<EditForm> 与 原生<form>比对

组件集成

<EditForm>中可以使用内置的Razor组件，提供了更加便捷的操作特性
<form>中无法使用内置的Razor组件

数据绑定

<EditForm>：

• 直接绑定 C# 模型对象（通过 Model 或 EditContext 参数）。
• 支持双向数据绑定（如 组件自动同步数据）。

<form>：

• 需手动处理数据绑定（通过 @bind 或 JavaScript 互操作）。
• 提交时需手动从输入字段提取数据。

验证机制

<EditForm>：

• 内置声明式验证（集成 DataAnnotations）。
• 支持组件如 <DataAnnotationsValidator>、<ValidationSummary>。

<form>：

• 需手动实现验证逻辑（C# 或 JavaScript）。
• 依赖 HTML5 原生验证（如 required），但无法与 Blazor状态深度集成。

事件处理

<EditForm>：

提供专用事件：
 - OnValidSubmit：验证通过时触发。 
 - OnInvalidSubmit：验证失败时触发。 
   OnSubmit：自定义提交逻辑。

<form>：

• 需手动实现验证逻辑（C# 或 JavaScript）。
• 依赖 HTML5 原生验证（如 required），但无法与 Blazor状态深度集成。

渲染与性能

<EditForm>：

在 Blazor 渲染生命周期内工作，避免整页刷新（SPA 体验）。

自动管理 UI 更新（如验证错误消息）。

<form>：

默认整页刷新（破坏 SPA 体验），除非显式阻止。

需手动更新 UI 状态（如显示错误信息）。