Blazor 表单怎么提交

来源:这里教程网 时间:2026-02-21 17:33:16 作者:

Blazor 表单提交核心是靠

EditForm
组件 + 模型绑定 + 处理
OnValidSubmit
OnInvalidSubmit
事件,不需要手动调用 JavaScript 或操作 DOM。

用 EditForm 包裹表单内容

EditForm
是 Blazor 内置的表单容器组件,它会自动跟踪模型状态、触发验证、处理提交逻辑。必须指定
Model
参数(通常是 C# 类实例),并绑定提交事件:

使用
@onsubmit
是无效的——Blazor 表单不走原生 HTML 提交流程
正确做法是设置
OnValidSubmit
(验证通过时触发)和/或
OnInvalidSubmit
(验证失败时触发)
示例:
<editform model="@user" onvalidsubmit="HandleValidSubmit"></editform>

绑定输入字段用 @bind

表单控件(如

InputText
InputNumber
InputCheckbox
)要和模型属性双向绑定:

推荐用内置输入组件(如
<inputtext></inputtext>
),它们自带验证反馈和变更通知
若用原生 HTML 标签(如
<input>
),需手动写
@bind
@onchange
,但会丢失验证集成能力
确保模型属性有 public get/set,且类型匹配(例如
string
对应
InputText

验证模型要加 Data Annotations

Blazor 默认支持 .NET 的数据注解(Data Annotations),比如

[Required]
[EmailAddress]
[Range]

在模型类属性上添加特性,例如:
[Required(ErrorMessage = "用户名必填")] public string Name { get; set; }
配合
<dataannotationsvalidator></dataannotationsvalidator>
组件(放在
EditForm
内),才能启用客户端验证
验证失败时,
EditForm
不会触发
OnValidSubmit
,而是触发
OnInvalidSubmit
(可选)

提交后通常要重置或跳转

提交成功后,常见操作包括清空表单、显示提示、导航到新页面:

重置表单:新建模型实例,例如
user = new User();
,Blazor 会自动更新 UI
显示成功消息:用
NavigationManager
导航,或用状态变量控制
<div> 显示提示<li>避免重复提交:可在按钮上加 <code>disabled
属性(绑定到布尔变量),提交中设为 true,完成后恢复

基本上就这些。Blazor 表单提交是声明式、组件化、强类型验证的,关键在于用对

EditForm
@bind
DataAnnotationsValidator
,而不是手写事件和取值逻辑。

相关推荐