Blazor EditForm 组件使用教程

云墨姑娘_7795

云墨姑娘_7795

2025-12-16

502人浏览

原创

EditForm 是 Blazor 表单核心组件,需绑定模型并用 Data Annotations 实现验证;提供 OnValidSubmit 和 OnInvalidSubmit 事件分别处理通过与失败场景;支持自定义验证器及避免常见陷阱如手动赋值未通知上下文。

blazor editform 组件使用教程

Blazor 的 EditForm 是处理表单提交与验证的核心组件,它把模型绑定、验证触发、提交逻辑封装得简洁又可控。用好它,关键不是堆代码,而是理清“模型—验证—事件”三者的协作关系。

绑定模型并启用基础验证

EditForm 必须通过 Model 参数绑定一个 C# 实体对象,Blazor 才能自动追踪字段变化、触发验证、映射输入控件值。推荐使用 [Required]、[StringLength] 等数据注解(Data Annotations),这是最轻量且内置支持的验证方式。

示例:

public class UserInput<br>{<br>    [Required(ErrorMessage = "用户名不能为空")]<br>    public string? Name { get; set; }<br><br>    [EmailAddress(ErrorMessage = "邮箱格式不正确")]<br>    public string? Email { get; set; }<br>}

在 Razor 组件中绑定:

<editform model="@userInput" onvalidsubmit="@HandleValidSubmit"><br><inputtext></inputtext><br><validationmessage for="@(() => userInput.Name)"></validationmessage><br><inputemail></inputemail><br><validationmessage for="@(() => userInput.Email)"></validationmessage><br><button type="submit">提交</button><br></editform>

区分有效/无效提交的两种回调

EditForm 提供两个独立事件: • OnValidSubmit:仅当模型通过所有验证时触发,适合执行保存、跳转等主业务逻辑 • OnInvalidSubmit:验证失败时触发,可用于埋点、聚焦首个错误字段或自定义提示

两者互斥,不会同时执行。不需要手动调用 Validate() —— 提交瞬间 Blazor 自动校验整个模型。

C#
C#

"避开 C# 常见错误——空陷阱、异步陷阱、LINQ 陷阱及资源泄漏。"

下载

自定义验证器(非 Data Annotations 场景)

当需要跨字段验证(如“密码”和“确认密码”一致)、异步检查(如用户名是否已存在),或复用已有 FluentValidation 规则时,可实现 IValidator 接口或使用 DataAnnotationsValidator + 自定义 ValidationAttribute。

更常见的是配合 ObjectGraphDataAnnotationsValidator(.NET 6+)支持嵌套对象验证,或直接在 OnValidSubmit 中手动调用服务做二次校验(例如检查邮箱唯一性),失败时调用 editContext.NotifyValidationStateChanged() 主动刷新 UI 错误状态。

避免常见陷阱

  • 不要在 OnValidSubmit 中修改绑定的模型属性后立刻再次提交 —— 这会干扰 EditContext 的脏检查,可能跳过验证
  • InputText 等内置输入组件依赖 @bind-Value,若改用 @onchange 手动赋值,需同步调用 editContext.NotifyFieldChanged()
  • 验证消息显示依赖 ValidationMessage 的 For 表达式必须准确指向模型属性,不能写成 @(() => Name)(缺少实例上下文)
  • 表单重置不是靠 new Model() 就完事 —— 要重建 EditContext 或调用 editContext.MarkAsUnmodified() 并手动清空字段

基本上就这些。EditForm 不复杂,但容易忽略验证生命周期和上下文同步细节。把模型、验证规则、UI 绑定三者对齐,表单就能稳稳跑起来。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

c# 表单提交

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
硬盘接口类型介绍
硬盘接口类型介绍

硬盘接口类型有IDE、SATA、SCSI、Fibre Channel、USB、eSATA、mSATA、PCIe等等。详细介绍:1、IDE接口是一种并行接口,主要用于连接硬盘和光驱等设备,它主要有两种类型:ATA和ATAPI,IDE接口已经逐渐被SATA接口;2、SATA接口是一种串行接口,相较于IDE接口,它具有更高的传输速度、更低的功耗和更小的体积;3、SCSI接口等等。

2023.10.19

3208

3

PHP接口编写教程
PHP接口编写教程

本专题整合了PHP接口编写教程,阅读专题下面的文章了解更多详细内容。

2025.10.17

5169

12

php8.4实现接口限流的教程
php8.4实现接口限流的教程

PHP8.4本身不内置限流功能,需借助Redis(令牌桶)或Swoole(漏桶)实现;文件锁因I/O瓶颈、无跨机共享、秒级精度等缺陷不适用高并发场景。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2025.12.29

3849

9

java接口相关教程
java接口相关教程

本专题整合了java接口相关内容,阅读专题下面的文章了解更多详细内容。

2026.01.19

486

15

堆和栈的区别
堆和栈的区别

堆和栈的区别:1、内存分配方式不同;2、大小不同;3、数据访问方式不同;4、数据的生命周期。本专题为大家提供堆和栈的区别的相关的文章、下载、课程内容,供大家免费下载体验。

2023.07.18

6387

5

堆和栈区别
堆和栈区别

堆(Heap)和栈(Stack)是计算机中两种常见的内存分配机制。它们在内存管理的方式、分配方式以及使用场景上有很大的区别。本文将详细介绍堆和栈的特点、区别以及各自的使用场景。php中文网给大家带来了相关的教程以及文章欢迎大家前来学习阅读。

2023.08.10

2668

6

Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

2026.10.28

80

16

Vite 如何搭配 Vue.js
Vite 如何搭配 Vue.js

Vite搭配Vue.js专题汇集创建Vue 3项目、配置开发环境、路径别名、Vue插件、代理、多环境构建与调试的已审核文章,帮助读者完成从初始化到日常开发的配置。

2026.10.28

60

15

Vite 项目目录怎么看
Vite 项目目录怎么看

Vite项目目录专题汇集入口文件、src源码、public静态资源、路径别名、项目根目录和构建输出目录相关的已审核文章,帮助读者理解各文件夹的用途与引用方式。

2026.10.28

220

10

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程