前面用iframe实现了多标签页,这次是不用iframe实现的多标签页.参考了一下Ant Design Blazor.

基本功能已经都实现了不论是标签滚动、激活、左移、右移、关闭其他,还是在内容页跳转、新增、关闭标签都有实现。

已经可以用来做实际项目

源码地址: https://github.com/liningit/BlazorWebassemblyMultiPagesTabNoIframe

实现原理是新建一个类继承RouteView,在此类里面的Render方法中可以通过RouteData获取当前路由对应的对象.然后生成RenderFragment.

然后将其保存到List中,然后循环显示出来.对于未激活的通过display:none隐藏就可以了,这样哪怕切换标签状态也是保存的并不会刷新

    public class ReuseTabsRouteView : RouteView
{
[Inject]
public TabSetTool TabSetTool { get; set; } [Inject]
public NavigationManager Navmgr { get; set; } protected override void Render(RenderTreeBuilder builder)
{
var layoutType = RouteData.PageType.GetCustomAttribute<LayoutAttribute>()?.LayoutType ?? DefaultLayout; var body = CreateBody(RouteData, Navmgr.Uri); builder.OpenComponent<CascadingValue<ReuseTabsRouteView>>(0);
builder.AddAttribute(1, "Name", "RouteView");
builder.AddAttribute(2, "Value", this); builder.AddAttribute(3, "ChildContent", (RenderFragment)(b =>
{
b.OpenComponent(20, layoutType);
b.AddAttribute(21, "Body", body);
b.CloseComponent();
})); builder.CloseComponent();
var url = "/" + Navmgr.ToBaseRelativePath(Navmgr.Uri);
if (url != "/#")
{
var selTab = TabSetTool.Pages.FirstOrDefault(m => m.Url == url && (m.Title == TabSetTool.Title || string.IsNullOrEmpty(m.Title)));
if (selTab == null)
{
TabSetTool.Pages.Add(new Tab
{
Body = body,
Url = url,
Title = TabSetTool.Title,
IsActive = true,
});
}
else
{
selTab.Title = TabSetTool.Title;
selTab.Body = body;
selTab.IsActive = true;
}
}
} private RenderFragment CreateBody(RouteData routeData, string url)
{
return builder =>
{
builder.OpenComponent(0, routeData.PageType);
foreach (var routeValue in routeData.RouteValues)
{
builder.AddAttribute(1, routeValue.Key, routeValue.Value);
}
builder.CloseComponent();
};
} }

App.razor中将RouteView改成ReuseTabsRouteView.

另外要注意TabSet中一定要有

[CascadingParameter(Name = "RouteView")]
public ReuseTabsRouteView RouteView { get; set; }

这两句,要不然页面会不更新

Blazor Webassembly多标签页实现非iframe的实现的更多相关文章

  1. Blazor Webassembly多标签页开发

    最近准备用Blazor Webassembly做后台开发要用到多标签页,找了半天发现绝大多数都是Blazor Server的多标签没有Webassembly.没办法只能自己想办法造轮子了. 查了许多资 ...

  2. selenium 打开新标签页(非窗口)

    如何利用webdriver打开多个标签页和链接呢,到处查找得到的往往只是如何打开标签页. 打开标签页很简单,浏览器打开标签页的快捷键是ctrl+t,那把ctrl+t的按键事件传入即可,很多种实现方式, ...

  3. 一起学Blazor WebAssembly 开发(1)

    最近blazor的WebAssembly 正式版出来了,正好手头有一个项目采用的前后端分离模式做的,后端用的abp vnext(.net core 的一个很著名的框架)框架开发的,其实前端之前考虑的使 ...

  4. Ant Design Blazor 组件库的路由复用多标签页介绍

    最近,在 Ant Design Blazor 组件库中实现多标签页组件的呼声日益高涨.于是,我利用周末时间,结合 Blazor 内置路由组件实现了基于 Tabs 组件的 ReuseTabs 组件. 前 ...

  5. ASP.NET Core Blazor 初探之 Blazor WebAssembly

    最近Blazor热度很高,传说马上就要发布正式版了,做为微软脑残粉,赶紧也来凑个热闹,学习一下. Blazor Blazor是微软在ASP.NET Core框架下开发的一种全新的Web开发框架.Bla ...

  6. ASP.NET Core Blazor Webassembly 之 路由

    web最精妙的设计就是通过url把多个页面串联起来,并且可以互相跳转.我们开发系统的时候总是需要使用路由来实现页面间的跳转.传统的web开发主要是使用a标签或者是服务端redirect来跳转.那今天来 ...

  7. Blazor WebAssembly 渐进式 Web 应用程序 (PWA) 使用 LocalStorage 离线处理数据

    原文链接:https://www.cnblogs.com/densen2014/p/16133343.html Window.localStorage 只读的localStorage 属性允许你访问一 ...

  8. EasyUI创建异步树形菜单和动态添加标签页tab

    创建异步树形菜单 创建树形菜单的ul标签 <ul class="easyui-tree" id="treeMenu"> </ul> 写j ...

  9. 解决Bootstrap 标签页(Tab)插件切换echarts不显示问题

    1.参考连接:https://blog.csdn.net/qq_24313955/article/details/78363981 问题描述:在echarts跟bootstrap选项卡整合的时候,默认 ...

