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>
@{ @section scripts{ $(".edit").click(function () { $(".delete").click(function () { $(".create").click(function () { }) |
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-group"> <div class="form-group"> <div class="form-group"> <div class="form-group"> <div> @section Scripts { |
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
@{ @Html.AntiForgeryToken() <div class="modal-body"> <div class="form-group"> <div class="form-group"> <div class="form-group"> @section Scripts { |
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:
Super DVD Vídeo Aulas - Vídeo Aula sobre VB .NET, ASP .NET e C#
ASP .NET MVC - Filtrando registros com Dropdownlist - Macoratti
ASP .NET MVC - Movendo itens entre dois DropDownList ... - Macoratti
ASP .NET MVC - Exibindo uma lista de itens selecionáveis - Macoratti
ASP .NET MVC - Usando os recursos do BootStrap - II - Macoratti
ASP .NET MVC 5 - Exibindo um menu usando Bootstrap - Macoratti