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

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

Continuando o artigo anterior agora veremos como usar os recursos do plugin modal em uma aplicação ASP .NET MVC 5.

Para isso vamos partir de  uma aplicação ASP .NET MVC 5 bem simples que faz o CRUD em uma tabela de Clientes usando o Entity Framework 6.0.

Se você ainda não sabe como criar aplicações usando a ASP .NET MVC 5 veja nas referências links para artigos que mostram como fazer isso em detalhes.

Executando a aplicação ASP .NET MVC 5 iremos obter o seguinte resultado:

Vemos acima a view Index exibindo a lista de clientes e os links para editar, exibir detalhes e deletar um cliente.

O que vamos fazer é alterar a view Index, substituir os links por botões com ícones e no evento Click de cada botão vamos carregar as views para editar, exibir detalhes e deletar cliente usando o bootstrap modal. Para isso vamos incluir na seção de scripts da página o código javascript que vai carregar cada página modal.

1- Alterando a view Index - Definindo a div para a modal e o código JavaScript

O código inicial da View Index deverá ficar assim:

@model IEnumerable<Mvc5_Modal.Models.Cliente>

@{
    ViewBag.Title = "Index";
}
<h2>Clientes</h2>
<p>
   <button class="btn btn-success create">Criar Novo Cliente <i class="glyphicon glyphicon-open"></i></button>
</p>
<table class="table">
    <tr>
        <th>@Html.DisplayNameFor(model => model.Nome)</th>
        <th>@Html.DisplayNameFor(model => model.Email)</th>
        <th>@Html.DisplayNameFor(model => model.Idade)</th>
        <th>@Html.DisplayNameFor(model => model.Pais)</th>
        <th></th>
    </tr>
    @foreach (var item in Model)
    {
        <tr>
            <td>@Html.DisplayFor(modelItem => item.Nome)</td>
            <td>@Html.DisplayFor(modelItem => item.Email)</td>
            <td>@Html.DisplayFor(modelItem => item.Idade)</td>
            <td>@Html.DisplayFor(modelItem => item.Pais)</td>
            <td>
             <button class="btn btn-success details" data-id="@item.ClienteId"><i class="glyphicon glyphicon-file"></i></button>
             <button class="btn btn-danger delete" data-id="@item.ClienteId"><i class="glyphicon glyphicon-trash"></i></button>
             <button class="btn btn-primary edit" data-id="@item.ClienteId"><i class="glyphicon glyphicon-edit"></i></button>
            </td>
        </tr>
    }
</table>
<div id="modal" class="modal fade" role="dialog" />

@section scripts{
    <script>
        $(function () {
            $(".details").click(function () {
                var id = $(this).attr("data-id");
                alert(id);
                $("#modal").load("Details?id=" + id, function () {
                    $("#modal").modal();
                })
            });

            $(".edit").click(function () {
                var id = $(this).attr("data-id");
                alert(id);
                $("#modal").load("Edit?id=" + id, function () {
                    $("#modal").modal();
                })
            });

            $(".delete").click(function () {
                var id = $(this).attr("data-id");
                alert(id);
                $("#modal").load("Delete?id=" + id, function () {
                    $("#modal").modal();
                })
            });

           $(".create").click(function () {
                $("#modal").load("Create", function () {
                    $("#modal").modal();
                })
            });

        })
    </script>
}

Entenda oque foi feito:

a- Alteramos os links por botões

 <button class="btn btn-success create">Criar Novo Cliente <i class="glyphicon glyphicon-open"></i></button>

 <button class="btn btn-success details" data-id="@item.ClienteId">Detalhes<i class="glyphicon glyphicon-file"></i></button>
 <button class="btn btn-primary edit" data-id="@item.ClienteId">Editar<i class="glyphicon glyphicon-edit"></i></button>
 <button class="btn btn-danger delete" data-id="@item.ClienteId">Deletar<i class="glyphicon glyphicon-trash"></i></button>

b- Definimos uma div para exibir as janelas modais com o id igual a modal, usando a classe .fade para aplicar uma animação ao abrir a modal:

<div id="modal" class="modal fade" />

c- Definimos o código javascript na seção Scripts da página para carregar a respectiva janela modal quando o usuário clicar no botão.

Abaixo temos o resultado exibido pela view Index após essas alterações:

Agora temos que ajustar as demais views para torná-las janelas modais ao serem exibidas.

2- Alterando a view Details

Incluimos na view Details as classes do bootstrap modal para tornar a janela modal :

