體驗了一把最近很火的開源專案-MASA Blazor
前言
很慚愧直到去年底才接觸到Blazor。那什麼是Blazor呢？相信大家都看過官方文件的詳細說明，另外MASA團隊也有不錯的說明介紹 。用官方的話說Blazor是一個互動式客戶端Web UI的框架，並且使用C#開發而不是JavaScript。好了言歸正傳，事情的起因是這樣的，公司組織內部競賽需要用Blazor做一個簡單的網頁。為了可以更好的做出效果就簡單的嘗試了幾個開源元件。
開源元件選擇
遇事不決先找官方Blazor 教程，跟著微軟的教程會得到下面這個樣子的頁面。
嗯，還是挺清新的...估計會被領導噴死吧。既然官方提供的樣式太清新。那就要想一下怎麼彎道超車了。
於是乎開始網上衝浪，首先想到的是Bootstrap Blazor
無驚無喜吧，元件庫看起來還是蠻豐富的。接著在比較下Ant Design Blazor。
顏值黨感覺拉不開差距，接著就看到了前幾天釋出的MASA Blazor。跟上面兩個大名鼎鼎相比這個名氣相對小了一些。不過人不可貌相海水不可瓢崴，這個官網首頁高大上了不少啊。希望元件庫別翻車。
雖然說元件庫是列表展示沒有平鋪那麼直觀吧，但是這幾個示例做的也好看太多了。 既然好看就趕緊趁熱再多瞭解一下，開啟原始碼他們也是有快速建立專案模板的。這裡我就直接把官方的使用介紹拿來用了。
按照模板生成出來的是這個樣子的，我個人是非常喜歡這種設計風格的，感覺可以省不少事。
使用MASA Blazor做個後臺管理頁面
1.輸入框
<MTextField @bind-Value="_options.Title" Label="標題"></MTextField>
這樣就完成了一個輸入框並且綁定了_options.Title這個物件。查看了官網文件並且進入了官方的交流區，發現了還有更實用的技巧。使用onEnter及onSearch就可以實現回車觸發檢索條件了，相當於JS的onkeydown事件。
<PPageHeader Title="搜尋" ShowFiltersByDefault OnSearch="() => FetchList()"> <Filters Context="filter"> <MRow Dense> <MCol Cols="12" Sm="6" Md="4"> <MTextFieldLabel="標題" @bind-Value="_options.Title" Dense HideDetails="auto" Outlined Clearable OnKeyDown="filter.onEnter" OnClearClick="filter.onSearch"> </MTextField> </MCol> </MRow> </Filters> </PPageHeader>
2.下拉框
<MSelect Label="狀態"
Dense
HideDetails="auto"
Outlined
Clearable
MenuProps="(props) => props.OffsetY = true"
Items="Enum<StateTypes>.GetEnumObjectList<StateTypes>()"
ItemText="item => item.Name"
ItemValue="item => item.Value"
@bind-Value="_options.State"
TItem="EnumObject<StateTypes>"
TValue="StateTypes?"
TItemValue="StateTypes"
OnSelectedItemUpdate="filter.onSearch"
OnClearClick="filter.onSearch">
</MSelect>
這樣就可以實現把列舉StateTypes直接轉成下拉選單展示了。
3.日期選擇器
<PDateTimePicker Label="釋出開始時間"
Clearable
Dense
DefaultSelectedValue="DateTime.UtcNow"
HideDetails="auto"
Outlined
Format="yyyy-MM-dd HH:mm:ss"
@bind-Value="_options.ReleaseStartTime"
OnOk="filter.onSearch"
OnClearClick="filter.onSearch">
</PDateTimePicker>
4.資料表格
資料表格這裡使用的時候遇到了一個小問題。就是分頁的數量。從官網的示例中可以看到這裡是支援全部獲取的，但真實的場景這種情況肯定是要規避的。看了官方部落格使用MASA.Blazor寫一個標準的查詢表格頁 - MASA Blogs也沒有找到好的答案。
還好開發者很積極的告訴了我為什麼要這樣設計並且展示，也告訴了我自定義的方法。只需要對FooterProps賦值並設定ItemsPerPageOptions屬性就可以了。因為後臺有很多列表頁面，每一個都設定一次就太麻煩了所以重寫了一下MDataTable設定了預設值為每頁取5，10，15條資料分別。下面是元件的使用及相關引數配置。
public partial class DefaultDataTable<TItem> : MDataTable<TItem>
{
public override async Task SetParametersAsync(ParameterView parameters)
{
FooterProps = new Dictionary<string, object>()
{
{
"ItemsPerPageOptions", new List<OneOf<int, DataItemsPerPageOption>>() { 5, 10, 15 }
}
};
await base.SetParametersAsync(parameters);
}
}
下面是Headers屬性的設定，這裡我加了一個actions用於對資料做也寫額外的操作。比如編輯，刪除這些。
private readonly List<DataTableHeader<BlogInfoListViewModel>> _headers = new()
{
new DataTableHeader<BlogInfoListViewModel>()
{
Text = "標題", Value = nameof(BlogInfoListViewModel.Title), Sortable = false
},
//這裡還有很多欄位......
new DataTableHeader<BlogInfoListViewModel>()
{
Text = "操作", Value = "actions", Sortable = false
}
};
下面是元件的使用及效果。
<DefaultDataTable Headers="_headers"
Items="_tableData"
Loading="_loading"
OnOptionsUpdate="HandleOnOptionsUpdate"
Page="_options.PageIndex"
ItemsPerPage="_options.PageSize"
ServerItemsLength="_totalCount"
TItem="BlogInfoListViewModel">
<ItemColContent>
@if (context.Header.Value == "actions")
{
<Actions>
<Action Color="primary"
Icon="mdi-eye-outline"
Label="檢視"
OnClick="() => HrefDetailPage(context.Item.Id)">
</Action>
</Actions>
}
else
{
@context.Value
}
</ItemColContent>
</DefaultDataTable>
分頁改掉了，並且一個後臺的管理頁面也差不多出來了。雖然沒有官方模板做的那麼優雅，但是看起來整體還是挺舒服的。
5.表單對話方塊
這裡使用彈窗做了個稽核下架的功能。使用了預置元件裡面的FormModal。很簡單的可以寫一個對話方塊。
<FormModal Visible="_withdrawModalVisible"
Title="@($"下架文章（{CurrentModel?.Title}）")"
Width="800"
OnCancel="() => _withdrawModalVisible = false"
OnOk=@HandleOnOk>
<MRow>
//這裡就可以畫具體的內容了
</MRow>
</FormModal>
6.單選按鈕
單選按鈕是用在表單對話方塊里根據列舉做單選。放在FormModal的插槽裡使用的。
<MRadioGroup @bind-Value="Data.ReasonType" TValue=ReasonTypes>
<LabelContent>
下架原因
</LabelContent>
<ChildContent>
@foreach (var item in Enum<ReasonTypes>.GetEnumObjectList<ReasonTypes>())
{
<MRadio Value="@item.Value" [email protected] TValue="ReasonTypes"></MRadio>
}
</ChildContent>
</MRadioGroup>
7.多行文字框
該元件我依然是在FormModal使用的，很簡單直接貼程式碼。
<MTextarea Label="原因詳情"
Clearable
Dense
HideDetails="auto"
Outlined
@bind-Value="Data.ReasonDetail">
</MTextarea>
完整的對話方塊展示
個人感觸
首先很感謝開發者可以提供一個好用美觀且免費的元件庫。感謝對開源做出的貢獻，讓我做頁面的時候多了一個選擇。當然也是全程跟著官方的文章一步步來的，傳送門MASA Blazor入門這一篇就夠了 - MASA Blogs。分享的初衷可能相比於官方更想說明，怎樣可以簡單優雅的做出來一個實際的頁面。當然也參考了很多的文章，諮詢了開發者。這裡很喜歡官網上的一句話希望與大家共勉。“MASA Blazor 不是 一個個人秀。 是一群非常活躍和投入的技術人員組成的團隊，想要通過不斷努力為開發人員帶來更好的體驗。