前言

上一篇介紹過(guò)了前后臺(tái)分離的 NET Core 通用權(quán)限管理系統(tǒng)?在這篇文章簡(jiǎn)要的介紹了 Bootstrap Admin 后臺(tái)管理框架的一些功能。本篇文章帶來(lái)的是微軟最新出的 Blazor 版本的 NET Core 通用權(quán)限管理系統(tǒng)

Blazor 簡(jiǎn)介

至于 Blazor 是什么，Blazor 的優(yōu)缺點(diǎn)小伙伴們可以自行在園子里搜索一下，相關(guān)介紹還是非常多的，我這里就不介紹 Blazor 是什么，有什么優(yōu)缺點(diǎn)了。我想闡述的是我個(gè)人對(duì) Blazor 技術(shù)的一些理解，Blazor 剛出來(lái)的時(shí)候國(guó)內(nèi)外無(wú)數(shù)文章報(bào)道，但是有一個(gè)顯著的特點(diǎn)，所有的文章，代碼講解等都是圍繞微軟的那個(gè)例子講解的。換句話(huà)說(shuō)，僅限于那個(gè)例子。離開(kāi)那個(gè)例子真的自己做個(gè)功能講解的一篇都沒(méi)有，微軟自己的文檔也非常不健全，很多技術(shù)細(xì)節(jié)都是一筆帶過(guò)。隨著時(shí)間的推移，微軟的文檔也豐富起來(lái)了。根據(jù)微軟的文檔 Blazor 本人用 Blazor 技術(shù)將 Bootstrap Admin 后臺(tái)管理框架重寫(xiě)了一版，通過(guò)自己編寫(xiě)組件系統(tǒng)的學(xué)習(xí)了一下 Blazor。通過(guò)自己的封裝實(shí)現(xiàn)了一個(gè)小小的框架，下面詳細(xì)的講解一下。

網(wǎng)頁(yè)布局設(shè)計(jì)

Bootstrap Admin 通用后臺(tái)管理框架布局采用 AdminLTE 的經(jīng)典布局
如圖所示，區(qū)域被劃分為四個(gè)區(qū)域，分別為：

頭部 Header
負(fù)責(zé)顯示網(wǎng)站 Logo、小掛件、當(dāng)前用戶(hù)信息

側(cè)邊欄 Sidebar
負(fù)責(zé)顯示后臺(tái)管理的菜單、提供導(dǎo)航功能

正文顯示區(qū)域 Section
負(fù)責(zé)顯示各個(gè)功能模塊的主題部分

頁(yè)腳 Footer
負(fù)責(zé)顯示系統(tǒng)信息

顯示區(qū)域設(shè)計(jì)

正文顯示區(qū)域在后臺(tái)管理框架中基本是字典表維護(hù)這種類(lèi)似的單表維護(hù)，需要提供增、刪、改、查基本操作

現(xiàn)在將顯示區(qū)域分割成三個(gè)部分

TabSet 區(qū)域
用于顯示多 Tab

Query 區(qū)域
用于顯示查詢(xún)條件

Table 區(qū)域
用戶(hù)顯示符合過(guò)濾條件的數(shù)據(jù)結(jié)果集合，這里提供分頁(yè)、編輯、刪除等操作

組件設(shè)計(jì)

<EditPage Id="dict" TItem="Bootstrap.Security.BootstrapDict" QueryModel="QueryModel" OnQuery="Query" OnAdd="Add" OnDelete="Delete" OnSave="Save"><QueryBody><LgbInputText @bind-Value="@context.Category" maxlength="50" /><Select Items="QueryDefine" TItem="int" @bind-Value="@context.Define" /><LgbInputText @bind-Value="@context.Name" maxlength="50" /></QueryBody><TableHeader><LgbTableHeader TItem="string" @bind-Value="@context.Category"></LgbTableHeader><LgbTableHeader TItem="string" @bind-Value="@context.Name"></LgbTableHeader><LgbTableHeader TItem="string" @bind-Value="@context.Code"></LgbTableHeader><LgbTableHeader TItem="int" @bind-Value="@context.Define"></LgbTableHeader></TableHeader><RowTemplate><td>@context.Category</td><td>@context.Name</td><td>@context.Code</td><td>@(DefineItems.FirstOrDefault(d => d.Value == context.Define.ToString())?.Text ?? "-")</td></RowTemplate><EditTemplate><div class="row"><LgbInputText @bind-Value="@context.Category" placeholder="不可為空，50字以?xún)?nèi)" maxlength="50"><RequiredValidator /><StringLengthValidator Length="50" /></LgbInputText><Select Items="DefineItems" TItem="int" @bind-Value="@context.Define"></Select><LgbInputText @bind-Value="@context.Name" placeholder="不可為空，50字以?xún)?nèi)" maxlength="50"><RequiredValidator /><StringLengthValidator Length="50" /></LgbInputText><LgbInputText @bind-Value="@context.Code" placeholder="不可為空，2000字以?xún)?nèi)" maxlength="2000"><RequiredValidator /><StringLengthValidator Length="2000" /></LgbInputText></div></EditTemplate> </EditPage>

