Neste artigo veremos três formas distintas de como podemos exibir dados em tabelas em aplicações ASP .NET MVC 5.
- Usando um laço foreach
- Usando um WebGrid
- Usando jQuery com json Result Object
Eu já publiquei artigos sobre cada um desses recursos e você pode conferir nas referências.
Dito isso, vamos ao trabalho!
Recursos Usados
Criando o projeto no VS 2017
- Abra o Visual Studio 2017 Community, crie um novo projeto ASP .NET Web Application usando a linguagem C# e informe o nome Mvc5_Tabelas;
- Use o template Empty, e marque para adicionar pastas e as referências principais para MVC. Marque também sem autenticação, e clique em “OK“;
Pronto, temos o projeto criado com uma estrutura básica, conforme mostra a figura abaixo, e já temos todos os recursos necessários para criar nossa aplicação ASP .NET MVC 5.
Definindo o modelo de domínio
Como nosso objetivo é apresentar os dados em tabelas, não usarei um banco de dados neste artigo; vou trabalhar com dados na memória. Vamos definir um modelo de domínio criando a classe Funcionario na pasta Models do projeto.
Selecione a pasta Models, e no menu Project clique em “Add Class” e informe o nome Funcionario com o código abaixo:
using System; namespace Mvc5_Tabelas.Models { public class Funcionario { public int FuncionarioId { get; set; } public string Nome { get; set; } public string Email { get; set; } public decimal Salario { get; set; } public DateTime Nascimento { get; set; } public string Sexo { get; set; } public string Setor { get; set; } } }
Criando o serviço para fornecer os dados
Vamos criar uma pasta chamada Services no projeto, e nesta pasta vamos criar a classe FuncionarioServices, onde definiremos um método para retornar alguns dados de funcionários que usaremos para exibir nas tabelas que vemos na aplicação.
Selecione o projeto, e no menu Project clique em “New Folder” e informe o nome Services. A seguir, crie a classe FuncionarioServices nesta pasta, como no código a seguir:
using Mvc5_Tabelas.Models; using System; using System.Collections.Generic; namespace Mvc5_Tabelas.Services { public class FuncionarioServices { public static List<Funcionario> GetFuncionarios() { var listaFuncionarios = new List<Funcionario>() { new Funcionario { FuncionarioId=1, Nome="Macoratti", Email="macoratti@yahoo.com", Nascimento= DateTime.Now.AddYears(-45), Salario=5000.00M, Sexo="Masculino", Setor="TI"}, new Funcionario { FuncionarioId=2, Nome="Pedro", Email="pedro@yahoo.com", Nascimento= DateTime.Now.AddYears(-25), Salario=4000.00M, Sexo="Masculino", Setor="Engenharia"}, new Funcionario { FuncionarioId=3, Nome="Jefferson", Email="jeff@yahoo.com", Nascimento= DateTime.Now.AddYears(-20), Salario=3500.00M, Sexo="Masculino", Setor="Engenharia"}, new Funcionario { FuncionarioId=4, Nome="Miriam", Email="miriam@yahoo.com", Nascimento= DateTime.Now.AddYears(-40), Salario=3000.00M, Sexo="Feminino", Setor="Contabilidade"}, new Funcionario { FuncionarioId=5, Nome="Bianca", Email="bibi@yahoo.com", Nascimento= DateTime.Now.AddYears(-22), Salario=6000.00M, Sexo="Feminino", Setor="Contabilidade"}, new Funcionario { FuncionarioId=6, Nome="Janice", Email="janjan@yahoo.com", Nascimento= DateTime.Now.AddYears(-23), Salario=4000.00M, Sexo="Feminino", Setor="RH"}, new Funcionario { FuncionarioId=7, Nome="Jessica", Email="jesslang@yahoo.com", Nascimento= DateTime.Now.AddYears(-26), Salario=4500.00M, Sexo="Feminino", Setor="RH"}, new Funcionario { FuncionarioId=8, Nome="Marcia", Email="marcia@yahoo.com", Nascimento= DateTime.Now.AddYears(-35), Salario=5000.00M, Sexo="Feminino", Setor="RH"}, new Funcionario { FuncionarioId=9, Nome="Mario", Email="mario@yahoo.com", Nascimento= DateTime.Now.AddYears(-48), Salario=4000.00M, Sexo="Masculino", Setor="Engenharia"}, new Funcionario { FuncionarioId=10, Nome="Carlos", Email="carlos@yahoo.com", Nascimento= DateTime.Now.AddYears(-32), Salario=3000.00M, Sexo="Masculino", Setor="Administrativo"}, new Funcionario { FuncionarioId=11, Nome="Adriano", Email="adriano@yahoo.com", Nascimento= DateTime.Now.AddYears(-28), Salario=3500.00M, Sexo="Masculino", Setor="Administrativo"}, new Funcionario { FuncionarioId=12, Nome="Igor", Email="igor@yahoo.com", Nascimento= DateTime.Now.AddYears(-20), Salario=2500.00M, Sexo="Masculino", Setor="Administrativo"} }; return listaFuncionarios; } } }
A classe FuncionarioServices possui o método estático GetFuncionarios() que retorna uma lista de objetos Funcionario em memória, que serão exibidos nas views do projeto.
Criando o controlador HomeController
Vamos criar um controlador HomeController na pasta Controllers e definir neste controlador alguns métodos Action para exibir informações dos funcionários no formato tabular.
- Clique com o botão direito sobre a pasta Controllers e a seguir clique em “Add Controller“;
- Selecione o template MVC 5 Controller – Empty e informe o nome HomeController.
A seguir, vamos definir os seguintes métodos Action neste controlador:
using Mvc5_Tabelas.Models; using Mvc5_Tabelas.Services; using System.Collections.Generic; using System.Web.Mvc; namespace Mvc5_Tabelas.Controllers { public class HomeController : Controller { List<Funcionario> funcionarios = FuncionarioServices.GetFuncionarios(); // GET: Home // pagina principal public ActionResult Index() { return View(); } //tabela : foreach public ActionResult TabelaForeach() { return View(funcionarios); } //tabela : webgrid public ActionResult TabelaWebGrid() { return View(funcionarios); } //tabela : json public ActionResult TabelaJsonView() { return View(); } public JsonResult FuncionariosDados() { return Json(funcionarios, JsonRequestBehavior.AllowGet); } } }
Neste código temos cinco métodos Actions:
- Index(): a action principal que vai exibir view contendo o menu com as opções de gerar as tabelas
- TabelaForeach(): exibe os dados no formato tabular usando um laço foreach
- TabelaWebGrid(): exibe os dados no formato tabular usando um webgrid
- TabelaJsonView(): exibe os dados no formato tabular usando um objeto json
- FuncionariosDados(): obtém os dados dos funcionários e converte no formato json
Teremos que criar quatro views para exibir informações:
- Index: view principal que vai exibir o menu com as opções de gerar as tabelas
- TabelaForeach: exibe os dados no formato tabular usando um laço foreach
- TabelaWebGrid: exibe os dados no formato tabular usando um webgrid
- TabelaJsonView: exibe os dados no formato tabular usando um objeto json
Devemos alterar o código da view _Layout.cshtml na pasta Views/Shared para criar um menu com as opções.
O trecho de código a seguir mostra isso:
.... <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li>@Html.ActionLink("Tabela Foreach", "TabelaForeach", "Home")</li> <li>@Html.ActionLink("Tabela WebGrid", "TabelaWebGrid", "Home")</li> <li>@Html.ActionLink("Tabela Json", "TabelaJsonView", "Home")</li> </ul> </div> ......
A partir daqui, para simplificar o artigo eu vou mostrar apenas o código das views que geram as tabelas.
1 – Exibindo os dados no formato tabular usando o laço foreach
- Clique com o botão direito no interior do método Action TabelaForeach(), e a seguir clique em “Add View“;
- Aceite o nome padrão e escolha o template List e o Model Class Funcionario e clique no botão “Add“;
Será gerada a view TabelaForeach.cshtml na pasta Views/Home. A seguir, altere o código da view gerada conforme abaixo (estou fazendo pequenos ajustes):
@model IEnumerable<Mvc5_Tabelas.Models.Funcionario> @{ ViewBag.Title = "TabelaForeach"; } <h2>Lista de Funcionários</h2> <table class="table"> <tr> <th>@Html.DisplayNameFor(model => model.Nome)</th> <th>@Html.DisplayNameFor(model => model.Email)</th> <th>@Html.DisplayNameFor(model => model.Salario)</th> <th>@Html.DisplayNameFor(model => model.Nascimento)</th> <th>@Html.DisplayNameFor(model => model.Sexo)</th> <th>@Html.DisplayNameFor(model => model.Setor)</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.Salario)</td> <td>@Html.DisplayFor(modelItem => item.Nascimento)</td> <td>@Html.DisplayFor(modelItem => item.Sexo)</td> <td>@Html.DisplayFor(modelItem => item.Setor)</td> </tr> } </table>
Na figura acima temos a view exibindo os dados dos funcionários. Essa view é gerada automaticamente usando o template List e o modelo definido. Eu apenas removi os links para exibir apenas os dados dos funcionários.
2 – Exibindo os dados no formato tabular usando o webgrid
- Clique com o botão direito no interior do método Action TabelaWebGrid(), e a seguir clique em “Add View“;
- Aceite o nome padrão e escolha o template Empty e clique no botão Add;
A seguir, inclua o código abaixo na view TabelaWebGrid.cshtml:
@model IEnumerable<Mvc5_Tabelas.Models.Funcionario> @{ ViewBag.Title = "TabelaWebGrid"; } <h2>Lista de Funcionários - WebGrid</h2> <hr /> @{ var grid = new WebGrid(Model, canPage: false); } <div> @grid.GetHtml(tableStyle: "table table-bordered table-responsive table-hover", columns: grid.Columns( grid.Column("FuncionarioId", "Codigo"), grid.Column("Nome", "Nome"), grid.Column("Email", "Email"), grid.Column("Salario", "Salário"), grid.Column("Nascimento", "Data Nascimento"), grid.Column("Sexo", "Sexo"), grid.Column("Setor", "Setor") ) ) </div>
Poderíamos ter configurado o WebGrid com mais recursos, mas quero exibir apenas os dados dos funcionários.
2 – Exibindo os dados no formato tabular usando o json
- Clique com o botão direito no interior do método Action TabelaJsonView() e a seguir clique em “Add View“;
- Aceite o nome padrão e escolha o template Empty e clique no botão “Add“;
- Inclua o código abaixo na view TabelaJsonView.cshtml:
@{ ViewBag.Title = "JsonView"; } <h2>Lista de Funcionários - Json</h2> <hr /> <div> <table class="table table-bordered table-responsive table-hover" id="tblFuncionario"> <tr> <th>Codigo</th> <th>Nome</th> <th>Email</th> <th>Salario</th> <th>Nascimento</th> <th>Sexo</th> <th>Setor</th> </tr> </table> </div> <script src="~/scripts/jquery-1.10.2.js"></script> <script type="text/javascript"> $(document).ready(function () { GetDadosFuncionarios(); }); function GetDadosFuncionarios() { $.get('/Home/FuncionariosDados', {}, function (data) { var tblFuncionario = $("#tblFuncionario"); $.each(data, function (index, item) { var tr = $("<tr></tr>"); tr.html(("<td>" + item.FuncionarioId + "</td>") + " " + ("<td>" + item.Nome + "</td>") + " " + ("<td>" + item.Email + "</td>") + " " + ("<td>" + item.Salario + "</td>") + " " + ("<td>" + ToJavaScriptDate(item.Nascimento) + "</td>") + " " + ("<td>" + item.Sexo + "</td>") + " " + ("<td>" + item.Setor + "</td>")); tblFuncionario.append(tr); }); }); } function ToJavaScriptDate(value) { var pattern = /Date\(([^)]+)\)/; var results = pattern.exec(value); var dt = new Date(parseFloat(results[1])); return (dt.getMonth() + 1) + "/" + dt.getDate() + "/" + dt.getFullYear(); } </script>
Neste código, temos o seguinte:
1 – Definimos uma tabela HTML para exibir o cabeçalho com os nomes dos campos que vamos exibir.
<table class="table table-bordered table-responsive table-hover" id="tblFuncionario"> <tr> <th>Codigo</th> <th>Nome</th> <th>Email</th> <th>Salario</th> <th>Nascimento</th> <th>Sexo</th> <th>Setor</th> </tr> </table>
2 – Criamos um script JavaScript onde temos a função GetDadosFuncionarios() acionando a Action Home/FuncionariosDados que obtém os dados no formato json.
A seguir, montamos a table com os dados e usamos a função ToJavaScriptDate() para converter a data no formato MM/DD/YYYY:
<script type="text/javascript"> $(document).ready(function () { GetDadosFuncionarios(); }); function GetDadosFuncionarios() { $.get('/Home/FuncionariosDados', {}, function (data) { var tblFuncionario = $("#tblFuncionario"); $.each(data, function (index, item) { var tr = $("<tr></tr>"); tr.html(("<td>" + item.FuncionarioId + "</td>") + " " + ("<td>" + item.Nome + "</td>") + " " + ("<td>" + item.Email + "</td>") + " " + ("<td>" + item.Salario + "</td>") + " " + ("<td>" + ToJavaScriptDate(item.Nascimento) + "</td>") + " " + ("<td>" + item.Sexo + "</td>") + " " + ("<td>" + item.Setor + "</td>")); tblFuncionario.append(tr); }); }); }
3 – A função ToJavaScriptDate:
function ToJavaScriptDate(value) { var pattern = /Date\(([^)]+)\)/; var results = pattern.exec(value); var dt = new Date(parseFloat(results[1])); return (dt.getMonth() + 1) + "/" + dt.getDate() + "/" + dt.getFullYear(); }
Temos, assim, essas três formas distintas de exibir dados em tabelas na ASP .NET MVC 5.
- Pegue o projeto completo aqui: Mvc5_Tabelas.zip (sem as referências).