foreword
It's a shame that I didn't get to know it until the end of last year . So what is it? I believe that everyone has read the detailed description of the official document , and the MASA team also has a good description . In official words is a framework for interactive client-side web UI, and use development instead . Well, let’s get down to business, the reason is this, the company needs to use a simple web page to organize an internal competition. In order to achieve better results, I simply tried several open source components.BlazorBlazorBlazorC#JavaScriptBlazor
Open source component selection
If you are indecisive, look for the official Blazor tutorial first . Follow Microsoft's tutorial and you will get a page like the following.
Well, it's still quite refreshing... I guess it will be sprayed to death by the leader. Since the official style is too fresh. Then think about how to overtake a corner.
So I started surfing the Internet. The first thing that came to my mind was the component library. There is no special reason. Maybe it was just because I used to use it to write background pages. The documentation site to open it looks like thisBootstrap Blazor
No surprises, no surprises, the component library seems to be quite rich. Then compare .Ant Design Blazor
The Yan Zhi party felt that the gap could not be opened, and then saw the release a few days ago . Compared with the above two famous names, this reputation is relatively small. But people can't look like the sea can't be swept away. The homepage of this official website has grown a lot taller. I hope the component library doesn't roll over.MASA Blazor
Although the component library is not as intuitive as a list display, these examples are too good-looking. Since it looks good, hurry up and learn more about it while it's hot. Open the source code and they also have a quick project template. Here I will directly use the official introduction to use.
This is what is generated according to the template. I personally like this design style very much, and I feel that it can save a lot of trouble.
Use MASA Blazor to be a background management page
1. Input box
<MTextField @bind-Value="_options.Title" Label="标题"></MTextField>
This completes an input box and binds the object. Checked the official website documentation and entered the official communication area, and found that there are more practical skills. Using and can realize the carriage return to trigger the retrieval condition, which is equivalent to the JS event._options.TitleonEnteronSearchonkeydown
<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. Drop-down box
<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>
In this way, the enumeration can be directly converted into a drop-down menu display.StateTypes
3. Date Picker
<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. Data table
I encountered a small problem when using the data table here. is the number of pages. From the example on the official website, you can see that all acquisitions are supported here, but this situation must be avoided in real scenarios. Looked at the official blog using MASA.Blazor to write a standard query form page - MASA Blogs also did not find a good answer.
Fortunately, the developer actively told me why it was designed and displayed like this, and also told me how to customize it. Just assign values and set properties. Because there are many list pages in the background, it is too troublesome to set each one once, so I rewrite it and set the default value to take 5, 10, and 15 pieces of data for each page respectively. The following is the use of components and related parameter configuration.FooterPropsItemsPerPageOptionsMDataTable
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); } }
The following is the setting of the property, here I added one for doing and writing additional operations on the data. Like edit, delete these.Headersactions
private readonly List<DataTableHeader<BlogInfoListViewModel>> _headers = new() { new DataTableHeader<BlogInfoListViewModel>() { Text = "Title", Value = nameof(BlogInfoListViewModel.Title), Sortable = false }, //There are many more fields here ...... new DataTableHeader<BlogInfoListViewModel>() { Text = "actions", Value = "actions", Sortable = false } };
The following is the use and effect of components.
<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>
The pagination has been changed, and a background management page is almost out. Although it is not as elegant as the official template, it still looks quite comfortable overall.
5. Form dialog
Here, a pop-up window is used to perform a review and removal function. used inside . It's very simple to write a dialog.预置组件FormModal
<FormModal Visible="_withdrawModalVisible" Title="@($"Withdrawal article ({CurrentModel?.Title})")" Width="800" OnCancel="() => _withdrawModalVisible = false" OnOk=@HandleOnOk> < MRow> //You can draw specific content here </MRow> </FormModal>
6. Radio buttons
Radio buttons are used in form dialogs to make radio selections based on enumerations. used in the slot.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. Multi-line text box
I am still using this component, and it is very simple to paste the code directly.FormModal
<MTextarea Label="原因详情" Clearable Dense HideDetails="auto" Outlined @bind-Value="Data.ReasonDetail"> </MTextarea>
Complete dialog display
personal feelings
First of all, I would like to thank the developers for providing an easy-to-use, beautiful and free component library. Thanks for the contribution to open source, it gives me one more choice when making pages. Of course, the whole process followed the official article step by step, the portal MASA Blazor entry is enough - MASA Blogs . The original intention of sharing may be more to explain how to make an actual page simply and elegantly than the official one. Of course, I also referred to many articles and consulted the developers. I really like a sentence on the official website here and hope to share with you. "MASA Blazor is not a one-man show. It's a team of very active and engaged technologists who want to continuously strive to bring a better experience to developers.
open source address
MASA.Blazor Github ：https://github.com/BlazorComponent/MASA.Blazor
MASA.Blazor Gitee ：https://gitee.com/blazorcomponent/MASA.Blazor