学习ASP.NET Core Blazor编程系列十一——路由（中）

落日映苍穹つ 2024-03-16 13:18 45阅读 0赞

### 五、通过路由传参 ###

通过上面的示例，我们使用<a>标签实现了页面之间的跳转，但是通常我们开发的Web应用程序，通过http的url进行页面跳转时，会进行参数传递，以方便我们跳转到的新页面进行一些前置操作。下面我们示例来学习如何从“图书列表”页面，使用鼠标点击“编辑“按钮进行跳转时，传递一个参数（例如图书ID）给新的页面“AddBook”。我们在“图书列表”页面中的将图书ID这个参数，在进行页面跳转时同步传递给“AddBook”页面，并且通过这个ID，查询到相应的图书信息，显示在AddBook页面上。

#### 六、 通过path传参 ####

通过url传参一般有两种方式，一种是直接把参数组合在URL的路径（path）里。路由器使用路由参数以相同的名称填充相应的组件参数。 路由参数名不区分大小写。 在下面的示例中，对 `/AddBook/3`发出请求，参数Id将URL路径中的参数值赋给AddBook组件的 Id属性。

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

![eb2cbe3e13c6ba103433aeaae17f172c.gif][]

@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/@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();
 }
 }

![440bacdb7dd26f09a754d058bad4316b.gif][]

上面代码中，<a>标签的代码是通过把Id组合到URL的路径（path）上，将图书的ID传递给AddBook页面。

2. 在Visual Studio 2022的解决方案资源管理器中，找到 AddBook`.razor` 组件，使用鼠标左键双击，在文本编辑器中打开，[AddBook.razor组件中添加一行@page][AddBook.razor_page]`开头的路由模板。本示例中`使用一个“/AddBook/\{Id\}” 路由模板来匹配Id,并且在代码中声明一个Id属性，并添加特性\[Parameter\]。修改代码如下：

![7f358521118b7ebf4c8dec0b037e6112.gif][]

@page "/AddBook"
 @page "/AddBook/{Id}"
 
 @using BlazorAppDemo.Models
 @using Microsoft.EntityFrameworkCore
 @inject IDbContextFactory<BookContext> dbFactory
 
 <h3>AddBook</h3>
 
 <EditForm Model=@addBook OnValidSubmit=@ValidSubmitInfo OnInvalidSubmit=@InvalidSubmitInfo>
 <DataAnnotationsValidator />
 <ValidationSummary />
 
 <div>@Message</div>
 图书名称：
 <InputText @bind-Value=addBook.Name></InputText>
 <ValidationMessage For="@(() => addBook.Name)" />
 
 作者：
 <InputText @bind-Value=addBook.Author></InputText>
 <ValidationMessage For="@(() => addBook.Author)" />
 
 
 出版日期：
 <InputDate @bind-Value=addBook.ReleaseDate></InputDate>
 
 价格：
 <InputNumber @bind-Value=addBook.Price></InputNumber>
 
 类型：
 <InputText @bind-Value=addBook.Type></InputText>
 <ValidationMessage For="@(() => addBook.Type)" />
 
 总页数：
 <InputNumber @bind-Value=addBook.TotalPages></InputNumber>
 
 库存数量：
 <InputNumber @bind-Value=addBook.StockQty></InputNumber>
 <ValidationMessage For="@(() => addBook.StockQty)" />
 
 已租数量：
 <InputNumber @bind-Value=addBook.Qty></InputNumber>
 
 <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();
 }
 [Parameter]
 public string Id { get; set; }
 
 protected override void OnParametersSet()
 {
 Id = Id ?? "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 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 = "图书信息保存失败！";
 }
 
 }
 
 }

![319553bf6bfe1c170b157b4727911d8b.gif][]

