ASP.NET Core Blazor Webassembly 之 路由
ASP.NET Core Blazor Webassembly 之 路由
web最精妙的设计就是通过url把多个页面串联起来,并且可以互相跳转。我们开发系统的时候总是需要使用路由来实现页面间的跳转。传统的web开发主要是使用a标签或者是服务端redirect来跳转。那今天来看看Blazor是如何进行路由的。
使用@page指定组件的路由path
我们可以在Blazor里给每个组件指定一个path,当路由匹配的时候会显示这个组件。
@page "/page/a"
PAGE A
@code {
}
访问/page/a 看到Page A页面被渲染出来了。
注意:如果是在浏览器里敲入url按回车切换页面,会发生一次http请求,然后重新渲染blazor应用。
使用a标签进行页面跳转
a标签作为超链接是我们web开发最常用的跳转方式,blazor同样支持。
新建Page B
@page "/page/b"
PAGE B
@code {
}
在Page A页面添加一个a标签进行跳转:
@page "/page/a"
PAGE A
<a href="/page/b">Page B</a>
@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"
PAGE A
<a href="/page/b/@userName">Page B</a>
@code {
private string userName = "小明";
}
通过把userName组合到path上传递给Page B。
修改Page B:
@page "/page/b/{userName}"
PAGE B
userName: @userName
@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"
PAGE A
<a href="/page/b?username=@userName">Page B</a>
@code {
private string userName = "小明";
}
首先安装一个工具库:
Install-Package Microsoft.AspNetCore.WebUtilities -Version 2.2.0
修改Page B:
@page "/page/b"
PAGE B
userName: @UserName
@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:
<span class="oi oi-plus" aria-hidden="true"></span> Counter </NavLink>
最后翻译成html:
<span class="oi oi-plus" aria-hidden="true"></span> Counter
NavigationManager
有的时候我们可能需要在代码里进行导航,如果是JavaScript我们会用window.location来切换页面,Blazor为我们提供了相应的封装:NavigationManager。使用NavigationManager可以通过代码直接进行页面间的跳转。我们在Page A页面放个按钮然后通过按钮的点击事件进行跳转:
@page "/page/a"
PAGE A
go to B
@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"
PAGE B
userName: @UserName
<button @onclick="GoBack"> Go back </button>
@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只有前进方法没有后退是比较让我震惊的。
作者:Agile.Zhou(kklldog)
出处:http://www.cnblogs.com/kklldog/
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
好程序员大数据培训分享大数据就业方向有哪些?
好程序员大数据培训分享大数据就业方向有哪些?看到了大数据的就业前景及就业薪资,相信很多人都对大数据技术跃跃欲试,想要学习大数据技术。小编认为在学习大数据之前,你还需要了解一下大数据的就业方向有哪些?毕竟我们学习大数据就是为了以后的就业,在掌握了大数据的就业方向之后,我们也可以明确自己的学习目标!大数据就业方向一、数据存储和管理大数据都是从数据存储开始。这意味着从大数据框架Hadoop开始。它是由Apache Foundation开发的开源软件框架,用在计算机集群上分布式存储非常大的数据集。显然,存储对于大数据所需的大量信息至关重要。但更重要的是,需要有一种方式来将所有这些数据集中到某种形成/管理结构中,以产生洞察力。因此,大数据存储和管理是真正的基础,而没有这样的分析平台是行不通的。在某些情况下,这些解决方案包括员工培训。大数据就业方向二、数据清理在企业真正处理大量数据以获取洞察信息之前,先需要对其进行清理、转换并将其转变为可远程检索的内容。大数据往往是非结构化和无组织的,因此需要进行某种清理或转换。在这个时代,数据的清理变得更加必要,因为数据可以来自任何地方:移动网络、物联网、社交媒...
- 下一篇
Python之Flask框架二
Python之Flask框架二 今天接着上一篇继续写一篇关于flask的随笔。 本文大纲: 1、获取请求参数 2、一个函数处理多个请求方式 3、重定向 4、错误响应 5、全局错误处理 6、返回json格式数据 7、自定义返回内容状态码 一、request获取请求参数 from flask import Flask, request app = Flask(__name__) @app.route("/")def index(): a = request #get请求 get_data = request.args #form 表单 form_data = request.form #json header{application/json} json_data = request.json #file file_data = request.files #同时获取args和form data = request.value method = request.method return a if name == '__main__': app.run(debug=True) 二、一个函数...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
-
Docker使用Oracle官方镜像安装(12C,18C,19C)
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS8编译安装MySQL8.0.19
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
推荐阅读
最新文章
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- CentOS6,CentOS7官方镜像安装Oracle11G
- SpringBoot2整合Redis,开启缓存,提高访问速度
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- Hadoop3单机部署,实现最简伪集群
- MySQL8.0.19开启GTID主从同步CentOS8
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果