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

时间：2022-10-30 11:10:29
 

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

      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页面，我们使用鼠标点击左边的菜单栏上的“添加图书”菜单项，然后使用鼠标左键点击“保存”按钮，由于我们没有输入正确的数据，校验组件将会提示我们要输入的数据。如下图。在图中红框处，显示了我们在后台处理之后，返回到前端的提示信息。 学习ASP.NET Core Blazor编程系列九——服务器端校验

 

       第十二，如果改用 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页面，我们使用鼠标点击左边的菜单栏上的“添加图书”菜单项，然后使用鼠标左键点击“保存”按钮，由于我们没有输入正确的数据，没有通过校验规则，页面重新显示表单（如果我们填写过数据，则会显示我们刚才填写的数据），同时页面上将会提示我们要输入的数据的提示信息。如下图。在图中红框处，显示了我们在后台处理之后，返回到前端的提示信息。 学习ASP.NET Core Blazor编程系列九——服务器端校验

 

 

标签：

相关文章