学习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参数来处理输入数据。如果要编写自己的逻辑来处理表单提交，请使用此事件。具体代码如下：

@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 = "图书信息保存失败！";
        }

    }
}

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

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

@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 = "你编辑的图书信息校验不通过，请修改。";
        }
    }

 }

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