[Asp.Net Core] Blazor Server Side 项目实践

前言:

这是项目实践系列 , 算是中高级系列博文, 用于为项目开发过程中不好解决的问题提出解决方案的. 不属于入门级系列. 解释起来也比较跳跃, 只讲重点.

因为有网友的项目需求, 所以提前把这些解决方案做出来并分享.

问题:

Blazor自己是携带一个简单的路由功能的, 当切换Url的时候, 整个通过把RouteData传递给 App.razor 加载 MainLayout , 实现页面刷新的目的.

如果跳转到另外一个页面, 然后再跳回来的时候, 希望原来页面不刷新, 保留之前的状态 , 例如搜索条件, 那么怎么办?

解决过程:

结合视频, 图文观看效果最好 : https://www.bilibili.com/video/BV1g54y1R7uX/

1. 现在简单说说, 这种情况的源头在哪里.
2. App.razor 文件使用了 RouteView 来实现路由
3. routeData是包含页面类型, 以及页面参数的.
4. 然而默认的实现里, RouteView 是不带状态的
5. MainLayout虽然得到了内容的 RenderFragment ,
6. 然而这个 RenderFragment是由RouteView直接绑定到routeData上面去.
7. 所以MainLayout无法得到不同的RenderFragment来显示不同的内容.
8. 要解决这个问题, 首先第一步就是改造 RouteView

改造 RouteView

using System;

using System.Collections.Generic;

using Microsoft.AspNetCore.Components.Rendering;

using System.Reflection;

namespace Microsoft.AspNetCore.Components   //use this namepace so copy/paste this code easier

{

    public class KeepPageStateRouteView : RouteView

    {

        protected override void Render(RenderTreeBuilder builder)

        {

            var layoutType = RouteData.PageType.GetCustomAttribute<LayoutAttribute>()?.LayoutType ?? DefaultLayout;

            builder.OpenComponent<LayoutView>();

            builder.AddAttribute(, "Layout", layoutType);

            builder.AddAttribute(, "ChildContent", (RenderFragment)CreateBody());

            builder.CloseComponent();

        }

        RenderFragment CreateBody()

        {

            var pagetype = RouteData.PageType;

            var routeValues = RouteData.RouteValues;

            void RenderForLastValue(RenderTreeBuilder builder)

            {

                //dont reference RouteData again

                builder.OpenComponent(, pagetype);

                foreach (KeyValuePair<string, object> routeValue in routeValues)

                {

                    builder.AddAttribute(, routeValue.Key, routeValue.Value);

                }

                builder.CloseComponent();

            }

            return RenderForLastValue;

        }

    }

}

Blazor自带的RouteView是一个控件. 它每次呈现, 都使用 RouteData 属性, 所以它每次生成的 RenderFragment 都是跟着最后的 RouteData 走, 保存来没用.

改造后的 KeepPageStateRouteView , 使用 CreateBody() 方法, 创建出绑定 pagetype 和 routevalue 的 RenderFragement , 为 MainLayout 打下基础

改造 MainLayout

@inherits LayoutComponentBase

@inject NavigationManager navmgr

@code{

    TimeSpan GetUrlMaxLifeSpan(string url)

    {

        if (url.Contains("/fetchdata")) // Let /fetachdata always refresh

            return TimeSpan.Zero;

        if (url.Contains("/counter"))   // Let /counter expires in 10 seconds

            return TimeSpan.FromSeconds(10);

        return TimeSpan.FromSeconds(-1);    //other pages never expires

    }

    class PageItem

    {

        public string Url;

        public RenderFragment PageBody;

        public DateTime StartTime = DateTime.Now;

        public DateTime ActiveTime = DateTime.Now;

        public TimeSpan MaxLifeSpan;

    }

    Dictionary<string, PageItem> bodymap = new Dictionary<string, PageItem>();

    int mainRenderCount = 0;

}

<div class="sidebar">

    <NavMenu />

</div>

<div class="main">

    @{

        bool currurlrendered = false;

        string currenturl = navmgr.Uri;

        PageItem curritem;

        if (bodymap.TryGetValue(currenturl, out curritem))

        {

            curritem.ActiveTime = DateTime.Now;

        }

        else

        {

            curritem = new PageItem { Url = currenturl, PageBody = Body };

            curritem.MaxLifeSpan = GetUrlMaxLifeSpan(currenturl);

            if (curritem.MaxLifeSpan != TimeSpan.Zero)

            {

                bodymap[navmgr.Uri] = curritem;

            }

        }

        mainRenderCount++;

    }

    <div class="top-row px-4">

        #@mainRenderCount

        , CurrentUrl : @currenturl

        . PageCount : @bodymap.Count

        ,

        <button @onclick="StateHasChanged">StateHasChanged</button>

    </div>

    @foreach (PageItem eachitem in bodymap.Values.ToArray())

    {

        string pageurl = eachitem.Url;

        RenderFragment pagebody = eachitem.PageBody;

        string divstyle = "display:none";

        if (pageurl == currenturl)

        {

            divstyle = "";

            currurlrendered = true;

        }

        else if (eachitem.MaxLifeSpan.TotalSeconds > 0 && DateTime.Now - eachitem.ActiveTime > eachitem.MaxLifeSpan)

        {

            bodymap.Remove(eachitem.Url);

            continue;

        }

        <div @key="pageurl" class="content px-4" style="@divstyle">

            @pagebody

        </div>

    }

    @if (!currurlrendered)

    {

        <div class="content px-4">

            @Body

        </div>

    }

</div>

MainLayout 里, 最关键的是 Dictionary<string, PageItem> bodymap = new Dictionary<string, PageItem>();

这个字典, Key 是 Url , 而 PageItem 则储存了这个 Url 的多个信息.

范例使用了 TimeSpan GetUrlMaxLifeSpan(string url) 函数来制定页面的生存时间规则.

如果页面的生存时间是 0 , 表示不加进 bodymap , 每次都要全部刷新.

生存时间不为0 , 就储存到 bodymap 里面去. 然后在

@foreach (PageItem eachitem in bodymap.Values.ToArray())

循环过程中, 把每一个页面 Render 出来.

当前页面, 就显示, 不是当前页面, 则 display:none

没错. 在 Blazor 的 Render 体系里 , 只有输出了, 才有生命. 不输出, 就会被系统释放.

所以, 所有要让它活着的 Page , 都得输出. 哪怕用display:none隐藏它.

看看视频效果吧.

https://www.bilibili.com/video/BV1g54y1R7uX/

最后:

github : https://github.com/BlazorPlus/BlazorDemoKeepPageState

下一个版本: 支持多Tabs

https://github.com/BlazorPlus/BlazorDemoMultiPagesTab

暂时没时间做视频写博客. 后面补上.

视频杂音的确多, 求推荐一个麦克风..