學習ASP.NET Core Blazor程式設計系列九——伺服器端校驗
2022-10-30 12:00:28
提交表單時，在伺服器端進行表單驗證
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 = "圖書資訊儲存失敗！";
}
}
}
第十二，如果改用 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 = "你編輯的圖書資訊校驗不通過，請修改。";
}
}
}
