学习ASP.NET Core Blazor编程系列九——服务器端校验

学习ASP.NET Core Blazor编程系列一——综述学习ASP.NET Core Blazor编程系列二——第一个Blazor应用程序(上)学习ASP.NET Core Blazor编程系列二——第一个Blazor应用程序(中)学习ASP.NET Core Blazor编程系列二——第一个Blazor应用程序(下)
学习ASP.NET Core Blazor编程系列二——第一个Blazor应用程序(完)学习ASP.NET Core Blazor编程系列三——实体学习ASP.NET Core Blazor编程系列四——迁移学习ASP.NET Core Blazor编程系列五——列表页面学习ASP.NET Core Blazor编程系列六——初始化数据学习ASP.NET Core Blazor编程系列七——新增图书学习ASP.NET Core Blazor编程系列八——数据校验 提交表单时,在服务器端进行表单验证
EditForm 组件中,有三个事件可用于触发表单提交操作:

  • OnSubmit:无论验证结果如何,只要用户提交表单,就会触发此事件 。
  • 【学习ASP.NET Core Blazor编程系列九——服务器端校验】OnValidSubmit:当用户提交表单并且他们的输入验证通过时,将触发此事件 。
  • OnInvalidSubmit:当用户提交表单并且他们的输入验证失败时,将触发此事件 。
如果使用 OnSubmit事件,则不会触发其他两个事件 。可以使用EditContext的Model参数来处理输入数据 。如果要编写自己的逻辑来处理表单提交,请使用此事件 。具体代码如下:
@page "/AddBook"@using BlazorAppDemo.Models@using Microsoft.EntityFrameworkCore@inject IDbContextFactory<BookContext> dbFactory<h3>AddBook</h3><EditForm Model=@addBook OnSubmit="Save">    <DataAnnotationsValidator />    <ValidationSummary />    <div>@Message</div>    <p> 图书名称:    <InputText @bind-Value=https://www.huyubaike.com/biancheng/addBook.Name>

作者:

出版日期:

价格:

类型:

总页数:

库存数量:

已租数量:

@code { private string Message = string.Empty; private static BookContext _context; private Models.Book addBook = new Book(); protected override Task OnInitializedAsync() { _context = dbFactory.CreateDbContext(); return base.OnInitializedAsync(); } private void Save(EditContext editContext) { bool dataIsValid = editContext.Validate(); if (!dataIsValid) { Message = "你编辑的图书信息校验不通过,请修改 。"; return; } if (editContext.Model is not Book addBook) { Message = "你编辑的不是图书信息 。"; return; } _context.Add(editContext.Model); int cnt= _context.SaveChanges(); if (cnt>0) { Message = "图书信息保存成功!"; }else { Message = "图书信息保存失败!"; } }}第十一,在Visual Studio 2022的菜单栏上,找到“调试—》开始调试”或是按F5键,Visual Studio 2022会生成BlazorAppDemo应用程序,并在浏览器中打开Home页面,我们使用鼠标点击左边的菜单栏上的“添加图书”菜单项,然后使用鼠标左键点击“保存”按钮,由于我们没有输入正确的数据,校验组件将会提示我们要输入的数据 。如下图 。在图中红框处,显示了我们在后台处理之后,返回到前端的提示信息 。

经验总结扩展阅读