学习ASP.NET Core Blazor编程系列十四——修改

学习ASP.NET Core 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编程系列十——路由（上）

学习ASP.NET Core Blazor编程系列十二——路由（下）

学习ASP.NET Core Blazor编程系列十三——路由（完）

通过前面几篇文章的学习，我们的图书修改页面已经能正常运行了，但现在的呈现效果不是很理想，主要标题显示的是英文。我们不想看到的时间（如下图所示0:00:00），并且希望把“ReleaseDate”修改成“出版日期”。现在的程序运行效果如下图。

本文所实现的图书信息修改功能，在前面的路由篇中已经实现了，本文只是将其拿出来，单独讲解一下。

1. 我们在Visual Studio 2022的解决方案资源管理器中打开Pages/BookIndex.razor文件，修改代码如下：

@page "/BookIndex"
@using BlazorAppDemo.Models
@using Microsoft.EntityFrameworkCore

 
@inject IDbContextFactory<BookContext> dbFactory
@inject NavigationManager NavigationManager
 

<PageTitle>图书列表</PageTitle>

<h3>图书列表</h3>

<table class="table-responsive" width="90%"> 
    <tr><td>书名</td>
    <td>作者</td>
    <td>价格</td>
    <td>出版日期</td>
   <td>库存数量</td>
    <td>已租数量</td>

    <td>操作</td>
 

    </tr>

    @foreach (var item in books)
    {

        <tr> 
        <td>@item.Name</td>
        <td>@item.Author</td>
        <td>@item.Price</td>
        <td>@item.ReleaseDate.ToShortDateString()</td>
        <td>@item.StockQty</td>
        <td>@item.Qty</td>

            <td><a href="/AddBook?Id=@item.ID">编辑</a>

                <button id="edit" class="btn btn-primary" @onclick="@(e => EditBook(e, @item.ID))">修改</button>
            </td>

    </tr>
    }
</table>

 
@code {

    private   static BookContext _context;

    private List<Book> books = new List<Book>();
    protected override async Task OnInitializedAsync()

    {
        _context = dbFactory.CreateDbContext();
        books=_context.Book.ToList();
        await base.OnInitializedAsync();

    }

    public void EditBook(MouseEventArgs e ,int Id)
    {

        NavigationManager.NavigateTo("/AddBook?Id="+Id.ToString());

    }

} 

2.在Visual Studio 2022的解决方案资源管理器中，找到 AddBook.razor 组件，使用鼠标左键双击，在文本编辑器中打开。修改代码如下：

@page "/AddBook"
@using BlazorAppDemo.Models

@using Microsoft.EntityFrameworkCore
@inject IDbContextFactory<BookContext> dbFactory
@inject NavigationManager NavigationManager

 
<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();
    }
 
    public string Id { get; set; }
 
    protected override void OnParametersSet()
   {

        var query = new Uri(NavigationManager.Uri).Query;

        var queryDic = Microsoft.AspNetCore.WebUtilities.QueryHelpers.ParseQuery(query);

 
        if (queryDic.Count > 0)
        {
            Id = queryDic["Id"].ToString() ?? "0";
            if (!string.IsNullOrEmpty(Id))
            {
                if (Id != "0")
                {
                    int iId = int.Parse(Id);
                    var book = _context.Book.Find(iId);
                    if (book != null)
                    {
                        addBook = book;
                    }
                }
 
            }
        }
    }
 
 
    private void ValidSubmitInfo(EditContext editContext)
    {
 
        if (editContext.Model is not  Book addBook)
        {
            Message = "你编辑的不是图书信息，校验通过。正在保存。";
 
        }
        Save(editContext);
    }
    private void InvalidSubmitInfo(EditContext editContext)
    {
        if (editContext.Model is not Book addBook)
 
        {
            Message = "你编辑的图书信息校验不通过，请修改。";
        }
 
    }
 
    private void Save(EditContext editContext)
    {
        bool dataIsValid = editContext.Validate();

        if (!dataIsValid)
        {
            Message = "你编辑的图书信息校验不通过，请修改。";
            return;
        }
 

        if (editContext.Model is not Book addBook)
        {
            Message = "你编辑的不是图书信息。";
            return;
        }
        if (string.IsNullOrEmpty(Id) || Id == "0" )
        {
            _context.Add(editContext.Model);
        }

        int cnt=  _context.SaveChanges();

        if (cnt>0)
        {
        Message = "图书信息保存成功！";

        }else
       {
            Message = "图书信息保存失败！";
 
       }
      
    }
}

3. 在Visual Studio 2022的菜单栏上，找到“调试à开始调试”或是按F5键，Visual Studio 2022会生成BlazorAppDemo应用程序，并在浏览器中打开Home页面，我们我们使用鼠标左键点击左边菜单上的“图书列表”菜单项，浏览器会显示我们修改过的图书列表页面。如下图。

4.在浏览器的图书列表页面，将鼠标指针悬停在“编辑”按钮上以查看，链接背后的URL值。使用鼠标左键点击我们要修改的图书信息的“编辑”按钮，浏览器会自动跳转到AddBook页面，并将我们需要修改的图书信息显示出来。如下图。

5.在AddBook页面中的“类型”与“已租数量”中分别填入“A”与“2”，然后使用鼠标点击“保存”按钮。如下图。