共计 4835 个字符，预计需要花费 13 分钟才能阅读完成。
前言
很羞愧直到去年底才接触到 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" Label=@item.Name 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 不是 一个集体秀。是一群十分沉闷和投入的技术人员组成的团队，想要通过一直致力为开发人员带来更好的体验。
开源地址
MASA.Blazor Github：https://github.com/BlazorComp…
MASA.Blazor Gitee：https://gitee.com/blazorcompo…
