学习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：无论验证结果如何，只要用户提交表单，就会触发此事件。
  
• OnValidSubmit：当用户提交表单并且他们的输入验证通过时，将触发此事件。
  
• OnInvalidSubmit：当用户提交表单并且他们的输入验证失败时，将触发此事件。
  

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

1. @page "/AddBook"
2. @using BlazorAppDemo.Models
3. @using Microsoft.EntityFrameworkCore
4. @inject IDbContextFactory<BookContext> dbFactory
6. <h3>AddBook</h3>
7. <EditForm Model=@addBook OnSubmit="Save">
9.     <DataAnnotationsValidator />
10.     <ValidationSummary />
12.     @Message
14.     <p> 图书名称：
15.     <InputText @bind-Value=addBook.Name></InputText>
16.         <ValidationMessage For="@(() => addBook.Name)" />
17.     </p>
19.     <p>作者：
20.     <InputText @bind-Value=addBook.Author></InputText>
21.         <ValidationMessage For="@(() => addBook.Author)" />
22.     </p>
23.   
25.     <p>出版日期：
26.     <InputDate @bind-Value=addBook.ReleaseDate></InputDate>
27.      </p>
28.     <p>价格：
30.     <InputNumber @bind-Value=addBook.Price></InputNumber>
31.      </p>
32.     <p>类型：
34.      <InputText @bind-Value=addBook.Type></InputText>
35.         <ValidationMessage For="@(() => addBook.Type)" />
36.       </p>
38.     <p>总页数：
39.     <InputNumber @bind-Value=addBook.TotalPages></InputNumber>
40.      </p>
42.     <p>库存数量：
43.     <InputNumber @bind-Value=addBook.StockQty></InputNumber>
44.         <ValidationMessage For="@(() => addBook.StockQty)" />
45.      </p>
47.     <p>已租数量：
48.     <InputNumber @bind-Value=addBook.Qty></InputNumber>
49.     </p>
50.     <input type="submit" class="btn btn-primary" value="Save" />
52. </EditForm>
54. @code {
55.     private string Message = string.Empty;
56.     private static BookContext _context;
58.     private Models.Book addBook = new Book();
60.     protected override Task OnInitializedAsync()
61.     {
62.         _context = dbFactory.CreateDbContext();
63.         return base.OnInitializedAsync();
64.     }
66.     private void Save(EditContext editContext)
67.     {
68.         bool dataIsValid = editContext.Validate();
70.         if (!dataIsValid)
71.         {
72.             Message = "你编辑的图书信息校验不通过，请修改。";
73.             return;
74.         }
76.         if (editContext.Model is not Book addBook)
77.         {
78.             Message = "你编辑的不是图书信息。";
79.             return;
80.         }
81.        _context.Add(editContext.Model);
82.         int cnt=  _context.SaveChanges();
84.         if (cnt>0)
86.         {
87.       Message = "图书信息保存成功！";
88.   
89.         }else
91.        {
92.             Message = "图书信息保存失败！";
93.         }
94.   
95.     }
96. }

复制代码

        第十一，在Visual Studio 2022的菜单栏上，找到“调试—》开始调试”或是按F5键，Visual Studio 2022会生成BlazorAppDemo应用程序，并在浏览器中打开Home页面，我们使用鼠标点击左边的菜单栏上的“添加图书”菜单项，然后使用鼠标左键点击“保存”按钮，由于我们没有输入正确的数据，校验组件将会提示我们要输入的数据。如下图。在图中红框处，显示了我们在后台处理之后，返回到前端的提示信息。  

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

1. @page "/AddBook"
2. @using BlazorAppDemo.Models
3. @using Microsoft.EntityFrameworkCore
4. @inject IDbContextFactory<BookContext> dbFactory
6. <h3>AddBook</h3>
9. <EditForm Model=@addBook OnValidSubmit=@ValidSubmitInfo  OnInvalidSubmit=@InvalidSubmitInfo>
10.     <DataAnnotationsValidator />
11.     <ValidationSummary />
13.     @Message
14.     <p> 图书名称：
15.     <InputText @bind-Value=addBook.Name></InputText>
16.         <ValidationMessage For="@(() => addBook.Name)" />
17.     </p>
18.     <p>作者：
19.     <InputText @bind-Value=addBook.Author></InputText>
20.         <ValidationMessage For="@(() => addBook.Author)" />
21.     </p>
22.    
23.     <p>出版日期：
24.     <InputDate @bind-Value=addBook.ReleaseDate></InputDate>
25.      </p>
26.     <p>价格：
27.     <InputNumber @bind-Value=addBook.Price></InputNumber>
28.      </p>
29.     <p>类型：
30.      <InputText @bind-Value=addBook.Type></InputText>
31.         <ValidationMessage For="@(() => addBook.Type)" />
32.       </p>
33.     <p>总页数：
34.     <InputNumber @bind-Value=addBook.TotalPages></InputNumber>
35.      </p>
36.     <p>库存数量：
37.     <InputNumber @bind-Value=addBook.StockQty></InputNumber>
38.         <ValidationMessage For="@(() => addBook.StockQty)" />
39.      </p>
40.     <p>已租数量：
41.     <InputNumber @bind-Value=addBook.Qty></InputNumber>
42.     </p>
43.    <input type="submit" class="btn btn-primary" value="Save" />
46. </EditForm>
48. @code {
49.     private string Message = string.Empty;
51.     private static BookContext _context;
52.     private Models.Book addBook = new Book();
53.     protected override Task OnInitializedAsync()
54.     {
55.         _context = dbFactory.CreateDbContext();
56.         return base.OnInitializedAsync();
57.     }
59.     private void ValidSubmitInfo(EditContext editContext)
60.     {
62.         if (editContext.Model is  Book addBook)
63.         {
64.             Message = "你编辑的不是图书信息，校验通过。正在保存。"
65.            
66.         }
67.     }
69.     private void InvalidSubmitInfo(EditContext editContext)
70.     {
72.         if (editContext.Model is  Book addBook)
73.      
74.         {
75.             Message = "你编辑的图书信息校验不通过，请修改。";
76.         }
77.     }
79. }

复制代码

       第十三，在Visual Studio 2022的菜单栏上，找到“调试—》开始调试”或是按F5键，Visual Studio 2022会生成BlazorAppDemo应用程序，并在浏览器中打开Home页面，我们使用鼠标点击左边的菜单栏上的“添加图书”菜单项，然后使用鼠标左键点击“保存”按钮，由于我们没有输入正确的数据，没有通过校验规则，页面重新显示表单（如果我们填写过数据，则会显示我们刚才填写的数据），同时页面上将会提示我们要输入的数据的提示信息。如下图。在图中红框处，显示了我们在后台处理之后，返回到前端的提示信息。  

 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！