ASP .NET MVC - Trabalhando com Views Modais usando o Bootstrap

ASP .NET MVC - Trabalhando com Views Modais usando o Bootstrap - I

Neste artigo vou mostrar como podemos trabalhar com Views Modais em aplicações ASP .NET MVC 5 usando o recurso do Bootstrap Modal.

O Bootstrap dispensa apresentações visto ser um dos mais usados frameworks para front-ends, principalmente em aplicações ASP .NET.

O Plugin modal do Bootstrap é mais um recurso deste framework que podemos usar para adicionar caixas de diálogo às nossas aplicações para exibir notificações ou conteúdo personalizado.

A documentação completa do plugin pode ser consultada neste link : https://getbootstrap.com/docs/4.0/components/modal/

Abaixo, temos um exemplo de uma janela modal estática usando o plugin:

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Este exemplo foi tirado da página da documentação do plugin e mostra uma estrutura básica para criar uma janela modal.

Então vejamos como usar este plugin do bootstrap iniciando com um exemplo bem simples para entender o seu funcionamento.

Criando um modal simples em uma aplicação ASP .NET

Abra o VS 2017 e crie um projeto ASP .NET usando o template ASP .NET Web Application(.NET Framework) chamado BootstrapModal

Nota: Voce pode criar apenas o arquivo HTML.

Crie um projeto usando o template Empty -> Web Forms e clique em OK.

A seguir via menu Project-> Add New Item, inclua um página HTML ao projeto com o nome de Index.html e inclua o código abaixo nesta página:

<div class="container">
        <h2>Exemplo de Modal</h2>
        
        <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Abrir janela Modal</button>


        <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">


                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">×</button>
                        <h4 class="modal-title">Cabeçalho Modal</h4>
                    </div>
                    <div class="modal-body">
                        <p>Macoratti .net - Quase tudo para .NET</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-dismiss="modal">Fechar</button>
                    </div>
                </div>

            </div>
        </div>
    </div>
</body>
</html>

Executando a aplicação você deverá visualizar a página abaixo à esquerda, e ao clicar no botão verás a exibição da janela modal à direita:

Neste exemplo se você clicar em qualquer parte fora da janela modal a janela modal irá fechar.

Vamos entender como funciona...

Primeiro estamos referenciando o bootstrap usando a distribuição CDN : (Podemos referenciar também apenas o plugin individual modal.js)

Para iniciar a janela modal precisamos usar um botão ou link:

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Abrir janela Modal</button>

Note que usamos dois atributos data- :

data-toogle = "modal" -> que abre a janela modal
data-target = "#myModal" -> que define e aponta para o id da janela modal

Vejamos agora a janela Modal :

- A <div> pai do modal deve ter um ID que seja igual ao valor do atributo data-target usado para acionar o modal ("#myModal").
- A classe .modal identifica o conteúdo da <div> como um modal e traz o foco para ele.
- A classe .fade adiciona um efeito de transição que desvanece a entrada e saída modal. (Remova esta classe se você não quiser este efeito.)
- O atributo role = "dialog" melhora a acessibilidade para pessoas que usam leitores de tela.
- A classe .modal-dialog define a largura e a margem apropriadas do modal.

A parte do conteúdo da modal:

- A <div> com class = "modal-content" estiliza o modal (border, background-color, etc.).
- Dentro desta <div>, adicione o cabeçalho, o corpo e o rodapé da janela modal.
- A classe .modal-header é usada para definir o estilo do cabeçalho do modal.
- O <button> dentro do cabeçalho tem um atributo data-dismiss = "modal" que fecha o modal se você clicar nele.
- A classe .close cria o botão Fechar e a classe .modal-title estiliza o cabeçalho com uma altura de linha adequada.
- A classe .modal-body é usada para definir o estilo para o corpo do modal. Adicione qualquer marcação HTML aqui; parágrafos, imagens, vídeos, etc.
- A classe .modal-footer é usada para definir o estilo do rodapé do modal. Observe que essa área está alinhada à direita por padrão.

A seguir temos uma tabela com as principais classes usadas no plugin modal:

Classe	Descrição
.modal	Cria uma janela modal
.modal-content	Estiliza a janela modal com borda, cor de fundo, etc. Use essa classe para adicionar o cabeçalho, o corpo e o rodapé.
.modal-header	define um estilo para o cabeçalho da janela modal
.modal-body	Define um estilo para o corpo da janela modal
.modal-footer	Define um estilo para o rodapé da modal. (Esta área é alinhada à direita por padrão)
.modal-sm	Define uma janela modal pequena
.modal-lg	Define uma janela modal grande
.fade	Adiciona um efeito de animação onde um transição que desvanece a entrada e saída da janela modal

