学习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 dbFactory
@inject NavigationManager NavigationManager
 

图书列表

图书列表


class="table-responsive" width="90%"> 
    
 

    

    @foreach (var item in books)
    {

         
        
    }
书名
    
作者
    
价格
    
出版日期
   
库存数量
    
已租数量

    
操作
@item.Name
        
@item.Author
        
@item.Price
        
@item.ReleaseDate.ToShortDateString()
        
@item.StockQty
        
@item.Qty

            
"/AddBook?Id=@item.ID">编辑

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

    


 
@code {

    private   static BookContext _context;

    private List books = new List();
    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 dbFactory
@inject NavigationManager NavigationManager

 
AddBook



    
   

 
    
@Message

    
 图书名称：
    

        "@(() => addBook.Name)" />
    
    
作者：
    
        "@(() => addBook.Author)" />
    

    
    
出版日期：
    

     
    
价格：
    

     
    
类型：
     
        "@(() => addBook.Type)" />
      

    
总页数：
    
     
    
库存数量：
    

        "@(() => addBook.StockQty)" />

     
    
已租数量：
    
    
    "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();
    }
 
    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”，然后使用鼠标点击“保存”按钮。如下图。