ASP .NET MVC 5 - Implementando jQuery DataTable

ASP .NET MVC 5 - Implementando jQuery DataTable

Neste artigo vou mostrar como implementar o recurso jQuery DataTable em aplicações ASP .NET MVC usando a linguagem C#.

O recurso DataTables é um plugin jQuery fácil de usar para e muito adequado para exibir dados tabulares com suporte para paginação, busca, salvamento de estado, classificação de várias colunas com detecção de tipo de dados e muito mais. Tudo isso com quase nenhuma ou pouca configuração necessária.

Para iniciar a utilização do DataTables, a princípio basta incluir dois arquivos no seu site: o arquivo de estilo CSS e o próprio script DataTables, sendo que esses dois arquivos estão disponíveis na distribuição CDN do DataTables : DataTables CDN

O código JavaScript usado para inicializar as tabelas também é bem simples, veja :

$(document).ready(function(){
    $('#myTable').DataTable();
});

Acrescente a tudo isso que o plugin é de código aberto e você pode usar sem restrições.

Quer mais ou tá bom assim ?

Definindo o cenário

Para mostrar a implementação do jQuery DataTable vou partir do seguinte cenário:

1- Temos um banco de dados Cadastro.mdf e uma tabela Clientes que vamos acessar e exibir os dados em uma tabela;

2- A estrutura da tabela Clientes e alguns dados já incluídos são mostrados a seguir:

3- Vou usar uma abordagem DataBase-First partindo de um banco de dados e tabelas já existentes e fazendo o mapeamento com o EF 6.2.

Para uma introdução ao jQuery DataTables veja o meu artigo: jQuery - Apresentando DataTables - Macoratti

Para uma descrição detalhada de todas as funcionalidades deste plugin visite a página oficial : https://datatables.net/

Então vamos ao trabalho...

Recursos Usados:

Criando o projeto ASP .NET MVC 5

Abra o VS 2017 Community e crie um projeto usando o template Web-> ASP .NET Web Application(.NET Framework) e informe o nome Mvc_DTable;

A seguir marque o template MVC sem autenticação e clique em OK;

Será criado um projeto com toda a estrutura pronta para ser usada.

Antes de prosseguir vamos criar uma pasta no projeto chamada Imagens, e, a seguir,dentro desta pasta, vamos criar a pasta Clientes onde vamos armazenar as imagens dos clientes.

No menu Project clique em New Folder e informe o nome Imagens. Repeita o procedimento e crie a pasta Clientes dentro da pasta Imagens.

A seguir copie algumas imagens para pasta Clientes. Iremos exibir estas imagens na em nossa tabela.

Incluindo a referência ao Entity Framework

Vamos incluir o pacote do EF 6.2 no projeto via Nuget: (Menu Tools->Manage Nuget Packages for Solution)

Clique em Browse, selecione o pacote e clique em Install:

Criando o modelo de domínio e a classe de Contexto

Na pasta Models do projeto vamos criar as classes Clientes e ClientesDbContext que representam o nosso modelo de domínio e o nosso contexto e que farão o mapeamento para a tabela Clientes via EF.

Vamos usar o recurso Data Annotations para definir a validação e formatação de dados e mensagens de erros.

1- Classe Cliente

using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace Mvc_DTable.Models
{
    [Table("Clientes")]
    public class Cliente 
    {
        public int ID { get; set; }

        [Display(Name = "Nome")]
        [Required(ErrorMessage = "O nome do cliente é obrigatório", AllowEmptyStrings = false)]
        public string ClienteNome { get; set; }
        [Display(Name = "Email")]
        public string ClienteEmail { get; set; }
        [Display(Name = "Telefone")]
        public string ClienteFone { get; set; }
        [Display(Name = "Estado")]
        public string ClienteEstado { get; set; }
        public string ClienteImagem { get; set; }
    }
}

2- Classe de contexto ClientesDbContext

using System.Data.Entity;

namespace Mvc_DTable.Models
{
    public class ClientesDbContext : DbContext
    {
        public DbSet<Cliente> Clientes { get; set; }
    }
}

A classe de contexto indica ao EF o mapeamento existente e permite o acesso às tabelas do banco de dados.

