1. 首頁 > 生活百科 > >

學習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事件 ， 則不會觸發其他兩個事件 ?？梢允褂肊ditContext的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=https://www.huyubaike.com/biancheng/addBook.Name>

作者：

出版日期：

價格：

類型：

總頁數：

庫存數量：

已租數量：

@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 = "圖書信息保存失??！"; } }}【學習ASP.NET Core Blazor編程系列九——服務器端校驗】第十一，在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=https://www.huyubaike.com/biancheng/addBook.Name>

推薦閱讀