学习ASP.NET Core Blazor编程系列六——新增图书（上） - ToB企服应用市场:ToB评测及商务社交产业平台

在以往经典的Web应用程序中，我们经常使用元素创建表单，在表单中添加元素，有一个 type 属性，用于指定输入的类型及其显示方式（作为数字、文本框、单选按钮、复选框、按钮等），让用户输入数据，在用户提交表单时进行数据验证。如果验证成功，则可以执行相应的操作（新增，更新，删除等）。

@page "/AddBook"
@using BlazorAppDemo.Models
@using Microsoft.EntityFrameworkCore
@inject IDbContextFactory<BookContext> dbFactory
<h3>AddBook</h3>
<EditForm Model=@addBook OnSubmit="Save">
@Message
图书名称：
<InputText @bind-Value=addBook.Name></InputText>
作者：
<InputText @bind-value=addBook.Author></InputText>
出版日期：
<InputDate @bind-value=addBook.ReleaseDate></InputDate>
价格：
<InputNumber @bind-Value=addBook.Price></InputNumber>
类型：
<InputText @bind-Value=addBook.Type></InputText>
总页数：
<InputNumber @bind-Value=addBook.TotalPages></InputNumber>
库存数量：
<InputNumber @bind-Value=addBook.StockQty></InputNumber>
已租数量：
<InputNumber @bind-Value=addBook.Qty></InputNumber>
<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)
{
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页面，我们使用鼠标点击左边的菜单栏上的“添加图书”菜单项，我们预期页面会进入“AddBook”页面，实际上的结果，应用程序给我们抛出了一个异常，如下图。

对于在单个EditForm中实现输入框的基本验证，最好调用OnValidSubmit 和 OnInvalidSubmit 事件。如果是很复杂的验证要求，例如将一个输入文本框中的内容与后台数据库中的数据进行交叉检查以确保值的有效，请首先使用 OnSubmit 事件。 EditForm 可以同时处理 OnValidSubmit 和 OnInvalidSubmit 事件，也可以单独处理OnSubmit事件，不能同时处理这两者。通过向 EditForm 添加一个 Submit 按钮来触发提交。当用户选择此按钮时，将触发由 EditForm 指定的提交事件。

输入组件	呈现为 (HTML)
InputCheckbox
InputDate
InputFile
InputNumber
InputRadio
InputRadioGroup	一组子单选按钮
InputSelect
InputText
InputTextArea