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



 

提交表单时,在服务器端进行表单验证

      EditForm 组件中,有三个事件可用于触发表单提交操作:

  • OnSubmit:无论验证结果如何,只要用户提交表单,就会触发此事件。
  • OnValidSubmit:当用户提交表单并且他们的输入验证通过时,将触发此事件。
  • OnInvalidSubmit:当用户提交表单并且他们的输入验证失败时,将触发此事件。

       如果使用 OnSubmit事件,则不会触发其他两个事件。可以使用EditContext的Model参数来处理输入数据。如果要编写自己的逻辑来处理表单提交,请使用此事件。具体代码如下:

@page "/AddBook"
@using BlazorAppDemo.Models
@using Microsoft.EntityFrameworkCore
@inject IDbContextFactory dbFactory
 

AddBook

"
Save">
@Message

图书名称: "@(() => addBook.Name)" />

作者: "@(() => addBook.Author)" />

出版日期:

价格:

类型: "@(() => addBook.Type)" />

总页数:

库存数量: "@(() => addBook.StockQty)" />

已租数量:

"submit" class="btn btn-primary" value="Save" /> @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页面,我们使用鼠标点击左边的菜单栏上的“添加图书”菜单项,然后使用鼠标左键点击“保存”按钮,由于我们没有输入正确的数据,校验组件将会提示我们要输入的数据。如下图。在图中红框处,显示了我们在后台处理之后,返回到前端的提示信息。

 

       第十二,如果改用 OnValidSubmit 和 OnInvalidSubmit这两个事件,则如果校验不通过则会触发OnInvalidSubmit事件,反之如果校验通过,则会触发OnValidSubmit事件。

@page "/AddBook"
@using BlazorAppDemo.Models
@using Microsoft.EntityFrameworkCore
@inject IDbContextFactory dbFactory
 

AddBook

@Message

图书名称: "@(() => addBook.Name)" />

作者: "@(() => addBook.Author)" />

出版日期:

价格:

类型: "@(() => addBook.Type)" />

总页数:

库存数量: "@(() => addBook.StockQty)" />

已租数量:

"
submit" class="btn btn-primary" value="Save" /> @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 ValidSubmitInfo(EditContext editContext) { if (editContext.Model is Book addBook) { Message = "你编辑的不是图书信息,校验通过。正在保存。" } } private void InvalidSubmitInfo(EditContext editContext) { if (editContext.Model is Book addBook) { Message = "你编辑的图书信息校验不通过,请修改。"; } } }
       第十三,在Visual Studio 2022的菜单栏上,找到“调试—》开始调试”或是按F5键,Visual Studio 2022会生成BlazorAppDemo应用程序,并在浏览器中打开Home页面,我们使用鼠标点击左边的菜单栏上的“添加图书”菜单项,然后使用鼠标左键点击“保存”按钮,由于我们没有输入正确的数据,没有通过校验规则,页面重新显示表单(如果我们填写过数据,则会显示我们刚才填写的数据),同时页面上将会提示我们要输入的数据的提示信息。如下图。在图中红框处,显示了我们在后台处理之后,返回到前端的提示信息。