学习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编程系列十——路由（中）八、通过QueryString传参

       除了把参数直接拼接在URL路径（path）里，另一种常用的传递参数的方法是，将参数做为QueryString传递给跳转页面，比如“/BookIndex?Id=3”。可从 NavigationManager.Uri 属性中获取请求的查询字符串，在跳转页面中注入，具体代码如下。

1. @inject NavigationManager NavigationManager 
3. ... 
5. var query = new Uri(NavigationManager.Uri).Query;

复制代码

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

1. @page "/BookIndex"
2. @using BlazorAppDemo.Models
3. @using Microsoft.EntityFrameworkCore
5.  
6. @inject IDbContextFactory<BookContext> dbFactory
8.  
10. <PageTitle>图书列表</PageTitle>
12. <h3>图书列表</h3>
14. <table class="table-responsive" width="90%"> 
15.     <tr><td>Name</td>
16.     <td>Author</td>
17.     <td>Price</td>
18.     <td>ReleaseDate</td>
19.     <td>StockQty</td>
20.     <td>Qty</td>
21.     <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?Id=@item.ID">编辑</a></td>
34.     </tr>
35.  
36.     }
37. </table>
38.  
39.  
40. @code {
41.     private   static BookContext _context;
42.     private List<Book> books = new List<Book>();
43.     protected override async Task OnInitializedAsync()
44.     {
45.         _context = dbFactory.CreateDbContext();
46.         books=_context.Book.ToList();
47.         await base.OnInitializedAsync();
48.     }
50. }

复制代码

         上面代码中，标签的那一行代码是通过把Id参数放在URL的QueryString中，将图书的ID传递给AddBook页面。

      2. 在Visual Studio 2022的解决方案资源管理器中，找到 AddBook.razor 组件，使用鼠标左键双击，在文本编辑器中打开，AddBook.razor组件注入NavigationManager，从 NavigationManager.Uri 属性中获取请求的查询字符串。修改代码如下：

1. @page "/AddBook"
2. @using BlazorAppDemo.Models
3. @using Microsoft.EntityFrameworkCore
4. @inject IDbContextFactory<BookContext> dbFactory
5. @inject NavigationManager NavigationManager
6.  
8. <h3>AddBook</h3>
10. <EditForm Model=@addBook OnValidSubmit=@ValidSubmitInfo  OnInvalidSubmit=@InvalidSubmitInfo>
12.     <DataAnnotationsValidator />
13.     <ValidationSummary />
14.  
15.     @Message
16.     <p> 图书名称：
17.     <InputText @bind-Value=addBook.Name></InputText>
18.         <ValidationMessage For="@(() => addBook.Name)" />
19.     </p>
20.     <p>作者：
21.     <InputText @bind-Value=addBook.Author></InputText>
22.         <ValidationMessage For="@(() => addBook.Author)" />
23.     </p>
24.     
25.     <p>出版日期：
26.     <InputDate @bind-Value=addBook.ReleaseDate></InputDate>
27.      </p>
28.     <p>价格：
29.     <InputNumber @bind-Value=addBook.Price></InputNumber>
30.      </p>
31.     <p>类型：
32.      <InputText @bind-Value=addBook.Type></InputText>
33.         <ValidationMessage For="@(() => addBook.Type)" />
34.       </p>
35.     <p>总页数：
36.     <InputNumber @bind-Value=addBook.TotalPages></InputNumber>
37.      </p>
38.     <p>库存数量：
39.     <InputNumber @bind-Value=addBook.StockQty></InputNumber>
40.         <ValidationMessage For="@(() => addBook.StockQty)" />
41.      </p>
42.     <p>已租数量：
43.     <InputNumber @bind-Value=addBook.Qty></InputNumber>
45.     </p>
47.     <input type="submit" class="btn btn-primary" value="Save" />
49.  
51. </EditForm>
53. @code {
55.     private string Message = string.Empty;
57.     private static BookContext _context;
59.     private Models.Book addBook = new Book();
61.     protected override Task OnInitializedAsync()
62.     {
63.         _context = dbFactory.CreateDbContext();
64.         return base.OnInitializedAsync();
65.     }
66.  
67.     public string Id { get; set; }
68.  
69.     protected override void OnParametersSet()
70.     {
72.         var query = new Uri(NavigationManager.Uri).Query;

复制代码

        var str = query;

1.      }
2.  
3.  
4.     private void ValidSubmitInfo(EditContext editContext)
5.     {
6.  
7.         if (editContext.Model is  Book addBook)
8.         {
9.             Message = "你编辑的不是图书信息，校验通过。正在保存。";
10.            
11.         }
12.     }
13.     private void InvalidSubmitInfo(EditContext editContext)
14.     {
15.         if (editContext.Model is  Book addBook)
16.        
17.         {
18.             Message = "你编辑的图书信息校验不通过，请修改。";
19.         }
20.  
21.     }
24.     private void Save(EditContext editContext)
25.     {
26.         bool dataIsValid = editContext.Validate();
27.         if (!dataIsValid)
28.         {
29.             Message = "你编辑的图书信息校验不通过，请修改。";
30.             return;
31.         }
32.  
33.  
34.         if (editContext.Model is not Book addBook)
35.         {
36.             Message = "你编辑的不是图书信息。";
37.             return;
38.         }
39.    if (string.IsNullOrEmpty(Id) || Id == "0" )
40.         {
41.             _context.Add(editContext.Model);
42.         }
43.      
44.         int cnt=  _context.SaveChanges();
46.         if (cnt>0)
47.         {
48.         Message = "图书信息保存成功！"; 
50.         }
51. else
52.        {
53.             Message = "图书信息保存失败！";
55.        }
57.     }
58.  
59. }

复制代码

      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方法中的代码，具体代码如下所示：

1. protected override void OnParametersSet()
3.     {
5.         var query = new Uri(NavigationManager.Uri).Query;
6.         var queryDic = Microsoft.AspNetCore.WebUtilities.QueryHelpers.ParseQuery(query);
8.         Id = queryDic["Id"].ToString() ?? "0";
10.         if (!string.IsNullOrEmpty(Id))
11.         {
12.             if (Id!="0")
13.             {
14.                 int iId = int.Parse(Id);
15.                 var book = _context.Book.Find(iId);
16.                 if (book!=null)
17.                 {
18.                     addBook = book;
19.                 }
20.             }
21.         }
22.     }

复制代码

      6.在浏览器中，使用鼠标左键点击我们要修改的图书信息的“编辑”按钮，浏览器会自动跳转到AddBook页面。我们在Visual Studio 2022的文本编辑器中的AddBook.razor文件的OnParametersSet方法 中设置断点，我们看到QueryString是取到了，我们看通过QueryHelpers.ParseQuery方法将QueryString格式化成字典形式，通过键值ID，我们取到了我们想到的参数值。如下图。
 
7.在Visual Studio 2022中按F5，让代码继续执行。回到浏览器中，页面已经自动跳转到AddBook页面，并将我们需要修改的图书信息显示出来。如下图。
 

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