前言
很羞愧直到去年底才接触到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 不是 一个集体秀。 是一群十分沉闷和投入的技术人员组成的团队，想要通过一直致力为开发人员带来更好的体验。