个人中心
文章发布
退出
作者热门文章
- Java锁的逻辑（结合对象头和ObjectMonitor）
- 还在用饼状图？来瞧瞧这些炫酷的百分比可视化新图形（附代码实现）⛵
- 自动注册实体类到EntityFrameworkCore上下文，并适配ABP及ABPVNext
- 基于Sklearn机器学习代码实战
26
4
学习ASP.NET Core Blazor编程系列一——综述 。
除了把参数直接拼接在URL路径（path）里，另一种常用的传递参数的方法是，将参数做为QueryString传递给跳转页面，比如“/BookIndex?Id=3”。可从 NavigationManager.Uri 属性中获取请求的查询字符串，在跳转页面中注入，具体代码如下.
@inject NavigationManager NavigationManager ...
var
query =
new
Uri(NavigationManager.Uri).Query;
.razor 组件，使用鼠标左键双击，在文本编辑器中打开，然后修改代码如下：
@page
"
/BookIndex
"
@using BlazorAppDemo.Models @using Microsoft.EntityFrameworkCore @inject IDbContextFactory
<BookContext>
dbFactory
<PageTitle>图书列表</PageTitle>
<h3>图书列表</h3>
<table
class
=
"
table-responsive
"
width=
"
90%
"
>
<tr><td>Name</td>
<td>Author</td>
<td>Price</td>
<td>ReleaseDate</td>
<td>StockQty</td>
<td>Qty</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</td>
<td>@item.StockQty</td>
<td>@item.Qty</td>
<td><a href=
"
/AddBook?Id=@item.ID
"
>编辑</a></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(); } }
上面代码中，<a>标签的那一行代码是通过把Id参数放在URL的QueryString中，将图书的ID传递给AddBook页面.
2. 在Visual Studio 2022的解决方案资源管理器中，找到 AddBook .razor 组件，使用鼠标左键双击，在文本编辑器中打开，AddBook .razor 组件注入 NavigationManager ， 从 NavigationManager.Uri 属性中获取请求的查询字符串。修改代码如下:
@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 str = query,
}
private
void
ValidSubmitInfo(EditContext editContext) {
if
(editContext.Model
is
Book addBook) { Message
=
"
你编辑的不是图书信息，校验通过。正在保存。
"
; } }
private
void
InvalidSubmitInfo(EditContext editContext) {
if
(editContext.Model
is
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页面，我们我们使用鼠标左键点击左边菜单上的“图书列表”菜单项，浏览器会显示我们修改过的图书列表页面，将鼠标指针悬停在“编辑”链接上可以查看，链接背后的URL值，我们会在浏览器的左下角看到https://localhost:7110/AddBook?Id=3这样的地址。如下图.
4.在浏览器中，使用鼠标左键点击我们要修改的图书信息的“编辑”按钮，浏览器会自动跳转到AddBook页面。我们在AddBook的OnParametersSet方法 中设置断点，我们看到QueryString是取到了，但是不是我们想到的那种形式，如下图红框.
5.我们希望是获取的参数是一个字典集合，能通过键值，直接获取参数值，而不是上图中的这种字符串形式。Blazor看来没有对QueryString进行封装。所以我们需要通过QueryHelpers.ParseQuery方法将QueryString格式化成字典形式，然后通过输入KEY值获取对应的参数值。QueryHelpers类存Microsoft.AspNetCore.WebUtilities这个库里。我们修改OnParametersSet方法中的代码，具体代码如下所示:
protected
override void OnParametersSet() { var query = new Uri(NavigationManager.Uri).Query; var queryDic = Microsoft.AspNetCore.WebUtilities.QueryHelpers.ParseQuery(query); 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; } } } }
。
7.在Visual Studio 2022中按F5，让代码继续执行。回到浏览器中，页面已经自动跳转到AddBook页面，并将我们需要修改的图书信息显示出来。如下图。 
。
最后此篇关于学习ASP.NETCoreBlazor编程系列十——路由（下）的文章就讲到这里了,如果你想了解更多关于学习ASP.NETCoreBlazor编程系列十——路由（下）的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。
26
4
0
我是一名优秀的程序员,十分优秀！