Criar uma biblioteca de classes do Razor

Concluído

Neste exercício, você cria uma caixa de diálogo modal em uma biblioteca de classes do Razor que pode ser reutilizada no aplicativo de modelo Blazor padrão.

Criar o projeto de biblioteca de classes Razor

Este módulo usa o SDK do .NET 8.0. Certifique-se de ter o .NET 8.0 instalado executando o seguinte comando no seu terminal de comando preferido:

dotnet --list-sdks

Um exemplo semelhante ao seguinte é exibido:

6.0.317 [C:\Program Files\dotnet\sdk]
7.0.401 [C:\Program Files\dotnet\sdk]
8.0.100 [C:\Program Files\dotnet\sdk]

Certifique-se de que uma versão que começa com 8 está listada. Se nenhum estiver listado ou o comando não for encontrado, instale o SDK do .NET 8.0 mais recente.

Para começar, crie o projeto de biblioteca de classes Razor para um componente de diálogo modal. Você pode usar o Visual Studio para criar um novo projeto ou pode criar o projeto em uma nova pasta com a ferramenta de linha de comando .NET, conforme mostrado aqui:

dotnet new razorclasslib -o FirstClassLibrary -f net8.0

Criar o componente de diálogo modal

Em seguida, construa o componente modal em seu projeto com um arquivo CSS apropriado para acompanhá-lo e forneça um formato inicial.

1. Renomeie o arquivo Component1.razor para Modal.razor e o Component1.razor.css arquivo para Modal.razor.css. O arquivo Modal.razor contém o componente que você criará e, no futuro, poderá adicionar arquivos de texto em branco ao seu projeto e formatá-los com conteúdo para Razor ou CSS adequadamente.

2. Adicione o seguinte conteúdo do Razor ao arquivo Modal.razor :

   @if (Show) {
   
    <div class="dialog-container">
     <div class="dialog">
      <div class="dialog-title">
       <h2>@Title</h2>
      </div>
   
      <div class="dialog-body">
       @ChildContent
      </div>
   
      <div class="dialog-buttons">
       <button class="btn btn-secondary mr-auto" @onclick="OnCancel">@CancelText</button>
       <button class="btn btn-success ml-auto" @onclick="OnConfirm">@ConfirmText</button>
      </div>
   
     </div>
    </div>
   
   }
   
   @code {
   
    [Parameter]
    public string Title { get; set; }
   
    [Parameter]
    public string CancelText { get; set; } = "Cancel";
   
    [Parameter]
    public string ConfirmText { get; set; } = "Ok";
   
    [Parameter]
    public RenderFragment ChildContent { get; set; }
   
    [Parameter]
    public bool Show { get; set; }
   
   
    [Parameter] public EventCallback OnCancel { get; set; }
    [Parameter] public EventCallback OnConfirm { get; set; }
   
   }
   

   Este componente tem vários recursos interessantes que você pode compartilhar entre seus projetos:

   • Um título.
   • Botões Cancelar e Confirmar , com etiquetas que pode configurar e clicar em eventos que pode gerir.
   • Você pode definir o conteúdo interno do componente através do ChildContent parâmetro.
   • Você pode controlar o estado de exibição da caixa de diálogo com o Show parâmetro.

3. Para fornecer a formatação padrão para o componente, adicione o seguinte CSS ao arquivo Modal.razor.css :

   .dialog-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2000;
    display: flex;
    animation: dialog-container-entry 0.2s;
   }
   
   @keyframes dialog-container-entry {
    0% {
      opacity: 0;
    }
   
    100% {
      opacity: 1;
    }
   }
   
   .dialog {
    background-color: white;
    box-shadow: 0 0 12px rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
    z-index: 2000;
    align-self: center;
    margin: auto;
    width: 700px;
    max-height: calc(100% - 3rem);
    animation: dialog-entry 0.4s;
    animation-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
   }
   
   @keyframes dialog-entry {
    0% {
      transform: translateY(30px) scale(0.95);
    }
   
    100% {
      transform: translateX(0px) scale(1.0);
    }
   }
   
   .dialog-title {
    background-color: #444;
    color: #fff2cc;
    padding: 1.3rem 0.5rem;
   }
   
    .dialog-title h2 {
      color: white;
      font-size: 1.4rem;
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      line-height: 1.3rem;
    }
   
   .dialog-body {
    flex-grow: 1;
    padding: 0.5rem 3rem 1rem 0.5rem;
   }
   
   .dialog-buttons {
    height: 4rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    background-color: #eee;
    padding: 0 1rem;
   }
   

Essa marcação dá alguma coloração padrão a uma barra de título e barra de botões na parte inferior, tornando-a mais interessante do que um simples conjunto de elementos HTML de cor cinza.

Referenciar e usar o componente modal

Com o componente modal agora residindo no projeto FirstClassLibrary , adicione um novo aplicativo de servidor Blazor e comece a usar o componente modal.

1. Crie um novo projeto de servidor Blazor chamado MyBlazorApp em uma pasta ao lado do projeto FirstClassLibrary usando o recurso Adicionar Novo Projeto do Visual Studio ou executando o seguinte comando:

   dotnet new blazor -o MyBlazorApp -f net8.0
   

2. Adicione uma referência ao projeto FirstClassLibrary no projeto MyBlazorApp , usando o recurso Adicionar Referência do Visual Studio ou executando o seguinte comando da pasta MyBlazorApp :

   dotnet add reference ../FirstClassLibrary
   

Com essa referência de projeto em vigor, o aplicativo MyBlazorApp pode interagir com os componentes no projeto FirstClassLibrary.

1. Facilite a referência ao componente modal adicionando uma entrada ao final do arquivo _Imports.razor na pasta Components do aplicativo MyBlazorApp . Ao fazer isso, você pode fazer referência ao componente modal sem precisar especificar o namespace inteiro para o componente.

   @using FirstClassLibrary
   

2. Adicione um componente modal à página de abertura desta aplicação, o ficheiro Components/Pages/Home.razor

   <Modal Title="My first Modal dialog" Show="true">
    <p>
      This is my first modal dialog
    </p>
   </Modal>
   

   a. Dê ao componente um título, "Minha primeira caixa de diálogo modal".
   b. Adicione um pequeno parágrafo a ser exibido dentro da caixa de diálogo. Este conteúdo descreve a finalidade da caixa de diálogo.
   c. Defina a caixa de diálogo para ficar visível usando o Show parâmetro.

Verifique o seu trabalho

Inicie a aplicação MyBlazorApp com dotnet run e aceda a ela no navegador. A caixa de diálogo O Meu Primeiro Modal deve ser exibida à frente do restante do conteúdo no ecrã.