we are developers

iMaster Developers

iMaster DevelopersPowered by:

.NET

18 jul, 2018

ASP .NET MVC 5 – Exibindo dados em tabelas

José Carlos Macoratti

Tem 597 artigos publicados com 35713765 visualizações desde 2011

José Carlos Macoratti
Publicidade

Neste artigo veremos três formas distintas de como podemos exibir dados em tabelas em aplicações ASP .NET MVC 5.

  1. Usando um laço foreach
  2. Usando um WebGrid
  3. 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.

De 0 a 10, o quanto você recomendaria este artigo para um amigo?

José Carlos Macoratti
Saiba mais

José Carlos Macoratti

edit597 Artigo(s)

é referência em Visual Basic no Brasil e autor dos livros "Aprenda Rápido: ASP" e "ASP, ADO e Banco de Dados na Internet". Mantenedor do site macoratti.net.