通过前面几篇文章的学习,我们的图书修改页面已经能正常运行了,但现在的呈现效果不是很理想,主要标题显示的是英文。我们不想看到的时间(如下图所示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" @ο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()); } }
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”,然后使用鼠标点击“保存”按钮。如下图。