Listar registros com ASP.NET MVC – parte 2

Fala pessoal, continuando a série de artigos sobre listagem de dados com ASP.NET MVC, hoje vamos pegar o exemplo da parte 1 e criar outra página com grid e paginação do Jquery DataTables.

Abaixo o resultado da minha consulta utilizando o DataTables:

O Datatables traz para você de “graça” ordenação, filtro, alteração de quantidade de resultados por página e paginação sem muito ou quase nenhum trabalho de implementação.

Lembrando que as funcionalidades são somente para os resultados que se encontram no client, ou seja quando efetuar um filtro será apenas nos itens já inseridos na grid.

Bom cenário quando você tem uma tabela com poucos registros e pode fazer um “select full” retornando todos os registros de uma vez do banco.

Vamos a implementação, o primeiro passo é entrar no site do Datatables e efetuar o download do pacote, abra o projeto do artigo anterior e faça as referências aos seguintes arquivos:

• datatables.min.js
• dataTables.bootstrap.min.js
• dataTables.bootstrap.min.css

Vamos alterar o controller TodoController e inserir mais dois métodos:

public ActionResult IndexWithDataTables()
{
   return View();
}

O método acima apenas vai retornar uma View nova.
Agora vamos criar um método responsável por efetuar a busca dos dados no repositório:

public ActionResult GetData()
{
    var listVM = ConvertListModelToListViewModel(_repository.Get());
	return Json(new { data = listVM }, JsonRequestBehavior.AllowGet);
}

O método acima será acionado via ajax pelo componente do dataTables, então
assim que carregar a página este método será acionado e irá buscar todas as tarefas no banco de dados.

Na View criada vamos adicionar os seguintes comandos:

<h4 class="text-success">Listando tarefas com o Datatables</h4>
<div style="width:90%;">
<table id="Jdatatable" class="table table-responsive table-bordered">
  <thead>
    <tr>
	<th>Id</th>
	<th>Titulo</th>
	<th>Criado em:</th>
	<th>Descrição</th>
	<th>Fechado ?</th>
	<th>Realizado em:</th>
    </tr>
   </thead>
</table>
</div>

Agora vamos inserir o bloco javascript:

<script type="text/javascript">
$(document).ready(function () {
	$("#Jdatatable").DataTable({
		"ajax": {
		"url": "/Todo/GetData",
		"type": "GET",
		"datatype": "json"
		},
		"columns": [
	        { "data": "Id", "autoWidth": true },
		{ "data": "Title", "autoWidth": true },
		{
		"data": "DataOpen", "autoWidth": true, "type": "date",
		"render": function (value) {
		if (value === null) return "";
			var pattern = /Date\(([^)]+)\)/;
			var results = pattern.exec(value);
          		var dt = new Date(parseFloat(results[1]));
			return dt.getDate() + "/" + (dt.getMonth() + 1) + "/" + dt.getFullYear();
		}
		},
		{ "data": "Description", "autoWidth": true },
		{ "data": "Closed", "autoWidth": true },
		{
		"data": "DataClosed", "autoWidth": true, "type": "date",
		"render": function (value) {
		if (value === null) return "";
			var pattern = /Date\(([^)]+)\)/;
			var results = pattern.exec(value);
			var dt = new Date(parseFloat(results[1]));
			return dt.getDate() + "/" + (dt.getMonth() + 1) + "/" + dt.getFullYear();
		}
		}
          ]
	});
});
</script>

Na imagem abaixo explico alguns eventos (clique nela para aumentar):

No próximo artigo vou configurar esse mesmo exemplo para trabalhar com paginação, filtros e ordenação via “server side” , veremos como montar uma paginação no Entity Framework e como utilizar no Datatables.

Pretendo subir no meu GitHub a solução final com todos os artigos desta série, aguardem!

Espero que tenha ajudado, principalmente que está iniciando os estudos em desenvolvimento web, e se ajudou comenta para incentivar.

Um abraço.