一、ASP.NET Core Blazor之路由

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

     <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，双击打开，你可以看到如下代码：

<Router AppAssembly="@typeof(App).Assembly">

    <Found Context="routeData">

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

        <FocusOnNavigate RouteData="@routeData" Selector="h1" />

    </Found>

    <NotFound>

        <PageTitle>Not found</PageTitle>

        <LayoutView Layout="@typeof(MainLayout)">

            <p role="alert">Sorry, there's nothing at this address.</p>

        </LayoutView>

    </NotFound>

</Router>

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

@page "/BookIndex"

Visual Studio 2022编译器在编译带有 @page 指令的 Razor 组件 (.razor) 时，将为组件类提供一个 RouteAttribute 来指定组件的路由。

当应用程序启动时，应用程序将扫描由Router组件中AppAssembly属性指定的程序集，收集程序集中具有 RouteAttribute 的Blazor组件的路由信息。

在应用程序运行时，RouteView 组件：

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

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

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

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

Router
不与查询字符串值交互。

三、在找不到内容时提供自定义内容

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

<Router AppAssembly="@typeof(App).Assembly">

    <Found Context="routeData">

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

        <FocusOnNavigate RouteData="@routeData" Selector="h1" />

    </Found>

    <NotFound>

        <PageTitle>Not found</PageTitle>

        <LayoutView Layout="@typeof(MainLayout)">

            <h1>页面走失！请确认输入的URL是否正确！</h1>

            <p role="alert">Sorry, there's nothing at this address.</p>

        </LayoutView>

    </NotFound>

</Router>

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

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

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

四、使用a标签进行页面跳转

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

@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">编辑</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();

    }

}

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

使用鼠标左键，点击“编辑”，页面将会从图书列表页面中跳转到AddBook页面，但是没有任何我们想要的数据，这个问题留到下一步给出解决方案。如下图。

注意：使用标签<a>在页面之间进行跳转不会发生http请求传输到后台，经过服务器处理之后，再传输到前面进行渲染，而是直接在前端将页面渲染出来。

学习ASP.NET Core Blazor编程系列十——路由（上）的更多相关文章

学习ASP.NET Core Blazor编程系列十——路由（中）
学习ASP.NET Core Blazor编程系列一--综述学习ASP.NET Core Blazor编程系列二--第一个Blazor应用程序(上) 学习ASP.NET Core Blazor编程系 ...
学习ASP.NET Core Blazor编程系列五——列表页面
学习ASP.NET Core Blazor编程系列一--综述学习ASP.NET Core Blazor编程系列二--第一个Blazor应用程序(上) 学习ASP.NET Core Blazor编程系 ...
学习ASP.NET Core Blazor编程系列八——数据校验
学习ASP.NET Core Blazor编程系列一--综述学习ASP.NET Core Blazor编程系列二--第一个Blazor应用程序(上) 学习ASP.NET Core Blazor编程系 ...
学习ASP.NET Core Blazor编程系列九——服务器端校验
学习ASP.NET Core Blazor编程系列一--综述学习ASP.NET Core Blazor编程系列二--第一个Blazor应用程序(上) 学习ASP.NET Core Blazor编程系 ...
学习ASP.NET Core Razor 编程系列十九——分页
学习ASP.NET Core Razor 编程系列目录学习ASP.NET Core Razor 编程系列一学习ASP.NET Core Razor 编程系列二——添加一个实体学习ASP.NET ...
学习ASP.NET Core Razor 编程系列十八——并发解决方案
学习ASP.NET Core Razor 编程系列目录学习ASP.NET Core Razor 编程系列一学习ASP.NET Core Razor 编程系列二——添加一个实体学习ASP.NET ...
学习ASP.NET Core Razor 编程系列十六——排序
学习ASP.NET Core Razor 编程系列目录学习ASP.NET Core Razor 编程系列一学习ASP.NET Core Razor 编程系列二——添加一个实体学习ASP.NET ...
学习ASP.NET Core Razor 编程系列十五——文件上传功能（三）
学习ASP.NET Core Razor 编程系列目录学习ASP.NET Core Razor 编程系列一学习ASP.NET Core Razor 编程系列二——添加一个实体学习ASP.NET ...
学习ASP.NET Core Razor 编程系列十四——文件上传功能（二）
学习ASP.NET Core Razor 编程系列目录学习ASP.NET Core Razor 编程系列一学习ASP.NET Core Razor 编程系列二——添加一个实体学习ASP.NET ...

随机推荐

贪吃蛇（C语言版）链表实现
贪吃蛇 gitee:贪吃蛇C语言版: Snake 蛇的结构 typedef struct Snake { int x; int y; struct Snake *next; }; 游戏开始欢迎界面 / ...
CF -1679C
Problem - 1679C - Codeforces 题意:当t=1加入一个点,每个点可以影响一行和一列,t=2删除某个点,t=3判断这个矩形内的每个点是否都可以影响. 思路:开始时直接暴力,T了 ...
python 中matplotlib 绘图
python 中matplotlib 绘图数学建模需要,对于绘图进行简单学习 matpoltlib之类的包安装建议之间用anaconda 绘制一条y=x^2的曲线 #比如我们要绘制一条y=x^2的曲 ...
Java开发学习(二十九)----Maven依赖传递、可选依赖、排除依赖解析
现在的项目一般是拆分成一个个独立的模块,当在其他项目中想要使用独立出来的这些模块,只需要在其pom.xml使用<dependency>标签来进行jar包的引入即可. <depende ...
KingbaseES 工具sys_dump，sys_restore使用介绍
说明: KingbaseES V8R6版本中自带数据库备份导出sys_dump,和备份恢复sys_restore工具. sys_dump:把KingbaseES数据库抽取为一个脚本文件或其他归档文件. ...
java 类名后加变量名是什么意思？
回答这个问题我们需要先了解两个事情: A是一个类,我们如果对他进行实例化,需要这样写: A a = new A(); 详细解释一下这个语句,首先等号左边做的事情:在JVM栈内存(stack)中定义了一 ...
2020年12月-第02阶段-前端基础-CSS Day06
CSS Day06 定位(position) 理解能说出为什么要用定位能说出定位的4种分类能说出四种定位的各自特点能说出我们为什么常用子绝父相布局应用能写出淘宝轮播图布局 1. CSS 布 ...
Java SE 19 新增特性
Java SE 19 新增特性作者:Grey 原文地址: 博客园:Java SE 19 新增特性 CSDN:Java SE 19 新增特性源码源仓库: Github:java_new_featu ...
k8s 如何关联pvc到特定的pv
可以使用对 pv 打 label 的方式,具体如下: 创建 pv,指定 label $ cat nfs-pv2.yaml apiVersion: v1 kind: PersistentVolume # ...
五、frp内网穿透客户端frpc.ini各配置参数详解
[必须]标识头[common]是不可或缺的部分 [必须]frps服务端IPserver_addr = 0.0.0.00.0.0.0为FRP服务端IP,客户端要填写为服务端已配置的对应的IP,或者是服务 ...

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

一、ASP.NET Core Blazor之 路由