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

傷城~ 2024-03-16 13:18 82阅读 0赞

除了前面三篇文章中介绍的路由方式，可以用来进行页面跳转之外，今天介绍最后一种方式，如何在代码中进行页面跳转。

### 九、NavigationManager ###

有的时候我们可能需要在代码里进行导航，如果是JavaScript我们会用window.location来切换页面，Blazor为我们提供了相应的封装：NavigationManager。使用NavigationManager可以通过代码直接进行页面间的跳转。我们在BookIndex页面放个按钮然后通过按钮的点击事件进行跳转，修改BookIndex页面的代码，注入NavigationManager对象，通过NavigationManager.NavigateTo方法进行跳转。

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;"> <p><strong>名称</strong></p> </td> 
   <td style="vertical-align:top;"> <p><strong>类型</strong></p> </td> 
   <td style="vertical-align:top;"> <p><strong>说明</strong></p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"> <p>BaseUri</p> </td> 
   <td style="vertical-align:top;"> <p>属性</p> </td> 
   <td style="vertical-align:top;"> <p>获取或设置当前的基 URI。BaseUri 始终表示为字符串形式的绝对 URI，以斜杠结尾。 通常，这与文档中 &lt;base&gt; 元素的 href 特性相对应。</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"> <p>Uri</p> </td> 
   <td style="vertical-align:top;"> <p>属性</p> </td> 
   <td style="vertical-align:top;"> <p>获取或设置当前 URI。 Uri 始终以字符串形式表示为绝对 URI。</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"> <p>NavigateTo</p> </td> 
   <td style="vertical-align:top;"> <p>方法</p> </td> 
   <td style="vertical-align:top;"> <p>导航到指定 URI。</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"> <p>ToAbsoluteUri</p> </td> 
   <td style="vertical-align:top;"> <p>方法</p> </td> 
   <td style="vertical-align:top;"> <p>将相对 URI 转换为绝对 URI。</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"> <p>ToBaseRelativePath</p> </td> 
   <td style="vertical-align:top;"> <p>方法</p> </td> 
   <td style="vertical-align:top;"> <p>给定基 URI (比如，前面的 BaseUri 的返回值)，将绝对 URI 转换为相对于基 URI 前缀的 URI。</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"> <p>LocationChanged</p> </td> 
   <td style="vertical-align:top;"> <p>事件</p> </td> 
   <td style="vertical-align:top;"> <p>当导航位置变化时触发的事件。</p> </td> 
  </tr> 
 </tbody> 
</table>

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

![9d6c5057fafac8de3487a3a5dc8607ad.gif][]

@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>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>
                    <button id="edit" class="btn btn-primary" @οnclick="EditBook(@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(int Id)
        {
    
            NavigationManager.NavigateTo("/AddBook?Id="+Id.ToString());
        }
    
    }

![6fde97d0537b8def680275ec17402b03.gif][]

上面代码中，我们添加了Button按钮和EditBook方法，在EditBook方法 中我们通过NavigationManager.NavigateTo("/AddBook?Id="+Id.ToString());

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

2.在我们写完上面的代码之后，Visual Studio 2022提示我们使用的Button的@onclick事件调用的方法 是错误的。如下图。

![9543494d5f5073fdf903233df3917f66.png][]

3. 我们希望根据通过事件处理程序传递额外的参数的想法破灭了。幸好Blazor 还支持将 Lambda 表达式作为委托事件处理程序。我们在事件处定义一个小型内联函数，将我们需要传递的信息作为方法的参数与事件参数一起传递给事件处理程序。在下面的示例中，我们在点击鼠标按钮的时候，将图书ID和MouseEventArgs参数，一起传递给EditBook方法。依照下面的代码片段再次修改BookIndex.razor中的Button的点击事件的代码和EditBook方法的代码。代码如下：

![697985c2fd3d6e1ad00281f5564eb6e6.gif][]

<button id="edit" class="btn btn-primary" @οnclick="@(e => EditBook(e, @item.ID))">修改</button>
    
              
    
    public void EditBook(MouseEventArgs e ,int Id)
        {
            NavigationManager.NavigateTo("/AddBook?Id="+Id.ToString());
    }

![ca056647001052275d758a11a80e958b.gif][]

4. 对于AddBook`.razor` 文件中的代码，我们不需要进行任何修改，还是使用上一篇文章中的代码。

5.在Visual Studio 2022的菜单栏上，找到“调试à开始调试”或是按F5键，Visual Studio 2022会生成BlazorAppDemo应用程序，并在浏览器中打开Home页面，我们我们使用鼠标左键点击左边菜单上的“图书列表”菜单项，浏览器会显示我们修改过的图书列表页面，浏览器中我们看到在“编辑”按钮的下方，多了一个“修改”按钮。如下图。

![27049dc64d9f829378760fa48d0c9e95.png][]

6.在浏览器中，使用鼠标左键点击我们要修改的图书信息的“修改”按钮，浏览器会自动跳转到AddBook页面。我们在AddBook的OnParametersSet方法 中设置断点，我们看到QueryString是取到了，我们看通过QueryHelpers.ParseQuery方法将QueryString格式化成字典形式，通过键值ID，我们取到了我们想到的参数值。如下图。

![c88b3c6cda0b9e3e0e9ff7e216ca10e5.png][]

7.在Visual Studio 2022中按F5，让代码继续执行。回到浏览器中，页面已经自动跳转到AddBook页面，并将我们需要修改的图书信息显示出来。如下图。

![ab4338c11351852503464814e019ff43.png][]

[9d6c5057fafac8de3487a3a5dc8607ad.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/ee0c7a5ae08d47e9b72c7b01b81f0ef3.png
[6fde97d0537b8def680275ec17402b03.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/c8551b36db0043b7a8636ab3ea76357a.png
[9543494d5f5073fdf903233df3917f66.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/148ead79573a4aa8ac6c9b46db8bfbcd.png
[697985c2fd3d6e1ad00281f5564eb6e6.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/39c0df2d66804f94aa00a2c57848fe32.png
[ca056647001052275d758a11a80e958b.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/e6675cfbfa464c5cb5f8941e46d6e64b.png
[27049dc64d9f829378760fa48d0c9e95.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/7ee001f1e2a547268bc27f30fd13248a.png
[c88b3c6cda0b9e3e0e9ff7e216ca10e5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/68e992261efe4162bb8649160f2db295.png
[ab4338c11351852503464814e019ff43.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/cda08d51dd6048faafc24d2b8c21e356.png