随机推荐

  1. [cf516E]Drazil and His Happy Friends

    令$d=\gcd(n,m)$,存在$x$和$y$使得$xn+i=ym+j$的充要条件是$i\equiv j(mod \ d)$,因此将$xd+i$(其中$0\le i<d$)作为一组,共有$d$ ...

  2. 基于echarts 24种数据可视化展示,填充数据就可用,动手能力强的还可以DIY(演示地址+下载地址)

    前言 我们先跟随百度百科了解一下什么是"数据可视化 [1]". 数据可视化,是关于数据视觉表现形式的科学技术研究. 其中,这种数据的视觉表现形式被定义为,一种以某种概要形式抽提出来 ...

  3. Furion分表分库我也要happy coding

    Furion分表分库集成ShardingCore ShardingCore ShardingCore 易用.简单.高性能.普适性,是一款扩展针对efcore生态下的分表分库的扩展解决方案,支持efco ...

  4. c语言是如何解析表达式语句"2+3*4;"的?

    1.  要编译的测试代码: int main(void) { 2+3*4; } 2. 词法分析 词法分析将字符变成token,其中很重要的是token的类型,如字符2的token类型为TK_NUM,这 ...

  5. freeswitch verto communicator客户端

    概述 我们在web客户端使用sip协议时用的比较多的是sipml5库和jssip库. 但是sip协议比较重,又复杂,所以freeswitch内部就自定义了一个verto协议,方便在web页面上使用音视 ...

  6. Codeforces Gym 101480C - Cow Confinement(扫描线+线段树)

    题面传送门 题意: 有一个 \(10^6\times 10^6\) 的地图.其中 \(m\) 个位置上有花,\(f\) 个矩形外围用栅栏围了起来.保证 \(f\) 个矩形两两之间没有公共点. \(q\ ...

  7. 洛谷 P6570 - [NOI Online #3 提高组] 优秀子序列(集合幂级数+多项式)

    洛谷题面传送门 首先 \(3^n\) 的做法就不多说了,相信对于会状压 dp+会枚举子集的同学来说不算困难(暴论),因此这篇博客将着重讲解 \(2^nn^2\) 的做法. 首先如果我们把每个 \(a_ ...

  8. 【shell】真正解决syntax error:unexpected end of file?

    今天写了个较长的shell脚本,结构嵌套比较多,最后运行时,出现了syntax error: unexpected end of file的错误. 这个之前碰到过,经常在win系统转移脚本文件到uni ...

  9. nohup使用

    nohup:不挂断运行 在忽略挂起信号的情况下运行给定的命令,以便在注销后命令可以在后台继续运行. 可以这么理解:不挂断的运行,注意并没有后台运行的功能,就是指,用nohup 运行命令可以是命令永远运 ...

  10. goto 的用法

    #include <stdio.h> int main() { printf("go to cpy \n"); goto FLASH_CPY; printf(" ...