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

 学习ASP.NET Core Blazor编程系列一——综述
学习ASP.NET Core Blazor编程系列二——第一个Blazor应用程序（上）
学习ASP.NET Core Blazor编程系列二——第一个Blazor应用程序（完）学习ASP.NET Core Blazor编程系列三——实体学习ASP.NET Core Blazor编程系列四——迁移学习ASP.NET Core Blazor编程系列五——列表页面学习ASP.NET Core Blazor编程系列七——新增图书学习ASP.NET Core Blazor编程系列八——数据校验学习ASP.NET Core Blazor编程系列九——服务器端校验学习ASP.NET Core Blazor编程系列十——路由（上） 五、通过路由传参

          通过上面的示例，我们使用标签实现了页面之间的跳转，但是通常我们开发的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 组件，使用鼠标左键双击，在文本编辑器中打开，然后修改代码如下：

1. @page "/BookIndex"
2. @using BlazorAppDemo.Models
3. @using Microsoft.EntityFrameworkCore
6. @inject IDbContextFactory<BookContext> dbFactory
9. <PageTitle>图书列表</PageTitle>
11. <h3>图书列表</h3>
13. <table class="table-responsive" width="90%">
14.     <tr><td>Name</td>
15.     <td>Author</td>
16.     <td>Price</td>
17.     <td>ReleaseDate</td>
18.     <td>StockQty</td>
19.     <td>Qty</td>
20.     <td>操作</td>
23.     </tr>
24.     @foreach (var item in books)
25.     {
26.         <tr>
27.         <td>@item.Name</td>
28.         <td>@item.Author</td>
29.         <td>@item.Price</td>
30.         <td>@item.ReleaseDate</td>
31.         <td>@item.StockQty</td>
32.         <td>@item.Qty</td>
33.             <td><a target="_blank" href="https://www.cnblogs.com/AddBook/@item.ID">编辑</a></td>
34.     </tr>
36.     }
37. </table>
39. @code {
40.     private   static BookContext _context;
41.     private List<Book> books = new List<Book>();
42.     protected override async Task OnInitializedAsync()
43.     {
44.         _context = dbFactory.CreateDbContext();
45.         books=_context.Book.ToList();
46.         await base.OnInitializedAsync();
47.     }
48. }

复制代码

      上面代码中，标签的代码是通过把Id组合到URL的路径（path）上，将图书的ID传递给AddBook页面。      2. 在Visual Studio 2022的解决方案资源管理器中，找到 AddBook.razor 组件，使用鼠标左键双击，在文本编辑器中打开，AddBook.razor组件中添加一行@page开头的路由模板。本示例中使用一个“/AddBook/{Id}” 路由模板来匹配Id,并且在代码中声明一个Id属性，并添加特性[Parameter]。修改代码如下：

1. @page "/AddBook"
2. @page "/AddBook/{Id}"
4. @using BlazorAppDemo.Models
5. @using Microsoft.EntityFrameworkCore
6. @inject IDbContextFactory<BookContext> dbFactory
8. <h3>AddBook</h3>
10. <EditForm Model=@addBook OnValidSubmit=@ValidSubmitInfo  OnInvalidSubmit=@InvalidSubmitInfo>
11.     <DataAnnotationsValidator />
12.     <ValidationSummary />
14.     @Message
15.     <p> 图书名称：
16.     <InputText @bind-Value=addBook.Name></InputText>
17.         <ValidationMessage For="@(() => addBook.Name)" />
18.     </p>
19.     <p>作者：
20.     <InputText @bind-Value=addBook.Author></InputText>
21.         <ValidationMessage For="@(() => addBook.Author)" />
22.     </p>
23.    
24.     <p>出版日期：
25.     <InputDate @bind-Value=addBook.ReleaseDate></InputDate>
26.      </p>
27.     <p>价格：
28.     <InputNumber @bind-Value=addBook.Price></InputNumber>
29.      </p>
30.     <p>类型：
31.      <InputText @bind-Value=addBook.Type></InputText>
32.         <ValidationMessage For="@(() => addBook.Type)" />
33.       </p>
34.     <p>总页数：
35.     <InputNumber @bind-Value=addBook.TotalPages></InputNumber>
36.      </p>
37.     <p>库存数量：
38.     <InputNumber @bind-Value=addBook.StockQty></InputNumber>
39.         <ValidationMessage For="@(() => addBook.StockQty)" />
40.      </p>
41.     <p>已租数量：
42.     <InputNumber @bind-Value=addBook.Qty></InputNumber>
43.     </p>
44.     <input type="submit" class="btn btn-primary" value="Save" />
46. </EditForm>
47. @code {
48.     private string Message = string.Empty;
49.     private static BookContext _context;
50.     private Models.Book addBook = new Book();
51.     protected override Task OnInitializedAsync()
52.     {
53.         _context = dbFactory.CreateDbContext();
54.         return base.OnInitializedAsync();
55.     }
56.     [Parameter]
57.     public string Id { get; set; }
59.     protected override void OnParametersSet()
60.     {
61.         Id = Id ?? "0";
62.         if (!string.IsNullOrEmpty(Id))
63.         {
64.             if (Id!="0")
65.             {
66.                 int iId = int.Parse(Id);
67.                 var book = _context.Book.Find(iId);
68.                 if (book!=null)
69.                 {
70.                     addBook = book;
71.                 }
72.             }
73.            
74.         }
75.     }
78.     private void ValidSubmitInfo(EditContext editContext)
79.     {
81.         if (editContext.Model is  Book addBook)
82.         {
83.             Message = "你编辑的不是图书信息，校验通过。正在保存。";
84.            
85.         }
86.     }
87.     private void InvalidSubmitInfo(EditContext editContext)
88.     {
89.         if (editContext.Model is  Book addBook)
90.       
91.         {
92.             Message = "你编辑的图书信息校验不通过，请修改。";
93.         }
95.     }
97.     private void Save(EditContext editContext)
98.     {
99.         bool dataIsValid = editContext.Validate();
100.         if (!dataIsValid)
101.         {
102.             Message = "你编辑的图书信息校验不通过，请修改。";
103.             return;
104.         }
106.         if (editContext.Model is not Book addBook)
107.         {
108.             Message = "你编辑的不是图书信息。";
109.             return;
110.         }
112.         _context.Add(editContext.Model);
113.         int cnt=  _context.SaveChanges();
114.         if (cnt>0)
115.         {
116.         Message = "图书信息保存成功！";
118.         }else
119.        {
120.             Message = "图书信息保存失败！";
121.        }
123.     }
125. }

复制代码

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


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

 
七、路由约束

路由约束强制在路由段和组件之间进行类型匹配。
在以下示例中，到AddBook组件的路由仅在以下情况下匹配：

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

1. Pages/AddBook.razor:
3. @page "/AddBook/{Id:int}"
5. <h1>Book Id: @Id</h1>
7. @code {
9.     [Parameter]
10.     public int Id { get; set; }
12. }

复制代码

备注    路由约束不适用于查询字符串值。
    下表中显示的路由约束可用。 有关与固定区域性匹配的路由约束，请参阅表下方的警告了解详细信息。

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

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！