Criar uma biblioteca de classes do Razor

Concluído

Neste exercício, você criará uma caixa de diálogo modal em uma biblioteca de classes Razor que poderá ser reutilizada no aplicativo de modelo de mais de um padrão.

Criar o projeto de biblioteca de classes do Razor

Este módulo usa o SDK do .NET 6.0. Verifique se tem o .NET 6.0 instalado, executando o seguinte comando em seu terminal preferido:

dotnet --list-sdks

Saída semelhante à seguinte exibida:

3.1.100 [C:\program files\dotnet\sdk]
5.0.100 [C:\program files\dotnet\sdk]
6.0.100 [C:\program files\dotnet\sdk]

Verifique se uma versão que começa com 6 está listada. Se nenhum estiver listado ou o comando não for encontrado, instale o SDK do .NET 6.0 mais recente.

Para começar, vamos criar o projeto de biblioteca de classes do Razor para um componente de caixa de diálogo modal. Você pode usar o Visual Studio para criar um novo projeto, ou 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

Compilar o componente de caixa de diálogo modal

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

1. Renomeie o arquivo Component1. Razor como modal. Razor e o arquivo Component1.razor.css como 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. Adicionar 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 usar em vários de seus projetos:

   • Um título.
   • Os botões Cancelar e Confirmar, com rótulos que você pode configurar e clicar em eventos gerenciáveis.
   • Você pode definir o conteúdo interno do componente por meio do parâmetro ChildContent.
   • Você pode controlar o estado de exibição da caixa de diálogo com o parâmetro Show.

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 fornece algumas cores padrão para uma barra de título e barra de botões na parte inferior, tornando-as mais interessantes do que um conjunto simples de elementos HTML cinza.

Referência e uso do 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 projeto de servidor no 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. No projeto MyBlazorApp, adicione uma referência ao projeto FirstClassLibrary usando o recurso Adicionar Referência do Visual Studio ou executando o seguinte comando na 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 arquivo0_Imports.razor na pasta Components do aplicativo MyBlazorApp. Ao fazer isso, você pode fazer referência ao componente modal sem precisar especificar todo o namespace do componente.

   @using FirstClassLibrary
   

2. Adicione um componente modal à página de abertura deste aplicativo, no arquivo 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. Escreva 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 como visível usando o parâmetro Show.

Verifique seu trabalho

Inicie o aplicativo MyBlazorApp com dotnet run e navegue até ele em seu navegador. A caixa de diálogo Minha primeira caixa de diálogo modal deve ser exibida na frente do restante do conteúdo na tela.