Experimentou um projeto de código aberto recentemente popular - MASA Blazor

prefácio

        É uma pena que eu não tenha conhecido até o final do ano passado . Então o que é isso? Acredito que todos leram a descrição detalhada do documento oficial , e a equipe do MASA também tem uma boa descrição . Em palavras oficiais, é uma estrutura para interface do usuário da Web interativa do lado do cliente e, em vez disso, use o desenvolvimento . Bem, vamos ao que interessa, a razão é esta, a empresa precisa usar uma página web simples para organizar uma competição interna. Para obter melhores resultados, simplesmente tentei vários componentes de código aberto.BlazorBlazorBlazorC#JavaScriptBlazor

Seleção de componentes de código aberto

         Se você está indeciso, procure primeiro o tutorial oficial do Blazor . Siga o tutorial da Microsoft e você terá uma página como a seguinte.

Bem, ainda é bastante refrescante... Acho que será pulverizado até a morte pelo líder. Já que o estilo oficial é muito fresco. Então pense em como ultrapassar uma curva.

        Então comecei a navegar na Internet. A primeira coisa que me veio à mente foi a biblioteca de componentes. Não há nenhuma razão especial. Talvez fosse apenas porque eu costumava usá-la para escrever páginas de fundo. O site de documentação para abri-lo se parece com issoBootstrap Blazor

Sem surpresas, sem surpresas, a biblioteca de componentes parece ser bastante rica. Então compare .Ant Design Blazor

O partido Yan Zhi sentiu que a lacuna não poderia ser aberta e, em seguida, viu o lançamento há alguns dias . Comparado com os dois nomes famosos acima, essa reputação é relativamente pequena. Mas as pessoas não podem parecer que o mar não pode ser varrido.A página inicial deste site oficial ficou muito mais alta. Espero que a biblioteca de componentes não role.MASA Blazor

Embora a biblioteca de componentes não seja tão intuitiva quanto uma exibição de lista, esses exemplos são muito bonitos. Já que parece bom, apresse-se e aprenda mais sobre isso enquanto está quente. Abra o código-fonte e eles também têm um modelo de projeto rápido. Aqui vou usar diretamente a introdução oficial para usar.

Isso é o que é gerado de acordo com o modelo. Pessoalmente, gosto muito desse estilo de design e sinto que pode evitar muitos problemas.

Use o MASA Blazor para ser uma página de gerenciamento de plano de fundo

1. Caixa de entrada

<MTextField @bind-Value="_options.Title" Label="标题"></MTextField>

Isso completa uma caixa de entrada e vincula o objeto. Checou a documentação oficial do site e entrou na área de comunicação oficial, e descobriu que existem mais habilidades práticas. Usando and pode realizar o retorno de carro para acionar a condição de recuperação, que é equivalente ao evento JS._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" 
                    Delineado 
                    Clearable 
                    OnKeyDown="filter.onEnter" 
                    OnClearClick="filter.onSearch"> 
                </MTextField> 
            </MCol> 
        </MRow> 
    </Filters> 
</PPageHeader>

2. Caixa suspensa

<MSelec Label="状态" 
         Dense 
         HideDetails="auto" 
         Outlineed 
         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"> 
</MSelec>

Dessa forma, a enumeração pode ser convertida diretamente em uma exibição de menu suspenso.StateTypes

3. Selecionador de datas

<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. Tabela de dados

        Encontrei um pequeno problema ao usar a tabela de dados aqui. é o número de páginas. A partir do exemplo no site oficial, você pode ver que todas as aquisições são suportadas aqui, mas essa situação deve ser evitada em cenários reais. Procurei no blog oficial usando o MASA.Blazor para escrever uma página de formulário de consulta padrão - o MASA Blogs também não encontrou uma boa resposta.

        Felizmente, o desenvolvedor me disse ativamente por que ele foi projetado e exibido assim, e também me disse como personalizá-lo. Basta atribuir valores e definir propriedades. Como há muitas páginas de lista em segundo plano, é muito problemático definir cada uma uma vez, então eu a reescrevo e defino o valor padrão para obter 5, 10 e 15 partes de dados para cada página, respectivamente. A seguir está o uso de componentes e configuração de parâmetros relacionados.FooterPropsItemsPerPageOptionsMDataTable

public parcial 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); 
    } 
}

O seguinte é a configuração da propriedade, aqui eu adicionei uma para fazer e escrever operações adicionais nos dados. Como editar, exclua estes.Headersactions

private readonly List<DataTableHeader<BlogInfoListViewModel>> _headers = new() 
{ 
    new DataTableHeader<BlogInfoListViewModel>() 
    { 
        Text = "Title", Value = nameof(BlogInfoListViewModel.Title), Sortable = false 
    }, 
    //Existem muitos outros campos aqui ...... 
    new DataTableHeader<BlogInfoListViewModel>() 
    { 
        Text = "actions", Value = "actions", Sortable = false 
    } 
};

O seguinte é o uso e efeito dos componentes.

<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>

        A paginação foi alterada e uma página de gerenciamento de plano de fundo está quase pronta. Embora não seja tão elegante quanto o modelo oficial, ainda parece bastante confortável no geral.

5. Caixa de diálogo do formulário

        Aqui, uma janela pop-up é usada para executar uma função de revisão e remoção. usado dentro . É muito simples escrever um diálogo.预置组件FormModal

<FormModal Visible="_withdrawModalVisible" 
           Title="@($"Artigo de retirada ({CurrentModel?.Title})")" 
           Width="800" 
           OnCancel="() => _withdrawModalVisible = false" 
           OnOk=@HandleOnOk> 
    < MRow > 
        //Você pode desenhar conteúdo específico aqui 
    </MRow> 
</FormModal>

6. Botões de rádio

        Os botões de opção são usados ​​em caixas de diálogo de formulário para fazer seleções de rádio com base em enumerações. usado na ranhura.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. Caixa de texto de várias linhas

        Ainda estou usando este componente, e é muito simples colar o código diretamente.FormModal

<MTextarea Label="原因详情" 
           Clearable 
           Dense 
           HideDetails="auto" 
           Outlined 
           @bind-Value="Data.ReasonDetail"> 
</MTextarea>

Exibição de diálogo completa

sentimento pessoal

        Em primeiro lugar, gostaria de agradecer aos desenvolvedores por fornecerem uma biblioteca de componentes fácil de usar, bonita e gratuita. Obrigado pela contribuição para o código aberto, me dá mais uma escolha ao fazer páginas. Claro que todo o processo seguiu o passo a passo do artigo oficial, basta a entrada do portal MASA Blazor - MASA Blogs . A intenção original do compartilhamento pode ser mais para explicar como fazer uma página real de forma simples e elegante do que a oficial. Claro, também me referi a muitos artigos e consultei os desenvolvedores. Gosto muito de uma frase no site oficial aqui e espero compartilhar com vocês. "MASA Blazor não é um show de um homem só. É uma equipe de tecnólogos muito ativos e engajados que querem se esforçar continuamente para trazer uma experiência melhor para os desenvolvedores.

endereço de código aberto

MASA.Blazor Github: https://github.com/BlazorComponent/MASA.Blazor

MASA.Blazor Gitee: https://gitee.com/blazorcomponent/MASA.Blazor

{{o.name}}

{{m.name}}