體驗Blazor使用UI組件偷懶

屁話

我不喜歡重複又重複抄那些項目簡介，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