@model Mvc5_Modal.Models.Cliente
@{
    ViewBag.Title = "Details";
}
<div class="container">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Detalhes do produto</h4>
            </div>
            <div class="modal-body">
                <hr />
                <dl class="dl-horizontal">
                    <dt>@Html.DisplayNameFor(model => model.Nome)</dt>
                    <dd>@Html.DisplayFor(model => model.Nome)</dd>
                    <dt>@Html.DisplayNameFor(model => model.Email)</dt>
                    <dd>@Html.DisplayFor(model => model.Email)</dd>
                    <dt>@Html.DisplayNameFor(model => model.Idade)</dt>
                    <dd>@Html.DisplayFor(model => model.Idade)</dd>
                    <dt>@Html.DisplayNameFor(model => model.Pais)</dt>
                    <dd>@Html.DisplayFor(model => model.Pais)</dd>
                </dl>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger"  data-dismiss="modal">Fechar</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
 <p>
  @Html.ActionLink("Editar", "Edit", new { id = Model.ClienteId }) |
  @Html.ActionLink("Retornar para a Lista", "Index")
 </p>

2- Alterando a view Edit

@model Mvc5_Modal.Models.Cliente
@{
    ViewBag.Title = "Edit";
}
<h2>Editar</h2>
<div class="modal-dialog">
    <div class="modal-content">
    @using (Html.BeginForm())
    {
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title">Editar produto</h4>
        </div>

        @Html.AntiForgeryToken()

        <div class="modal-body">
            <div class="form-horizontal">
                <hr />
                @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                @Html.HiddenFor(model => model.ClienteId)

                <div class="form-group">
                    @Html.LabelFor(model => model.Nome, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.Nome, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.Nome, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.Idade, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.Idade, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.Idade, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.Pais, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.Pais, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.Pais, "", new { @class = "text-danger" })
                    </div>
                </div>
              </div>
            </div>
            <div class="modal-footer">
                    <div class="form-group">
                        <div class="col-md-offset-2 col-md-10">
                            <input type="submit" value="Salvar" class="btn btn-primary" />
                            <input type="button" value="Cancelar" class="btn btn-danger" data-dismiss="modal" />
                        </div>
                    </div>
                </div>
                }
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->

      <div>
            @Html.ActionLink("Retornar para a Lista", "Index")
      </div>

    @section Scripts {
            @Scripts.Render("~/bundles/jqueryval")
    }

3- Alterando a view Delete 

@model Mvc5_Modal.Models.Cliente
@{
    ViewBag.Title = "Delete";
}
<h2>Deletar</h2>
<div>
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                <span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">Deseja deletar este cliente ?</h4>
            </div>
            <div class="modal-body">
                <hr />
                <dl class="dl-horizontal">
                    <dt>@Html.DisplayNameFor(model => model.Nome)</dt>
                    <dd>@Html.DisplayFor(model => model.Nome)</dd>
                    <dt>@Html.DisplayNameFor(model => model.Email)</dt>
                    <dd>@Html.DisplayFor(model => model.Email)</dd>
                    <dt>@Html.DisplayNameFor(model => model.Idade)</dt>
                    <dd>@Html.DisplayFor(model => model.Idade)</dd>
                    <dt>@Html.DisplayNameFor(model => model.Pais)</dt>
                    <dd>@Html.DisplayFor(model => model.Pais)</dd>
                </dl>
            </div>
            <div class="modal-footer">
                @using (Html.BeginForm())
                {
                    @Html.AntiForgeryToken()
                    <div class="form-actions no-color">
                        <input type="submit" value="Deletar" class="btn btn-succcess" />
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
                    </div>
                }
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
    <div>
        @Html.ActionLink("Retornar para a Lista", "Index")
    </div>
</div>

4- Alterando a view Create

@model Mvc5_Modal.Models.Cliente

@{
    ViewBag.Title = "Create";
}
<h2>Criar novo Cliente</h2>
<div class="modal-dialog">
    <div class="modal-content">
        @using (Html.BeginForm())
       {
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title">Criar novo Cliente</h4>
        </div>

        @Html.AntiForgeryToken()

        <div class="modal-body">
            <div class="form-horizontal">
                <hr />
                @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                <div class="form-group">
                    @Html.LabelFor(model => model.Nome, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.Nome, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.Nome, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.Idade, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.Idade, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.Idade, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.Pais, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.Pais, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.Pais, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Criar" class="btn btn-default" />
                    <input type="button" value="Cancelar" class="btn btn-danger" data-dismiss="modal" />
                </div>
            </div>
        </div>
     }
    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
<div>
  @Html.ActionLink("Retornar para a lista", "Index")
</div>

@section Scripts {
         @Scripts.Render("~/bundles/jqueryval")
}

Pegue o codigo do projeto: Mvc5_Modal.zip (sem as referências)

"Porque o coração deste povo está endurecido,E ouviram de mau grado com seus ouvidos,E fecharam seus olhos;Para que não vejam com os olhos,E ouçam com os ouvidos,e compreendam com o coração,e se convertam,e eu os cure."
Mateus 13:15

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

Quer migrar para o VB .NET ?

Quer aprender C# ??

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

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

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

 

Referências:

José Carlos Macoratti