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

学习ASP.NET Core Blazor编程系列一——综述学习ASP.NET Core Blazor编程系列二——第一个Blazor应用程序（上）学习ASP.NET Core Blazor编程系列二——第一个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编程系列九——服务器端校验 
   一、ASP.NET Core Blazor之 路由

      Web应用程序的可以通过URL将多个页面串联起来，达成一个组件功能，并且可以互相跳转。我们开发系统的时候总是需要使用路由来实现页面之间的跳转。ASP.NET Core MVC或是ASP.NET WebForm主要是使用a标签或者是服务端redirect来跳转。例如在ASP.NET Core MVC中我们使用如下代码进行跳转：

1.   <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
2.    <a asp-page="./Edit" asp-route-id="@item.ID">Edit</a>

复制代码

      那么Blazor是如何进行页面之间跳转的呢？接下来我们来学习页面之间的跳转。
     二、 使用@page指定组件的路由路径进行跳转

      我们在创建Blazor应用程序时，微软已经给我们内置了一个默认的路由，这个是由Blazor的路由组件(Router)实现的。
通过 Router 组件可在 Blazor 应用中路由到 Razor 组件。 Router 组件在 Blazor 应用的 App 组件中使用。在Visual Studio 2022的解决方案管理器中找到App.razor，双击打开，你可以看到如下代码：

1. <Router AppAssembly="@typeof(App).Assembly">
2.   <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
3.   <Found Context="routeData">
4.   <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
5.    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
6.    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
7.   <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
8.    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
9.    <FocusOnNavigate RouteData="@routeData" Selector="h1" />
10.   <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
11.   </Found>
12.   <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
13.   <NotFound>
14.   <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
15.    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
16.    <PageTitle>Not found</PageTitle>
17.   <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
18.    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
19.    <LayoutView Layout="@typeof(MainLayout)">
20.   <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
21.    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
22.    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
23.    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
24. <p role="alert">Sorry, there's nothing at this address.</p>
25.   <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
26.    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
27.    </LayoutView>
28.   <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
29.   </NotFound>
30. </Router>

复制代码

        我们在创建Blazor组件的时候，须在组件的第一行写上@page 开头的代码， @page “url路径” 来表示路由地址，比如/ BookIndex，那么该页面的请求地址就是域名:端口号/ BookIndex。代码示例如下：

1. @page "/BookIndex"

复制代码

       Visual Studio 2022编译器在编译带有 @page 指令的 Razor 组件 (.razor) 时，将为组件类提供一个 RouteAttribute 来指定组件的路由。
       当应用程序启动时，应用程序将扫描由Router组件中AppAssembly属性指定的程序集，收集程序集中具有 RouteAttribute 的Blazor组件的路由信息。
      在应用程序运行时，RouteView 组件：

• 从 Router 接收 RouteData 以及所有路由参数。
  
• 使用指定的组件的布局来呈现该组件，包括任何后续嵌套布局。
  

      对于没有使用 @layout 指令指定布局的组件，可使用RouteView中DefaultLayout 参数来指定一个默认的布局，NET 6框架中的 Blazor项目模板默认指定 MainLayout 组件 (Shared/MainLayout.razor) 作为应用的默认布局。    

1.   <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />

复制代码

      访问/BookIndex 看到BookIndex 页面被渲染出来了。如下图。


       Router不与查询字符串值交互。
     三、在找不到内容时提供自定义内容

        在Blazor里给每个组件指定一个路径（URL），当路由匹配的时候，会在节点里面渲染出来，如果没有的话会在节点里面渲染，当然你也可以自定义一个404的页面。在Visual Studio 2022的解决方案资源管理器中，找到 App.razor 组件，使用鼠标左键双击，在文本编辑器中打开，找到Router组件的 NotFound 模板，NotFound 模板中设置自定义内容。例如如下示例代码：  

1.   <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
2.    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
3.    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
4.    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
5.    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
6.    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
7.    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
8.    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
9.    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
10.    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
11.    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
12.    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
13. Not found  <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
14.    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
15.    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
16.    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
17.    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
18.    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
19.    [size=6]页面走失！请确认输入的URL是否正确！[/size]
21.   <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
22.    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
23.    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
24.    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
25. Sorry, there's nothing at this address.
26.   <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
27.    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
28.    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
29.    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />

复制代码

        任意项都可用作  标记的内容，例如其他交互式组件。

       在VisualStudio 2022的菜单栏上，找到“调试-->开始调试”或是按F5键，Visual Studio 2022会生成BlazorAppDemo应用程序，并在浏览器中打开Home页面，我们浏览器的地址栏中输https://localhost:7110/BookEdit。由于我们的应用程序中没有BookEdit这个组件或是页面，我们将会看到我们刚才定义的404页面，这个页面被渲染出来了。如下图。

    注意：如果是在浏览器里敲入url按回车切换页面，会发生一次http请求，然后重新渲染blazor应用。
     四、使用a标签进行页面跳转

         标签作为超链接是我们在进行Web应用程序开发中最常用的一种页面跳转方式，blazor同样支持。
         在Visual Studio 2022的解决方案资源管理器中，找到 BookIndex.razor 组件，使用鼠标左键双击，在文本编辑器中打开，然后修改代码如下：

1. @page "/BookIndex"@using BlazorAppDemo.Models@using Microsoft.EntityFrameworkCore @inject IDbContextFactory dbFactory 图书列表[size=4]图书列表[/size]
3. [table]  <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
4.    [tr][td]Name[/td]  <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
5.   [td]Author[/td]  <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
6.   [td]Price[/td]  <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
7.   [td]ReleaseDate[/td]  <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
8.   [td]StockQty[/td]  <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
9.   [td]Qty[/td]  <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
10.   [td]操作[/td]  <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
11.   [/tr]  <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
12.   @foreach (var item in books)  <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
13.   {  <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
14.    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
15.    [tr]  <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
16.    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
17.    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
18. [td]@item.Name[/td]  <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
19.    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
20.    [td]@item.Author[/td]  <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
21.    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
22.    [td]@item.Price[/td]  <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
23.    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
24.    [td]@item.ReleaseDate[/td]  <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
25.    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
26.    [td]@item.StockQty[/td]  <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
27.    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
28.    [td]@item.Qty[/td]  <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
29.    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
30.    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
31.    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
32. [td][url=https://www.cnblogs.com/AddBook]编辑[/url][/td]  <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
33. [/tr]  <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
34.    }[/table]@code {  <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
35.   private  <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
36. static BookContext _context;  <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
37.   private List books = new List();  <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
38. protected override async Task OnInitializedAsync()  <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
39.   {  <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
40.    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
41.    _context = dbFactory.CreateDbContext();  <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
42.    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
43.    books=_context.Book.ToList();  <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
44.    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
45.    await base.OnInitializedAsync();  <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
46.   }}

复制代码

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


      使用鼠标左键，点击“编辑”，页面将会从图书列表页面中跳转到AddBook页面，但是没有任何我们想要的数据，这个问题留到下一步给出解决方案。如下图。
        注意：使用标签在页面之间进行跳转不会发生http请求传输到后台，经过服务器处理之后，再传输到前面进行渲染，而是直接在前端将页面渲染出来。

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