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

r囧r小猫 2024-03-16 13:18 85阅读 0赞

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

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

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

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

![8d98bd798a6d11be65b649492eb7037a.gif][]

@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=addBook.Name></InputText>
            <ValidationMessage For="@(() => addBook.Name)" />
        </p>
    
        <p>作者：
        <InputText @bind-Value=addBook.Author></InputText>
            <ValidationMessage For="@(() => addBook.Author)" />
        </p>
      
    
        <p>出版日期：
        <InputDate @bind-Value=addBook.ReleaseDate></InputDate>
         </p>
        <p>价格：
    
        <InputNumber @bind-Value=addBook.Price></InputNumber>
         </p>
        <p>类型：
    
         <InputText @bind-Value=addBook.Type></InputText>
            <ValidationMessage For="@(() => addBook.Type)" />
          </p>
    
        <p>总页数：
        <InputNumber @bind-Value=addBook.TotalPages></InputNumber>
         </p>
    
        <p>库存数量：
        <InputNumber @bind-Value=addBook.StockQty></InputNumber>
            <ValidationMessage For="@(() => addBook.StockQty)" />
         </p>
    
        <p>已租数量：
        <InputNumber @bind-Value=addBook.Qty></InputNumber>
        </p>
        <input type="submit" class="btn btn-primary" value="Save" />
     
    </EditForm>
    
    @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 = "图书信息保存失败！";
            }
      
        }
    }

![c05aa793d7d88d96947f74ff07c1bc45.gif][]

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

![64188945c23777fd4761ff3ec3d8f6bb.png][]

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

![204ff573cd1a37354da47873d9e9f93a.gif][]

@page "/AddBook"
    @using BlazorAppDemo.Models
    @using Microsoft.EntityFrameworkCore
    @inject IDbContextFactory<BookContext> dbFactory
     
    <h3>AddBook</h3>
    
    
    <EditForm Model=@addBook OnValidSubmit=@ValidSubmitInfo  OnInvalidSubmit=@InvalidSubmitInfo>
        <DataAnnotationsValidator />
        <ValidationSummary />
     
        <div>@Message</div>
        <p> 图书名称：
        <InputText @bind-Value=addBook.Name></InputText>
            <ValidationMessage For="@(() => addBook.Name)" />
        </p>
        <p>作者：
        <InputText @bind-Value=addBook.Author></InputText>
            <ValidationMessage For="@(() => addBook.Author)" />
        </p>
        
        <p>出版日期：
        <InputDate @bind-Value=addBook.ReleaseDate></InputDate>
         </p>
        <p>价格：
        <InputNumber @bind-Value=addBook.Price></InputNumber>
         </p>
        <p>类型：
         <InputText @bind-Value=addBook.Type></InputText>
            <ValidationMessage For="@(() => addBook.Type)" />
          </p>
        <p>总页数：
        <InputNumber @bind-Value=addBook.TotalPages></InputNumber>
         </p>
        <p>库存数量：
        <InputNumber @bind-Value=addBook.StockQty></InputNumber>
            <ValidationMessage For="@(() => addBook.StockQty)" />
         </p>
        <p>已租数量：
        <InputNumber @bind-Value=addBook.Qty></InputNumber>
        </p>
       <input type="submit" class="btn btn-primary" value="Save" />
    
     
    </EditForm>
    
    @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 = "你编辑的图书信息校验不通过，请修改。";
            }
        }
    
     }

![2f357092fa48dd3c5e38df47d17f8872.gif][]

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

![dde771ca719dbd52256f2b39e7ae4891.png][]

[8d98bd798a6d11be65b649492eb7037a.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/ec48eecb04a8425e8cc70cb90ff93cc4.png
[c05aa793d7d88d96947f74ff07c1bc45.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/8435805c9a9245018598f817a7fdca37.png
[64188945c23777fd4761ff3ec3d8f6bb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/87e00e6424a2462eb6ac104a6d61ced3.png
[204ff573cd1a37354da47873d9e9f93a.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/52922c4e4ce24f3fa48baff335930361.png
[2f357092fa48dd3c5e38df47d17f8872.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/492ed2d1d2444df3a0596e9a2179c4b8.png
[dde771ca719dbd52256f2b39e7ae4891.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/899ab60d17c54db6a1e821de08020435.png