屁话

我不喜欢重复又重复抄那些项目简介，Blazor特性。

时间 2020年5月5日

突然给朋友写一个小工具（突然有个朋友）
开始的想法是.Net Core接口 + FreeSql的ORM + Sqlite的数据库
界面一直是我短板，也是不少后端的短板。

开始考虑的是

方案	借口
Vue + iView	懒癌，不想两个项目互相切换，Vue只懂皮毛。
Ant Design Pro	React入门还是挺快的，不过一开始就被moment.js 版本问题搞住了，虽然在issue找到了答案，不过还是后怕

突然脑阔一闪，想起了Blazor
百度了一下，发现都快发正式了。

刚出来的时候就试过几个Demo，后来因为比较忙(懒)就弃坑了

我的选择

如何创建就不说了

用Blazor对于.Net系列用户还是十分友好的。
我选择使用Blazor是因为不想写前端的东西

别说我说话冲，看过中后台项目(千百个+)
Layui少说占了80%，着实审美疲劳
前端开发永远安利的Element也不想提
说实话，后端的审美还是有待提高的（很多后台因为没有好的规划和前端介入惨不忍睹，大量飞线操作）

但是其实呀，用了Blazor还是得写关于前端的东西

Blazor的很多UI框架都是收费的，免费的很多都是移植的，不敢尝试。
前端功底差还是最好打消使用Blazor的想法，有条件的直接买Telerik稳定理财

Bootstrap for Blazor
Ant Design for Blazor
Telerik for Blazor （收费，花了钱的东西就是专业）
…

最后，我选择了Blazorise

点击进入现场 -> Blazorise的链接

我比较喜欢直接clone源码，然后使用引入项目导入

主要是发现有什么问题的时候可以自己调整
或者写个自定义拓展什么的

一个简单的教程

第一步

进入Blazorise的网站

在这个Usage这个地方，他有说到推荐的CSS风格

这个地方，我用的是AntDesign
他在Start里写的是Bootstrap的，如果不是很介意调色和风格，用哪个都无所谓的

第二步

在Blazor项目Nuget管理器中搜索Blazorsie

安装（我这使用的AntDesign）：

Blazorise.AntDesign
Blazorise.Icons.FontAwesome

其中 Blazorise 不需要单独引入

以Server模式举例，之后需要在 _Imports.razor 中添加

@using Blazorise

在Pages的 _Host.cshtml 中添加

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/4.0.0/antd.css" integrity="sha256-nzhI/tsi9npc5ir08wCgBpg43SEIrc7crRJLsHE0/60=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">

<link href="_content/Blazorise/blazorise.css" rel="stylesheet" />

<script src="_content/Blazorise/blazorise.js"></script>
<script src="_content/Blazorise.AntDesign/blazorise.antdesign.js"></script>

考虑到这个突然的朋友可能没有网络，我把CDN引用的CSS改为可本地，复制链接下载就行

在Startup.cs中添加

services.AddBlazorise(options =>
            {
                options.ChangeTextOnKeyPress = true;
            })
            .AddAntDesignProviders()
            .AddFontAwesomeIcons();

app.ApplicationServices
                  .UseAntDesignProviders()
                  .UseFontAwesomeIcons();

修改一下SideBar的模样

首先呢要搞清楚他们的关系，不然都不知道改哪里。
我现在使用Blazor版本，是从添加css和js引用的地方开始找

在 _Host.cshtml中可以看到body中有一个app标签

typeof(App) 指向的就是 App.razor

App.razor中的内容，有找的到找不到的两种情况，Layout使用的是MainLayout.razor

MainLayout.razor中就是布局的起始点

这里面只有siderbar和main两个div，是由site.css的flex布局让两div并排的

NavMenu标签引用的就是同级目录下的NavMenu.razor

到这个时候差不多也就找到了右边下拉菜单的文件位置了

现在需要通过Nuget下载
Blazorise.Sidebar

修改NavMenu.razor为一下内容

@using Blazorise.Sidebar
<Sidebar Data="@sidebarInfo" />

@code{
    Sidebar sidebar;
    
    SidebarInfo sidebarInfo = new SidebarInfo
    {
        Brand = new SidebarBrandInfo
        {
            Text = "Blazorise Demo"
        },
        Items = new List<SidebarItemInfo>
        {
            new SidebarItemInfo { To = "", Text = "Dashboard" },
            new SidebarItemInfo
            {
                Text = "Email",
                SubItems = new List<SidebarItemInfo>
                {
                    new SidebarItemInfo { To = "email/inbox", Text = "Inbox" },
                    new SidebarItemInfo { To = "email/compose", Text = "Compose Email" },
                }
            },
            new SidebarItemInfo
            {
                Text = "Applications",
                SubItems = new List<SidebarItemInfo>
                {
                    new SidebarItemInfo { To = "apps/todo", Text = "Todo List" }
                }
            },
        }
    };
}

我这里是基于作者的Sidebar文档，自行理解后写（抄）下来的
点击跳转作者的SideBar文档

链接
Blazorise文档地址
Blazorise的Github