ASP .NET MVC 5 - Exibindo dados em tabelas

Neste artigo vou mostrar 3 formas distintas de como podemos exibir dados em tabelas em aplicações ASP .NET MVC 5.

Hoje veremos 3 formas de exibir dados no formato tabular 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.

Isto posto, vamos ao trabalho...

Recursos Usados

Visual Studio 2017 Express for web

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 eu não vou usar 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.

Seleciona 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 um pasta chamada Services no projeto e nesta pasta vamos criar a classe FuncionarioServices onde vamos definir um método para retornar alguns dados de funcionários que vamos usar para exibir nas tabelas que iremos gerar 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 com o 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 5 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() - obtem os dados dos funcionarios e converte no formato json;

Teremos que criar 4 views para exibir informações:

Index - A view principal que vai exibir o menu com as opções de gerar as tabelas;
TabelaForeach - a view exibe os dados no formato tabular usando um laço foreach;
TabelaWebGrid - a view exibe os dados no formato tabular usando um webgrid;
TabelaJsonView - a view 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 ao lado temos a view exibindo os dados dos funcionários. Esta view é gerada automaticamente usando o template List e o modelo definido e eu apenas removi os links para exibir apenas os dados dos funcionarios.

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>

Poderiamos ter configurado o WebGrid com mais recursos mas estou querendo 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;

A seguir 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 :

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 3 formas distintas de exibir dados em tabelas na ASP .NET MVC 5.

Pegue o projeto completo aqui: Mvc5_Tabelas.zip (sem as referências)

"Disse-lhes, pois, Jesus: Quando levantardes o Filho do homem, então conhecereis que EU SOU, e que nada faço por mim mesmo; mas isto falo como meu Pai me ensinou."
João 8:28

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