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,而不是手写事件和取值逻辑。
