Blazor带我重玩前端(四)
布局
Blazor中的布局和MVC中的布局是类似的。
创建布局
新建一个Razor页面,所有新增的布局都要继承LayoutComponentBase,同时标识自定义内容的输出位置,即标识Body的位置。如图所示:
应用布局
我们修改一下index.razor页面中的代码,增加@layout MyLayout。运行后,按F12查看网页源代码如下:
布局的内容被<app></app>
标签包着,这也意味着,我们的layout并不是页面的全部内容,而仅仅只是blazor相关的内容。
顺便说一下,布局是可以“继承”的,也就是说,我们可以声明一个新的布局继承自MainLayout.razor ,只需要指定如下代码即可:
@inherits LayoutComponentBase
@layout MainLayout
路由
路由定义
路由模板
定义在App.razor中:
<Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
</Found>
<NotFound>
<LayoutView Layout="@typeof(MainLayout)">
<p>Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
里面有三个重要组件:
- Found:路由机制渲染存在的页面
- RouteView:接收路由数据和默认的布局
- NotFound:路由机制渲染不存在的页面,当然我们可以自己定义404内容
定义路由
路由定义很简单,只需要前缀@page,然后定义你的路由名称即可,如@page “index”。当然一个页面可以定义多个路由。如下:
- @page “/index”
- @page “/”
- @page “/home/index”
定义与约束路由参数
这个其实和ASP.NET Core API的路由方式没有太大区别,包括路由约束部分。
@page "/Index/{Theme}"
接收参数的方式也很简单,需要声明一个get;set的属性,并且必须是public的,同时需要用Parameter特性去标识。
@{
[Parameter]
public string Theme{get;set;}
}
以下是路由约束,相比于MVC,这些约束也没什么变化。
我们先看一个例子
<div class="@NavMenuCssClass" @onclick="@ToggleNavMenu">
<ul class="nav flex-column">
<li class="nav-item px-3">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span class="oi oi-home" aria-hidden="true"></span> Home
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="MyComponent" Match="NavLinkMatch.Prefix">
<span class="oi oi-plus" aria-hidden="true"></span> My Component
</NavLink>
</li>
</ul>
</div>
NavLinkMatch有两个枚举:
- NavLinkMatch.All:当匹配整个URL时,可以路由到页面
- NavLinkMatch.Prefix:这是默认使用的,当匹配到当前URL的前缀时,可以路由到页面。如https://localhost:5001/MyComponent和 https://localhost:5001/MyComponent/AnotherSegment 接下来我们看一下如果通过代码方式进行页面跳转,那就是可以使用NavigationManager进行页面跳转,其实例是通过注入获取的。
@inject NavigationManager NavigationManager
成员 |
描述 |
---|---|
Uri |
获取当前的绝对URL |
BaseUri |
获取根URI(末尾带斜杠),然后以此追加相对路径进而组合成绝对URI |
NavigateTo |
导航到指定的 URI(前提是设置forceLoad 为true),使用此方式,会绕过客户端路由,使得浏览器会强制刷新页面,如:UriHelper.NavigateTo("/DataList/" + Index, forceLoad); |
LocationChanged |
当导航位置更改时触发的事件 |
ToAbsoluteUri |
将相对 URI 转换为绝对 URI |
ToBaseRelativePath |
给定一个根 URI(例如,以前由BaseUri返回的 URI),将绝对 URI 转换为带有根URI 前缀的相对 URI |
其他
Blazor虽然提供了十分丰富而又灵活的路由功能,但目前还没有一个明确的功能让我们使用可选参数,但是我们可以变通一下,就是设置接收的数据类型为可空类型。代码如下:
@page “DataList/{Index:int}”
[Parameter]
public int? Index { get; set; }
protected override void OnInitialized()
{
base.OnInitialized();
Index = Index?? 1;
}
- 数据处理的统计学习(scikit-learn教程)
- 机器学习实战,使用朴素贝叶斯来做情感分析
- Python NLTK 处理原始文本
- 通过闪回事务查看数据dml的情况 (r2笔记69天)
- 通过shell和sql结合查找性能sql(r2笔记68天)
- 淘宝的评论归纳是用什么方法做到的?
- Python的机器学习实战:AadBoost
- 通过shell检查分区表中是否含有默认分区(r2笔记87天)
- 利用python爬取人人贷网的数据
- 通过shell脚本查看package的信息(r2笔记86天)
- 通过shell脚本查看procedure的信息(r2笔记85天)
- 支持中文文本数据挖掘的开源项目PyMining
- 通过分区键值发现性能问题(r2笔记84天)
- linux乱码和数据库乱码的问题简单排查(r2笔记83天)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 访问令牌JWT
- Java集成JWT
- Computer Graphics note(3):视口变换&光栅化
- Mac安装mysql
- 剑指Offer题解
- nginx 常见问题记录
- ReturnSingleDatabase为True报错的解决办法
- 【Vim】vim配置的选择
- 关于HashMap的一些理解
- SpringBoot2.x系列教程(六十一)Spring Boot集成FastDFS实现文件上传
- 解决对接华为kafka 进行Kerberos认证时的sun.security.krb5.KrbException
- Newbe.Claptrap 框架如何实现多级生命周期控制?
- Kafka linux(centos7)安装配置kerberos并在另一台机器上使用Java服务接收消息
- SpringCloud bus 手动post可用 使用webhooks自动更新配置失效的解决小记
- 处理Storm1.2.2 日志报错 与spring boot冲突