QueryBody 模板

本組件模板負(fù)責(zé)提供查詢(xún)過(guò)濾條件點(diǎn)擊查詢(xún)按鈕后數(shù)據(jù)顯示區(qū)域呈現(xiàn)符合過(guò)濾條件的數(shù)據(jù)記錄，本控件大量代碼均已封裝成通用，僅需提供過(guò)濾條件即可

<LgbInputText @bind-Value="@context.Category" maxlength="50" /> <Select Items="QueryDefine" TItem="int" @bind-Value="@context.Define" /> <LgbInputText @bind-Value="@context.Name" maxlength="50" />

通過(guò)設(shè)置?@bind-Value?lambda 表達(dá)式自動(dòng)生成一個(gè)?label?與 一個(gè)?input?控件，極大的提高了代碼編寫(xiě)速度

TableHeader 模板

本組件模板負(fù)責(zé)生成數(shù)據(jù)呈現(xiàn) Table 的表頭，通過(guò)?TItem?設(shè)置綁定字段屬性，通過(guò)設(shè)置?@bind-Value?lambda 表達(dá)式自動(dòng)生成漢字表頭

<LgbTableHeader TItem="string" @bind-Value="@context.Category"></LgbTableHeader> <LgbTableHeader TItem="string" @bind-Value="@context.Name"></LgbTableHeader> <LgbTableHeader TItem="string" @bind-Value="@context.Code"></LgbTableHeader> <LgbTableHeader TItem="int" @bind-Value="@context.Define"></LgbTableHeader>

RowTemplate 模板

本組件負(fù)責(zé)呈現(xiàn)符合過(guò)濾條件的數(shù)據(jù)記錄，支持直接使用服務(wù)器端方法進(jìn)行數(shù)據(jù)格式化

<td>@context.Category</td> <td>@context.Name</td> <td>@context.Code</td> <td>@(DefineItems.FirstOrDefault(d => d.Value == context.Define.ToString())?.Text ?? "-")</td>

EditTemplate 模板

本組件負(fù)責(zé)數(shù)據(jù)的編輯功能，通過(guò)設(shè)置?@bind-Value?表達(dá)式實(shí)現(xiàn)雙向綁定，直接調(diào)用服務(wù)器端保存方法即可

<div class="row"><LgbInputText @bind-Value="@context.Category" placeholder="不可為空，50字以?xún)?nèi)" maxlength="50"><RequiredValidator /><StringLengthValidator Length="50" /></LgbInputText><Select Items="DefineItems" TItem="int" @bind-Value="@context.Define"></Select><LgbInputText @bind-Value="@context.Name" placeholder="不可為空，50字以?xún)?nèi)" maxlength="50"><RequiredValidator /><StringLengthValidator Length="50" /></LgbInputText><LgbInputText @bind-Value="@context.Code" placeholder="不可為空，2000字以?xún)?nèi)" maxlength="2000"><RequiredValidator /><StringLengthValidator Length="2000" /></LgbInputText> </div>

通過(guò)簡(jiǎn)單的封裝，實(shí)現(xiàn)了僅需要提供數(shù)據(jù)屬性?@context.Name?即可，組件自動(dòng)會(huì)通過(guò)?[DisplayName]?標(biāo)簽或者通過(guò)系統(tǒng)服務(wù)的字典表中匹配到中文文字，非常的方便

Blazor 多 Tab 版通用權(quán)限控制系統(tǒng)演示網(wǎng)站：ba.sdgxgz.com
碼云開(kāi)源項(xiàng)目地址：Bootstrap Admin

目前僅僅完成了 字典表維護(hù) 頁(yè)面的改版。其余頁(yè)面等等批量更改

原文鏈接：https://www.cnblogs.com/argozhang/p/12022766.html

---

.NET社區(qū)新聞，深度好文，歡迎訪問(wèn)公眾號(hào)文章匯總?http://www.csharpkit.com?

總結(jié)

以上是生活随笔為你收集整理的Blazor 版 Bootstrap Admin 通用后台权限管理框架的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。