Criando uma janela de login modal

Vamos agora criar outro exemplo simples de janela modal na nossa aplicação ASP .NET.

Inclua uma nova página HTML ao projeto via menu Project->Add New Item com o nome de Login.html e inclua o código abaixo neste arquivo:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Usando Bootstrap Modal</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <h4>Exemplo de Login Modal</h4>
        <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#loginModal">Fazer Login</button>

        <div class="modal fade" tabindex="-1" id="loginModal" data-keyboard="false" data-backdrop="static">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">×</button>
                        <h4 class="modal-title">Login</h4>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="form-group">
                                <label for="inputUsuario">Usuário</label>
                                <input class="form-control" placeholder="Login Usuário" type="text" id="inputUsuario" />
                            </div>
                            <div class="form-group">
                                <label for="inputSenha">Senha</label>
                                <input class="form-control" placeholder="Login Senha" type="password" id="inputSenha" />
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Login</button>
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Fechar</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Executando esta página no projeto iremos obter o seguinte resultado:

1- Na primeira janela temos o botão para fazer o login que vai abrir a janela modal;

2- Ao clicar no botão a janela modal é aberta conforme mostra a figura à direita;

Neste exemplo para fechar a janela você tem que clicar no botão Fechar.

O que podemos destacar de novo aqui ?

Neste exemplo usamos as seguintes classes do plugin Modal:

Classe	Descrição
data-keyboard="false"	Evita que a janela seja fechada pressionando a tecla ESC
data-backdrop="static"	Evita que a janela seja fechada ao clicar fora da janela modal

É claro que você sempre pode melhorar o leiaute de uma página. Para o exemplo anterior vamos alterar o código para:

<!DOCTYPE html>
<html>
<head>
    <title>Usando Bootstrap Modal</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

    <div class="container">
        <h2>Exemplo de Login Modal</h2>
        <button type="button" class="btn btn-default btn-lg" id="myBtn" data-toggle="modal" data-target="#loginModal">Login</button>

<div class="modal fade" id="loginModal" role="dialog">
            <div class="modal-dialog">

<div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">×</button>
                        <h4 style="color:red;"><span class="glyphicon glyphicon-lock"></span> Login</h4>
                    </div>
                    <div class="modal-body">
                        <form role="form">
                            <div class="form-group">
                                <label for="usrname"><span class="glyphicon glyphicon-user"></span> Usuário</label>
                                <input type="text" class="form-control" id="usrname" placeholder="Informe o nome do usuário">
                            </div>
                            <div class="form-group">
                                <label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Senha</label>
                                <input type="text" class="form-control" id="psw" placeholder="Informe a senha">
                            </div>
                            <div class="checkbox">
                                <label><input type="checkbox" value="" checked>Lembrar-me</label>
                            </div>
                            <button type="submit" class="btn btn-default btn-success btn-block">
<span class="glyphicon glyphicon-off"></span> Login</button>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-default btn-default pull-left" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span> Cancelar</button>
                        <p>Não é um membro? <a href="#">Assine</a></p>
                        <p>Esqueceu a <a href="#">Senha?</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Aqui apenas aplicamos alguns recursos do bootstrap para incrementar a aparência da página.

Abaixo temos o resultado obtido:

Na próxima parte do artigo vamos continuar com mais exemplos usando o bootstrap Modal.

Pegue o codigo parcial do projeto: Mvc_BootstrapModal_1.zip

"Porque o reino de Deus não consiste em palavras, mas em poder."
1 Coríntios 4:20

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Veja mais sistemas completos para a plataforma .NET no Super DVD .NET , confira...
Curso Básico VB .NET - Vídeo Aulas

Quer aprender C# ??

Chegou o Super DVD C# com exclusivo material de suporte e vídeo aulas com curso básico sobre C#.
Curso C# Basico - Video Aulas

Quer aprender os conceitos da Programação Orientada a objetos ?

Curso Fundamentos da Programação Orientada a Objetos com VB .NET

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Curso - Gerando Relatórios com o ReportViewer no VS 2013 - Vídeo Aulas

Quer aprender a criar aplicações Web Dinâmicas usando a ASP .NET MVC 5 ?

Curso ASP .NET MVC 5 - Vídeo Aulas

Gostou ? Compartilhe no Facebook Compartilhe no Twitter

Referências:

José Carlos Macoratti