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

女爷i 2024-03-16 13:18 13阅读 0赞

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

![b84086357eeaa109283722e6e2da2104.png][]

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

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

![e3113e15e4f706d57aea9460c4940d97.gif][]

@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" @οnclick="@(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());
    
        }
    
    }

![e03836247e5f6ed6ad895cf689b5d68b.gif][]

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

![be8ab5149f5dcd6bc80ad8aee26f2146.gif][]

@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 = "图书信息保存失败！";
     
           }
          
        }
    }

![2467ebcebdc30299381bac53d7e73f06.gif][]

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

![b929304e3a91539626ca244d238fea8d.png][]

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

![92c790ff19fa9c891ee74bd2ed57b370.png][]

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

![22e4f5b8f3869b29d24a5406fcd84fcf.png][]

[b84086357eeaa109283722e6e2da2104.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/244c5110b9cc49a3a1612757bfa6911b.png
[e3113e15e4f706d57aea9460c4940d97.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/4a81935cc33e4a31b022fe401c715f18.png
[e03836247e5f6ed6ad895cf689b5d68b.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/bef9216dfd914acf8c6abec6039e53be.png
[be8ab5149f5dcd6bc80ad8aee26f2146.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/fbee9f3d85634931a1ce704b1c28bb0d.png
[2467ebcebdc30299381bac53d7e73f06.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/d6475b0a6b2e4321bf68a5752e1c5e9a.png
[b929304e3a91539626ca244d238fea8d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/2bf5328ef17249059565f54a68bff67c.png
[92c790ff19fa9c891ee74bd2ed57b370.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/b6b5a946ba54434c8dedfe6db3c5fafb.png
[22e4f5b8f3869b29d24a5406fcd84fcf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/bed48dc689224700b13de6bc4b0ef486.png