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; }
        /// <summary>
        /// logo图片地址
        /// </summary>
        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; }
    }
}

<Menu Mode="MenuMode.Inline"
      Accordion
      Theme="MenuTheme.Dark"
      SelectedKeys="@(new[] { "1"})"
      OpenKeys="@(new[] { "sub1" })"
      InlineCollapsed="InlineCollapsed"
      >
    <SubMenu Key="sub1" TitleTemplate=@sub1Title>
        <MenuItem Key="1">Option 1</MenuItem>
        <MenuItem Key="2">Option 2</MenuItem>
        <MenuItem Key="3">Option 3</MenuItem>
        <MenuItem Key="4">Option 4</MenuItem>
    </SubMenu>
    <SubMenu Key="sub2" TitleTemplate=@sub2Title>
        <MenuItem Key="5">Option 5</MenuItem>
        <MenuItem Key="6">Option 6</MenuItem>
        <SubMenu Key="sub3" Title="Submenu">
            <MenuItem Key="7">Option 7</MenuItem>
            <MenuItem Key="8">Option 8</MenuItem>
        </SubMenu>
    </SubMenu>
    <SubMenu Key="sub4" TitleTemplate=@sub4Title>
        <MenuItem Key="9">Option 9</MenuItem>
        <MenuItem Key="10">Option 10</MenuItem>
        <MenuItem Key="11">Option 11</MenuItem>
        <MenuItem Key="12">Option 12</MenuItem>
    </SubMenu>
</Menu>

@code {
    RenderFragment sub1Title =
    @<span>
        <Icon Type="mail" Theme="outline"></Icon>
        <span>Navigation One</span>
    </span>;

RenderFragment sub2Title =
@<span>
    <Icon Type="appstore" Theme="outline"></Icon>
    <span>Navigation Two</span>
</span>;

RenderFragment sub4Title =
@<span>
    <Icon Type="setting" Theme="outline"></Icon>
    <span>Navigation Three</span>
</span>;
}

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

RenderFragment使用

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

RenderFragment sub2Title =
@<span>
    <Icon Type="appstore" Theme="outline"></Icon>
    <span>Navigation Two</span>
</span>;

总结

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

代码地址