• 学习ASP.NET Core Blazor编程系列七——新增图书

    学习ASP.NET Core Blazor编程系列二——第一个Blazor应用程序（下） 

     

            上一篇文章学习ASP.NET Core Blazor编程系列六——初始化数据 中我们对数据库进行了初始化，写入了几条图书信息数据，并通过DBContext将查询到的图书信息，在列表页面中显示。通过使用@inject指令进行对象注入。

            今天，这一篇文章我们来学习一下如何新增一本图书信息数据。

          首先，我们在Visual Studio 20222的解决方案管理器中，鼠标右键单击“Pages”文件夹。在弹出菜单中选择，添加-->Razor组件。如下图。

           其次，在弹出的“添加新项”对话框的名称输入框中输入“AddBook.razor”。然后使用鼠标左键点击“添加”按钮，将创建名为AddBook的Blazor组件。如下图。

         第三，在Visual Studio 2022的文本编辑器中打开Pages/AddBook.razor文件。

            在以往经典的Web应用程序中，我们经常使用

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

           那么Blazor应用程序中如何进行数据输入呢，Blazor也提供了一个类似表单的组件—— 组件。此外，Blazor提供了一系列专用输入元素，这些元素可用于格式化和验证用户输入的数据。

            我们首先来实现一个功能简单的图书信息添加页面，在已经打开的AddBook.razor文件中的输入如下代码。

    复制代码
    @page "/AddBook"
@using BlazorAppDemo.Models
@using Microsoft.EntityFrameworkCore
@inject IDbContextFactory dbFactory

 


    AddBook
     

"Save">
    
    @Message
    
    
     图书名称：
    
    
    

    
    作者：
    
    
       

    
    出版日期：
    
     
    
    
    价格：
    
     
    
    
    类型：
     
      
    
    
    总页数：
    
     
    
    
    库存数量：
    
     
    
    
    已租数量：
    
    
    
    "submit" class="btn btn-primary" value="Save" />
 
    

@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 = "图书信息保存失败！";
       }       
    }
}
    复制代码
           对于以上代码进行简单的说明一下， 控件支持使用 Model 参数进行数据绑定。 指定一个对象作为此形参的实参。 EditForm 中的输入控件可使用 @bind-Value 参数绑定到由模型公开的属性和字段。使用 [bind-Value] 参数绑定将addBook的特定属性绑定到EditForm中的输入控件中。

          Blazor 拥有自己的一组组件，旨在专用于 元素并支持其他功能中的数据绑定。 下表列出了这些组件。 当 Blazor 呈现包含这些组件的页面时，它们将转换为表中列出的相应 HTML 元素。

    输入组件

    呈现为 (HTML)

    InputCheckbox

    InputDate

    InputFile

    InputNumber

    InputRadio

    InputRadioGroup

    一组子单选按钮

    InputSelect

    InputText

    InputTextArea