3.在Visual Studio 2022的菜单栏上，找到“调试à开始调试”或是按F5键，Visual Studio 2022会生成BlazorAppDemo应用程序，并在浏览器中打开Home页面，我们我们使用鼠标左键点击左边菜单上的“图书列表”菜单项，浏览器会显示我们修改过的图书列表页面，将鼠标指针悬停在“编辑”链接上可以查看，链接背后的URL值，我们会在浏览器的左下角看到[https://localhost:7110/AddBook/][https_localhost_7110_AddBook]3这样的地址。如下图。

![bc7ed55d0a61cb34a470058bdb4993f8.png][]

4.在浏览器中，使用鼠标左键点击我们要修改的图书信息的“编辑”按钮，浏览器会自动跳转到AddBook页面，并将我们需要修改的图书信息显示出来。如下图。

![97ff50438aade6e747a923a0e0d09afe.png][]

### 七、路由约束 ###

路由约束强制在路由段和组件之间进行类型匹配。

在以下示例中，到AddBook组件的路由仅在以下情况下匹配：

*  请求 URL 中存在 `Id` 路由段。
 *  `Id` 段是一个整数 (`int`) 类型。

![b20dea2d6164278cbf8479201ed18f67.gif][]

Pages/AddBook.razor:
 
 @page "/AddBook/{Id:int}"
 
 <h1>Book Id: @Id</h1>
 
 @code {
 
 [Parameter]
 public int Id { get; set; }
 
 }

![4a09bafc92a7e68d0e4fa10d91a119df.gif][]

备注

路由约束不适用于查询字符串值。

下表中显示的路由约束可用。 有关与固定区域性匹配的路由约束，请参阅表下方的警告了解详细信息。

<table> 
 <thead> 
 <tr> 
 <td> 约束 </td> 
 <td> 示例 </td> 
 <td> 匹配项示例 </td> 
 <td> 固定条件区域性&nbsp;匹配 </td> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td> <code>bool</code> </td> 
 <td> <code>{active:bool}</code> </td> 
 <td> <code>true</code>,&nbsp;<code>FALSE</code> </td> 
 <td> 否 </td> 
 </tr> 
 <tr> 
 <td> <code>datetime</code> </td> 
 <td> <code>{dob:datetime}</code> </td> 
 <td> <code>2016-12-31</code>,&nbsp;<code>2016-12-31 7:32pm</code> </td> 
 <td> 是 </td> 
 </tr> 
 <tr> 
 <td> <code>decimal</code> </td> 
 <td> <code>{price:decimal}</code> </td> 
 <td> <code>49.99</code>,&nbsp;<code>-1,000.01</code> </td> 
 <td> 是 </td> 
 </tr> 
 <tr> 
 <td> <code>double</code> </td> 
 <td> <code>{weight:double}</code> </td> 
 <td> <code>1.234</code>,&nbsp;<code>-1,001.01e8</code> </td> 
 <td> 是 </td> 
 </tr> 
 <tr> 
 <td> <code>float</code> </td> 
 <td> <code>{weight:float}</code> </td> 
 <td> <code>1.234</code>,&nbsp;<code>-1,001.01e8</code> </td> 
 <td> 是 </td> 
 </tr> 
 <tr> 
 <td> <code>guid</code> </td> 
 <td> <code>{id:guid}</code> </td> 
 <td> <code>CD2C1638-1638-72D5-1638-DEADBEEF1638</code>, <code>{CD2C1638-1638-72D5-1638-DEADBEEF1638}</code> </td> 
 <td> 否 </td> 
 </tr> 
 <tr> 
 <td> <code>int</code> </td> 
 <td> <code>{id:int}</code> </td> 
 <td> <code>123456789</code>,&nbsp;<code>-123456789</code> </td> 
 <td> 是 </td> 
 </tr> 
 <tr> 
 <td> <code>long</code> </td> 
 <td> <code>{ticks:long}</code> </td> 
 <td> <code>123456789</code>,&nbsp;<code>-123456789</code> </td> 
 <td> 是 </td> 
 </tr> 
 </tbody> 
</table>

警告

验证 URL 的路由约束并将转换为始终使用固定区域性的 CLR 类型（例如 `int` 或 DateTime）。 这些约束假定 URL 不可本地化。

[eb2cbe3e13c6ba103433aeaae17f172c.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/6fd27cd1ef604984bb256c92bc7b720f.png
[440bacdb7dd26f09a754d058bad4316b.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/b83fb0f48b394012b6044e1093311bdf.png
[AddBook.razor_page]: mailto:AddBook.razor%E7%BB%84%E4%BB%B6%E4%B8%AD%E6%B7%BB%E5%8A%A0%E4%B8%80%E8%A1%8C@page
[7f358521118b7ebf4c8dec0b037e6112.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/8dea00f0f98b47b4b04093005dbe0835.png
[319553bf6bfe1c170b157b4727911d8b.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/259b9dc2cd1445ceaa5a20dfe5ebec0e.png
[https_localhost_7110_AddBook]: https://localhost:7110/AddBook/2
[bc7ed55d0a61cb34a470058bdb4993f8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/03434356ba114eb88a2ffc421785fca6.png
[97ff50438aade6e747a923a0e0d09afe.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/9f965018c194491495c22c9128fc030f.png
[b20dea2d6164278cbf8479201ed18f67.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/0ccca8b1658442a594b335ea53cecc6a.png
[4a09bafc92a7e68d0e4fa10d91a119df.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/d5363891da96444db030ecd3ba9a1e4b.png