Blazor-表单提交的艺术：如何优雅地实现 （下）
Blazor-表单提交的艺术：如何优雅地实现 （下）
MaybeHC
发布于 2025-06-08 00:26:16
发布于 2025-06-08 00:26:16
代码可运行
运行总次数：0
代码可运行
在上一章节中我们使用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 状态（如显示错误信息）。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2025-06-06，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