Definindo a string de conexão no arquivo web.config

Precisamos definir a string de conexão no arquivo web.config para informar ao EF onde esta no banco de dados.

Abra o arquivo Web.Config do projeto e inclua o código abaixo:

...
<connectionStrings>
<add name="ClientesDbContext" connectionString="Data Source=.\;Initial Catalog=Cadastro;Integrated Security=True" providerName="System.Data.SqlClient"/>
</connectionStrings>
...

Observe que o nome da string de conexão é o mesmo que o nome da nossa classe de Contexto: ClientesDbContext.

Criando o controlador ClientesController

Vamos criar o controlador ClientesController na pasta Controllers onde vamos definir os métodos Action para exibir as informações da tabela Clientes.

Clique com o botão direito sobre a pasta Controllers e a seguir clique em Add e depois em Controller;

Selecione a opção MVC 5 Controller Empty do Scaffolding clique em Add e informe o nome ClientesController e clique em Add;

Inclua o código abaixo neste controlador:

using Mvc_DTable.Models;
using System.Linq;
using System.Web.Mvc;

namespace Mvc_DTable.Controllers
{
    public class ClientesController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            return View();
        }

        [HttpGet]
        public ActionResult GetClientes()
        {
            using (ClientesDbContext _context = new ClientesDbContext())
            {
                var listaClientes = _context.Clientes.ToList();

                return Json(new { data = listaClientes }, JsonRequestBehavior.AllowGet);
            }
        }
    }
}

Neste código criamos uma instância do contexto e obtemos todos os clientes no método Action GetClientes. A view Index vai apresentar o DataTable onde iremos fazer uma requisição via ajax para o método GetClientes e exibir os dados.

Implementando o DataTable na view Index para exibir os clientes

Vamos criar a View Index para exibir os clientes cadastrados. Nesta view vamos implementar o DataTable.

Clique com o botão direito sobre o método Action Index do controlador ClientesController e a seguir clique em Add View;

Aceite os valores definidos na janela Add View e clique em Add:

A seguir inclua o código abaixo :

@{
    ViewBag.Title = "ClientesLista";
}

<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />

<div id="page-wrapper">
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="row">
                        <div class="col-lg-12" >
                            <table id="myDataTable" class="table table-bordered table-striped table-hover">
                                <thead>
                                    <tr>
                                        <th>Cliente Perfil</th>
                                        <th>Cliente ID</th>
                                        <th>Cliente Nome</th>
                                        <th>Cliente Email</th>
                                        <th>Cliente Fone</th>
                                        <th>Cliente Estado</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- /#page-wrapper -->

@section Scripts{
    <!-- JS -->
   <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //Pega os dados do banco de dados para preencher o datatable
            var oTable = $("#myDataTable").DataTable({

"language": {
"lengthMenu": "Exibe _MENU_ Registros por página",
"search": "Procurar",
"paginate": { "previous": "Retorna", "next" : "Avança"},
"zeroRecords": "Nada foi encontrado",
"info": "Exibindo página _PAGE_ de _PAGES_",
"infoEmpty": "Sem registros",
"infoFiltered": "(filtrado de _MAX_ regitros totais)"
},
"processing": true, // mostrar a progress bar
//"serverSide": true, // processamento no servidor
"filter": true, // habilita o filtro(search box)
"lengthMenu": [[3, 5, 10, 25, 50, -1], [3, 5, 10, 25, 50, "Todos"]],
"pageLength": 3, // define o tamanho da página

                "ajax": {
                    "url": "/Clientes/GetClientes",
                    "type": "GET",
                    "dataType": "json"
                },
               "columns": [                    
     {                        
        "data": "ClienteImagem", "title": "Perfil", width": "50px", "render": function (data) {                            
         return '<img class="rounded img-thumbnail" style="width:90px; height:50px;" src="/Imagens/Clientes/' + data + '"/>';    
     }                    
},
                    { "data": "ID", "title": "Código", "autowidth": true },
                    { "data": "ClienteNome", "title": "Nome","autowidth": true },
                    { "data": "ClienteEmail", "title": "Email", "autowidth": true },
                    { "data": "ClienteFone", "title": "Telefone","autowidth": true },
                    { "data": "ClienteEstado", "title": "Estado","autowidth": true },               
                      ]
                ]
            });
        });
    </script>
}

