学习ASP.NET Core Blazor编程系列十四——修改
2023-02-18 15:36:52 时间
学习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());
}
}
.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”,然后使用鼠标点击“保存”按钮。如下图。
相关文章
- [NetWork] 局域网基本原理
- Redis实现朋友圈,微博等Feed流功能,实现Feed流微服务(代码实现)
- 下载速率提升40% ,《斗罗大陆:魂师对决》是如何做到的?
- 华为Awareness kit,您旅途路上的超智能管家
- Discovery直播 | 移动应用“通行证”——钥匙环,解锁管家式安全出行服务
- 教你在“狼人杀”中实现变声效果
- 技术与艺术的结合,HMS Core让手机主题趣味丛生
- 受众同步管理功能上线,让你的活动礼包发对人
- 分析服务助力产品运营
- 租房买房行业报告上线,为房产服务数字化转型添砖加瓦
- 放码来战!HMS Core线上Codelabs挑战赛正式开始
- 一图读懂DCI版权服务
- 【HMS Core 6.0全球上线】Toolkit,您的智能辅助编程好帮手
- 眼镜选款新方法,用AR+Scene技术实现3D虚拟试戴
- HDD成都站:HMS Core 6.0带来新可能,多元服务驱动产品价值提升
- Insights直播预告 | 多媒体管线服务,助您轻松进入“技术流”创新阵地
- 华为音频编辑服务带你一键伴奏分离!
- 【HMS Core 6.0全球上线】Network Kit全链路网络加速技术,应用无惧网络拥塞
- 华为分析X HUAWEI Ads,上线深度转化事件回传功能,让ROI 看得见!
- HDD成都站·暨HMS Core 6.0产品交流会报名开启