学习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