Na primeira parte do código estamos criando uma tabela HTML definindo o id data tabela - myDataTable, e o cabeçalho da tabela. Estamos referenciando o arquivo de estilo do datatables usando a distribuição cdn:

@{
    ViewBag.Title = "ClientesLista";
}
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />

<div id="page-wrapper">
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="row">
                        <div class="col-lg-12" >
                            <table id="myDataTable" class="table table-bordered table-striped table-hover">
                                <thead>
                                    <tr>
                                        <th>Cliente Perfil</th>
                                        <th>Cliente ID</th>
                                        <th>Cliente Nome</th>
                                        <th>Cliente Email</th>
                                        <th>Cliente Fone</th>
                                        <th>Cliente Estado</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

A seguir temos o script onde implementamos o DataTable. Vamos entender:

1 - Iniciamos definindo a referência o DataTables usando a distribuição CDN :

2- A seguir definimos a inicialização do datatable e definimos algumas configurações :

em language, alteramos as labels exibidas na grade;
a seguir configuramos o tamanho do menu com opções e o tamanho padrão da página;

<script type="text/javascript">
        $(document).ready(function () {
            //Pega os dados do banco de dados para preencher o datatable
            var oTable = $("#myDataTable").DataTable({

"language": {
"lengthMenu": "Exibe _MENU_ Registros por página",
"search": "Procurar",
"paginate": { "previous": "Retorna", "next" : "Avança"},
"zeroRecords": "Nada foi encontrado",
"info": "Exibindo página _PAGE_ de _PAGES_",
"infoEmpty": "Sem registros",
"infoFiltered": "(filtrado de _MAX_ regitros totais)"
},

                "processing": true,    // mostrar a progress bar
                "filter": true,            // habilita o filtro(search box)
                "lengthMenu": [[3, 5, 10, 25, 50, -1], [3, 5, 10, 25, 50, "Todos"]], //define as opções de paginação
                "pageLength": 3,      // define o tamanho da página

3- A seguir definimos a requisição ajax que iremos fazer ao método Action GetClientes do controlador Clientes para obter os dados dos clientes no formato JSON :

              "ajax": {
                    "url": "/Clientes/GetClientes",
                    "type": "GET",
                    "dataType": "json"
                },

4- Finalmente definimos as colunas que desejamos exibir:

    "columns": [
                    {
                        "data": "ClienteImagem", "title": "Perfil", width": "50px", "render": function (data) {
                            return '<img class="rounded img-thumbnail" style="width:90px; height:50px;" src="/Imagens/Clientes/' + data + '"/>';
                        }
                    },
                    { "data": "ID", "title": "Código", "autowidth": true },
                    { "data": "ClienteNome", "title": "Nome","autowidth": true },
                    { "data": "ClienteEmail", "title": "Email", "autowidth": true },
                    { "data": "ClienteFone", "title": "Telefone","autowidth": true },
                    { "data": "ClienteEstado", "title": "Estado","autowidth": true },
                ]

Agora é só alegria...

Executando o projeto teremos o seguinte resultado:

1- A página inicial exibida pela view Index

Nesta página vemos os textos das labels alterados e as opções de página definidas com recursos de ordenação por coluna e filtro por nome de cliente.

Note que nesta abordagem buscamos todos os dados do servidor de uma vez e a seguir fazermos a paginação, ordenação e a busca instantânea do lado do cliente. Isso pode trazer problemas de desempenho, se tivermos que obter uma grande quantidade de dados do lado do servidor ao mesmo tempo.

Para resolver este problema podemos realizar a paginação, classificação e filtragem do lado do servidor na aplicação ASP .NET MVC.

Em outro artigo eu vou mostrar como fazer o CRUD usando jquery datatables. Aguarde...

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

"Levantai os vossos olhos para os céus, e olhai para a terra em baixo, porque os céus desaparecerão como a fumaça, e a terra se envelhecerá como roupa, e os seus moradores morrerão semelhantemente; porém a minha salvação durará para sempre, e a minha justiça não será abolida."
Isaías 51:6

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

Referências:

José Carlos Macoratti