Blazor Webassembly多标签页实现非iframe的实现

前面用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; }

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

相关推荐
djk88882 小时前
.net6.0(.net Core)读取 appsettings.json 配置文件
json·.net·.netcore
喵叔哟4 小时前
16. 【.NET 8 实战--孢子记账--从单体到微服务】--汇率获取定时器
微服务·oracle·.net
zhy81030210 小时前
.net6 使用 FreeSpire.XLS 实现 excel 转 pdf - docker 部署
pdf·.net·excel
初九之潜龙勿用10 小时前
C#校验画布签名图片是否为空白
开发语言·ui·c#·.net
慧都小妮子11 小时前
Spire.PDF for .NET【页面设置】演示:打开 PDF 时自动显示书签或缩略图
java·pdf·.net
霍先生的虚拟宇宙网络13 小时前
.net 支持跨平台(桌面)系列技术汇总
.net
djk888813 小时前
.net的winfrom程序 窗体透明&打开窗体时出现在屏幕右上角
.net
九鼎科技-Leo1 天前
什么是 WPF 中的依赖属性?有什么作用?
windows·c#·.net·wpf
dot.Net安全矩阵1 天前
.NET 通过模块和驱动收集本地EDR的工具
windows·安全·web安全·.net·交互
zls3653651 天前
.NET开源实时应用监控系统:WatchDog
.net