Componente de ModalDialogComponent com Bootstrap no Blazor

Imagem de capa Componente de ModalDialogComponent com Bootstrap no Blazor

Componente de modal dialog com Bootstrap no Blazor

Esta breve postagem no blog mostrará como utilizar o Bootstrap para criar um ModalDialogComponent pequeno e reutilizável.

Talvez para começar: O que é uma caixa de diálogo modal?Encontrado aqui

"Uma caixa de diálogo modal é uma caixa de diálogo que aparece no topo do conteúdo principal e move o sistema para um modo especial que requer interação do usuário. Esta caixa de diálogo desativa o conteúdo principal até que o usuário interaja explicitamente com a caixa de diálogo modal."

Isso significa que quando abrimos a caixa de diálogo, apenas os elementos dessa caixa de diálogo devem ser interativos. A boa notícia é que não precisamos cuidar tanto disso, pois o Bootstrap traz todos os utilitários para lidar com esse problema.

Construir o componente

Vamos criar um novo componente em Compartilhado chamado ModalDialog. Queremos receber dois parâmetros: um título de cabeçalho e queremos adicionar conteúdo dinâmico ao nosso diálogo modal. Também precisamos de uma maneira de abrir e fechar a caixa de diálogo:

@code {
    [Parameter] 
    public  string Title { get; set; } 

    [Parameter] 
    public RenderFragment ChildContent { get; set; }

    public void Open() 
    {
    } 
    
    public void Close() 
    { 
    } 
}

O que significa abrir e fechar em nosso contexto de diálogo modal? É bem simples: quando abrimos a caixa de diálogo, basicamente tornamos a caixa de diálogo visível e a fechamos, bem, apenas a removemos da tela. Mas a caixa de diálogo em si estará sempre disponível, apenas alternaremos entre seu estado de visibilidade e fazemos isso através do atributo normal de exibição css. Eu também disse que o Bootstrap cuida da maioria dos problemas e também o Bootstrap faz isso via classes css. Portanto, toda vez que abrimos ou fechamos a caixa de diálogo, adicionamos as classes específicas do Bootstrap ou as removemos. E há exatamente duas classes que precisamos

O RenderFragment ChildContent permite que o componente "hospede" outros componentes HTML ou Blazor sem saber explicitamente quais são esses componentes. Se você quiser saber mais, confira a documentação do ASP.NET Core.

O que também precisamos é a capacidade de desativar cliques no "voltar". Então, tudo o que não está em nossa caixa de diálogo modal. Não se preocupe, o Bootstrap também nos cobriu aqui. Eles têm uma classe css chamada modal-backdrop exatamente para isso. Então, com essas informações, podemos construir nosso código por trás:

@code { 
    [Parameter] 
   public  string Title { get; set; } 

    [Parameter] 
   public RenderFragment ChildContent { get; set; } 

   private  string modalDisplay = "none;"; 
   private  string modalClass = string.Empty; 
   private  bool showBackdrop = false; 

   public void Open()
     { 
           modalDisplay = "block"; 
           modalClass = "show"; 
           showBackdrop = true; 
     } 

   public void Close() 
    { 
           modalDisplay = "none"; 
           modalClass = string.Empty; 
           showBackdrop = false; 
     } 
}

E agora só precisamos da última parte: O código html:

<div  class="modal @modalClass"  tabindex="-1"  role="dialog"  style="display:@modalDisplay; overflow-y: auto;">
    <div  class="modal-dialog modal-lg"  role="document">
        <div class="modal-content">
            <div  class="modal-header">
                <h5 class="modal-title">@Title</h5>
                <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close" @onclick="Close">
                </button>
            </div> 
            <div class="modal-body">
                @ChildContent
           </div> 
        </div>
     </div>
   </div>

@if (showBackdrop)
   {
     <div class="modal-backdrop fade show"></div>
   }

A caixa de diálogo modal e como ela é construída é retirada exclusivamente do exemplo do Bootstrap.

??Sim. Nosso componente está pronto!

Uso

Como temos nosso componente, precisamos usá-lo apenas uma vez. E isso é bastante fácil:

<button class="btn btn-primary">Open Dialog</button>
<ModalDialog  Title="Hello World">
   <p>Here some content</p>
</ModalDialog>

Agora o único problema é: como abrimos a caixa de diálogo? Porque o exemplo mostrado não fará basicamente nada. Portanto, precisamos de uma referência ao nosso diálogo para invocar o método Open dessa instância. E com certeza o Blazor nos oferece a possibilidade de obter uma referência a um elemento através do atributo @ref.

Aqui o exemplo completo:

@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

<button class="btn btn-primary" @onclick="() => ModalDialog.Open()">Click me!</button>

<ModalDialog @ref="@ModalDialog" Title="Hello World">
    <div class="row"> 
         <h3>Lorem Ipsum</h3>
         <hr>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel ultricies sapien. Duis nec nunc erat. Vivamus eget sem tristique, lacinia mi id, cursus eros.</p>
         <button class="btn btn-primary" @onclick="() => ModalDialog.Close()">Close</button>
    </div>
</ModalDialog>

@code {
    private ModalDialog ModalDialog { get; set; }
}

Resultado

Aqui o resultado final:

Recursos:

  • Este exemplo pode ser encontrado _aqui_
  • Todos os meus exemplos podem ser encontrados _aqui_