Blazor + Ant Design + .NET 5快速开发框架（4）AntDesignAdmin完善

目录

运行截图

Blazor webassembly读取配置

MainLayout.razor.cs

收缩BUG更改

RenderFragment使用

总结

代码地址

运行截图

话不多说先放截图，经过一番修改，终于有点样子了，这一版本可以留下来，等其他开发继续使用

Blazor webassembly读取配置

blazor webassembly读取配置和其他有点不一样，他的appsettings.json需要放在wwwroot/下面

然后注入读取配置

[Inject]
IConfiguration Configuration { get; set; }

利用Configuration就可以读取配置项了，上次因为菜单栏收缩时候，logo并没有收缩，这里是截取部分图片，然后收缩时候，更改图片即可，看代码可以知道，当Collapsed值发生改变时候，对图片路径进行替换，注意，这是在wwwroot下面，是可以被访问到的，所以不要在这里写任何敏感的东西，另外blazor提供了很多种方式来访问配置文件，这里就不说了。

MainLayout.razor.cs

using Microsoft.Extensions.Configuration;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Logging;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components;

namespace Caviar.Shared
{
    partial class MainLayout
    {
        [Inject]
        IConfiguration Configuration { get; set; }
        /// 

        /// logo图片地址
        /// 
        string LogoImgSrc;

        string LogoImg;
        string LogoImgIco;

        protected override void OnInitialized()
        {
            LogoImg = Configuration["Logo:LogoPath:logo"];
            LogoImgIco = Configuration["Logo:LogoPath:logo-Ico"];
            LogoImgSrc = LogoImg;
            base.OnInitialized();
        }

        bool _collapsed;
        bool Collapsed
        {
            set
            {
                if (value)
                {
                    LogoImgSrc = LogoImgIco;
                }
                else
                {
                    LogoImgSrc = LogoImg;
                }
                _collapsed = value;
            }
            get
            {
                return _collapsed;
            }
        }
        

        void Toggle()
        {
            Collapsed = !Collapsed;
        }

        void OnCollapse(bool collapsed)
        {
            this.Collapsed = collapsed;

        }
    }
}

收缩BUG更改

上一次搭建完时候发现，当点击收缩时候，菜单栏并没有收缩，而是有部分内容在外面，这是由于Layout.Sider进行了收缩，而Menu却没有接到收缩指令造成的。知道了问题就好改了，由于我们把Menu变成了NavMenu组件，那么在外界发生更改命令时，就需要一个变量来接收通知，这就是Blazor的另一个好处。直接用变量代替。

using Microsoft.AspNetCore.Components;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace Caviar.Shared
{
    partial class NavMenu
    {
        [Parameter]
        public bool InlineCollapsed { get; set; }
    }
}

    
        Option 1
        Option 2
        Option 3
        Option 4
    
    
        Option 5
        Option 6
        
            Option 7
            Option 8
        
    
    
        Option 9
        Option 10
        Option 11
        Option 12
    


@code {
    RenderFragment sub1Title =
    @
        
        Navigation One
    ;

RenderFragment sub2Title =
@
    
    Navigation Two
;

RenderFragment sub4Title =
@
    
    Navigation Three
;
}

从代码可以看出来，由一个InlineCollapsed变量进行对外界的消息接收，然后传给组件，当发生收缩时，会传递给InlineCollapsed值，这样就可以进行联动了。

RenderFragment使用

从下面的代码可以看到RenderFragment可以直接代替razor的编写，就像替换html一样简单，sub2Title相当于一个小组件可以直接使用

RenderFragment sub2Title =
@
    
    Navigation Two
;

总结

bug修改可以对blazor了解更加深刻，blazor比想象的方便许多，但是有的地方还是不太习惯，比如依赖注入等，页面初始化等，同统改了方式，但是还是比较方便的。下一次我们搭建登录界面和404等页面。

代码地址