关于c#:体验了一把最近很火的开源项目MASA-Blazor

52次阅读

共计 4652 个字符，预计需要花费 12 分钟才能阅读完成。

前言

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

正文完
c#
发表至： c#
2022-03-30
 0
关于c#:C-官方文档导读及推荐书单
什么时候使用volatile关键字
关于c++:C内存管理4内存分配的重载
关于c:ECE-650-Malloc