ASP.NET Core Blazor Webassembly 之 路由
web最精妙的设计就是通过url把多个页面串联起来,并且可以互相跳转。我们开发系统的时候总是需要使用路由来实现页面间的跳转。传统的web开发主要是使用a标签或者是服务端redirect来跳转。那今天来看看Blazor是如何进行路由的。
使用@page指定组件的路由path
我们可以在Blazor里给每个组件指定一个path,当路由匹配的时候会显示这个组件。
@page "/page/a"
<h2>
PAGE A
</h2>
@code {
}
访问/page/a 看到Page A页面被渲染出来了。
注意:如果是在浏览器里敲入url按回车切换页面,会发生一次http请求,然后重新渲染blazor应用。
使用a标签进行页面跳转
a标签作为超链接是我们web开发最常用的跳转方式,blazor同样支持。
新建Page B
@page "/page/b"
<h2>
PAGE B
</h2>
@code {
}
在Page A页面添加一个a标签进行跳转:
@page "/page/a"
<h2>
PAGE A
</h2>
<p>
<a href="/page/b">Page B</a>
</p>
@code {
}
运行一下试试:
注意:使用a连接在页面间进行跳转不会发生http请求到后台,页面是直接在前端渲染出来的。
通过路由传参
通过http的url进行页面间传参是我们web开发的常规操作。下面我们演示下如何从Page A传递一个参数到Page B。我们预设Page A里面有个UserName需要传递到Page B,并且显示出来。
通过path传参
通过url传参一般有两种方式,一种是直接把参数组合在path里,比如“/page/b/小明”这样。
修改Page A:
@page "/page/a"
<h2>
PAGE A
</h2>
<p>
<a href="/page/b/@userName">Page B</a>
</p>
@code {
private string userName = "小明";
}
通过把userName组合到path上传递给Page B。
修改Page B:
@page "/page/b/{userName}"
<h2>
PAGE B
</h2>
<p>
userName: @userName
</p>
@code {
[Parameter]
public string userName { get; set; }
}
Page B 使用一个“/page/b/{userName}” pattern来匹配userName,并且userName需要标记[Parameter]并且设置为public。
通过QueryString传参
除了把参数直接拼接在path里,我们还习惯通过QueryString方式传递,比如“/page/b?username=小明”。
修改Page A:
@page "/page/a"
<h2>
PAGE A
</h2>
<p>
<a href="/page/b?username=@userName">Page B</a>
</p>
@code {
private string userName = "小明";
}
首先安装一个工具库:
Install-Package Microsoft.AspNetCore.WebUtilities -Version 2.2.0
修改Page B:
@page "/page/b"
<h2>
PAGE B
</h2>
<p>
userName: @UserName
</p>
@using Microsoft.AspNetCore.WebUtilities;
@inject NavigationManager NavigationManager;
@code {
[Parameter]
public string UserName { get; set; }
protected override void OnInitialized()
{
var uri = NavigationManager.ToAbsoluteUri(NavigationManager.Uri);
QueryHelpers.ParseQuery(uri.Query).TryGetValue("username", out Microsoft.Extensions.Primitives.StringValues userName);
Console.WriteLine(NavigationManager.Uri);
UserName = userName.ToString();
Console.WriteLine(UserName);
base.OnInitialized();
}
}
页面获取QueryString的传参比较麻烦,Blazor并没有进行封装。所以我们需要通过QueryHelpers.ParseQuery方法手工把QueryString格式化成字典形式,然后获取对应的参数。QueryHelpers类存在Microsoft.AspNetCore.WebUtilities这个库里,需要通过nuget安装。
NavLink
NavLink是个导航组件,它其实就是封装了a标签。当选中的时候,也就是当前的url跟它的href一致的时候,会自动在class上加上active类,所以可以用来控制选中的样式。默认的3个导航菜单就是用的NavLink。
比如导航到counter的NavLink:
<NavLink class="nav-link" href="counter">
<span class="oi oi-plus" aria-hidden="true"></span> Counter
</NavLink>
最后翻译成html:
<a href="counter" class="nav-link active">
<span class="oi oi-plus" aria-hidden="true"></span> Counter
</a>
NavigationManager
有的时候我们可能需要在代码里进行导航,如果是JavaScript我们会用window.location来切换页面,Blazor为我们提供了相应的封装:NavigationManager。使用NavigationManager可以通过代码直接进行页面间的跳转。我们在Page A页面放个按钮然后通过按钮的点击事件进行跳转:
@page "/page/a"
<h2>
PAGE A
</h2>
<p>
<button @onclick="GoToB">
go to B
</button>
</p>
@inject NavigationManager NavigationManager
@code {
private void GoToB()
{
NavigationManager.NavigateTo("/page/b?username=小猫");
}
}
修改Page A的代码,注入NavigationManager对象,通过NavigationManager.NavigateTo方法进行跳转。
扩张Back方法
Blazor封装的NavigationManager咋一看以为跟WPF的NavigationService一样,我想当然的觉得里面肯定有个Back方法可以进行后退。但是查了一番发现还真的没有,这就比较尴尬了,没办法只能使用JavaScript来实现了。
为了方便我们给NavigationManager直接写个扩展方法吧。
首先修改Program把IServiceCollection暴露出来:
public class Program
{
public static IServiceCollection Services;
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddTransient(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
Services = builder.Services;
await builder.Build().RunAsync();
}
}
扩展类:
public static class Ext
{
public static void Back(this NavigationManager navigation)
{
var jsruntime = Program.Services.BuildServiceProvider().GetService<IJSRuntime>();
jsruntime.InvokeVoidAsync("history.back");
}
}
这个扩展方法很简单,从DI容器里获取IJSRuntime的实例对象,通过它去调用JavaScript的history.back方法。
修改Page B:
@page "/page/b"
<h2>
PAGE B
</h2>
<p>
userName: @UserName
</p>
<p>
<button @onclick="GoBack">
Go back
</button>
</p>
@using Microsoft.AspNetCore.WebUtilities;
@inject NavigationManager NavigationManager;
@code {
[Parameter]
public string UserName { get; set; }
protected override void OnInitialized()
{
var uri = NavigationManager.ToAbsoluteUri(NavigationManager.Uri);
QueryHelpers.ParseQuery(uri.Query).TryGetValue("username", out Microsoft.Extensions.Primitives.StringValues userName);
Console.WriteLine(NavigationManager.Uri);
UserName = userName.ToString();
Console.WriteLine(UserName);
base.OnInitialized();
}
private void GoBack()
{
NavigationManager.Back();
}
}
在Page B页面上添加一个按钮,点击调用NavigationManager.Back方法就能回到上一页。
总结
到此Blazor路由的内容学习的差不多了,整体上没有什么特别的,就是NavigationManager只有前进方法没有后退是比较让我震惊的。
相关内容:
ASP.NET Core Blazor Webassembly 之 数据绑定
ASP.NET Core Blazor Webassembly 之 组件
ASP.NET Core Blazor 初探之 Blazor WebAssembly
ASP.NET Core Blazor 初探之 Blazor Server
ASP.NET Core Blazor Webassembly 之 路由的更多相关文章
- ASP.NET Core Blazor Webassembly 之 数据绑定
上一次我们学习了Blazor组件相关的知识(Asp.net Core Blazor Webassembly - 组件).这次继续学习Blazor的数据绑定相关的知识.当代前端框架都离不开数据绑定技术. ...
- ASP.NET Core Blazor Webassembly 之 组件
关于组件 现在前端几大轮子全面组件化.组件让我们可以对常用的功能进行封装,以便复用.组件这东西对于搞.NET的同学其实并不陌生,以前ASP.NET WebForm的用户控件其实也是一种组件.它封装ht ...
- [Asp.Net Core] Blazor WebAssembly - 工程向 - 如何在欢迎页面里, 预先加载wasm所需的文件
前言, Blazor Assembly 需要最少 1.9M 的下载量. ( Blazor WebAssembly 船新项目下载量测试 , 仅供参考. ) 随着程序越来越复杂, 引用的东西越来越多, ...
- ASP.NET Core Blazor WebAssembly 之 .NET JavaScript互调
Blazor WebAssembly可以在浏览器上跑C#代码,但是很多时候显然还是需要跟JavaScript打交道.比如操作dom,当然跟angular.vue一样不提倡直接操作dom:比如浏览器的后 ...
- ASP.NET Core Blazor Webassembly 之 渐进式应用(PWA)
Blazor支持渐进式应用开发也就是PWA.使用PWA模式可以使得web应用有原生应用般的体验. 什么是PWA PWA应用是指那些使用指定技术和标准模式来开发的web应用,这将同时赋予它们web应用和 ...
- ASP.NET Core Blazor WebAssembly实现一个简单的TODO List
基于blazor实现的一个简单的TODO List 最近看到一些大佬都开始关注blazor,我也想学习一下.做了一个小的demo,todolist,仅是一个小示例,参考此vue项目的实现http:// ...
- 学习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 用Inspinia静态页模板搭建简易后台(实现菜单选中)
Blazor 是一个用于使用 .NET 生成交互式客户端 Web UI 的框架: 使用 C# 代替 JavaScript 来创建丰富的交互式 UI. 共享使用 .NET 编写的服务器端和客户端应用逻辑 ...
随机推荐
- java ->基本数据类型与包装类的概述和转化
基本类型 包装类概述 在实际程序使用中,程序界面上用户输入的数据都是以字符串类型进行存储的.而程序开发中,我们需要把字符串数据,根据需求转换成指定的基本数据类型,如年龄需要转换成int类型,考试成绩需 ...
- 可持续字典树 Perfect Security
题目链接 题目大意:给你两个序列,第二个序列可以任意进行排列变换,然后由这两个序列一一异或得到答案序列,要求答案序列的字典序最小. 可持续字典树与第K大可持续线段树的区别主要在于每个节点上 ,它多了一 ...
- 07.django日志配置
https://docs.djangoproject.com/en/3.0/topics/logging/ https://yiyibooks.cn/xx/python_352/library/log ...
- 花费一周刷完两份面试pdf(含答案)轻松拿下了抖音、头条、京东、小米等大厂的offer,成功度过程序员的寒冬。
整理出一篇Java进阶架构师之路的核心知识,同时也是面试时面试官必问的知识点,篇章也是包括了很多知识点,其中包括了有基础知识.Java集合.JVM.多线程并发.spring原理.微服务.Netty 与 ...
- eclipse——Error exists in required project Proceed with launch?
运行java文件时报错: Error exists in required project Proceed with launch? 报错截图: 问题参生原因:开始Buildpath了一个jar ...
- poi——读取excel数据
单元格类型 读取Excel数据 package com.java.test.poi; import java.io.File; import java.io.FileInputStream; impo ...
- Golang源码学习:调度逻辑(二)main goroutine的创建
接上一篇继续分析一下runtime.newproc方法. 函数签名 newproc函数的签名为 newproc(siz int32, fn *funcval) siz是传入的参数大小(不是个数):fn ...
- docker的镜像加速
docker加速配置 1,阿里云镜像加速 1.登录:https://dev.aliyun.com/search.html 2.登录阿里云 搜索 容器镜像服务 找到后如下图 ‘ 您可以通过修改da ...
- Verilog语言中的系统任务和系统函数
Verilog语言中预先定义了一些任务和函数,用于完成一些特殊的功能,它们被称为系统任务和系统函数,这些函数大多数都是只能在Testbench仿真中使用的,使我们更方便的进行验证. `timescal ...
- C#不定长参数
Test(5,6,7,8,9,10); void Test(int sd, params int[] arr)//不定长参数前要加params { for(int i = 0 ; i < arr ...