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:

img2_list_parte2

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):

img_list_parte2

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.

Criar range de datas com Jquery

Fala pessoal, essa dica vai para quem precisa usar em seu sistema um range de datas onde o usuário deve escolher a data inicial e a data final para alguma ação de seu sistema.

A primeira coisa é referenciar as bibliotecas do jQuery e jQuery Ui e jQueryUI CSS.

Crie na sua página html os seguintes campos:

<br/>
From: <input type="text" id="txtFromDate" />
To: <input type="text" id="txtToDate" />

Crie o seguinte script:

(document).ready(function(){
    $("#txtFromDate").datepicker({
        numberOfMonths: 2,
        onSelect: function(selected) {
          $("#txtToDate").datepicker("option","minDate", selected)
        }
    });
    $("#txtToDate").datepicker({ 
        numberOfMonths: 2,
        onSelect: function(selected) {
           $("#txtFromDate").datepicker("option","maxDate", selected)
        }
    });  
});

Se tudo der certo você deverá ver uma tela mais ou menos assim:

rangeDatas

Este exemplo foi retirado da internet, precisei fazer algo parecido em um sistema que estou trabalhando, só estou replicando para ajudar alguém que precise.

O post original se encontra aqui.

Detectar se o caps lock está ativado com Jquery

Fala, pessoal!!
Estou desenvolvendo um projeto onde faço o login pelo Active Directory e ele considera letras maiúsculas e minúsculas na senha e quando o caps lock está ativado temos problemas pois o AD pode não encontrar o usuário com a senha informada se o valor estiver todo em maiúsculo ou todo em minúsculo.
E por exemplo no meu teclado a luz do caps lock fica em uma posição meio escondida, abaixo está uma solução para implementar a visualização em uma tela web.

A ideia é que apareça um aviso ao lado ou embaixo do campo de senha:
login_capslock

Para este efeito crie na sua página um elemento aonde você quer criar o aviso:

<span id="error_capslock">Caps Lock is ON.</span>

Adicione o CSS:

#error_capslock {
	border: 1px solid #FFFF66;
	background-color: #FFFFCC;
	display: inline-block;
	margin-left: 0px;
	padding: 3px;
	display: none;
}

E por fim o javascript:

$(function () {
   var isShiftPressed = false;
   var isCapsOn = null;
   $("#Password").bind("keydown", function (e) {
      var keyCode = e.keyCode ? e.keyCode : e.which;
      if (keyCode == 16) {
      isShiftPressed = true;
   }
   });
   $("#Password").bind("keyup", function (e) {
      var keyCode = e.keyCode ? e.keyCode : e.which;
      if (keyCode == 16) {
         isShiftPressed = false;
      }
      if (keyCode == 20) {
         if (isCapsOn == true) {
             isCapsOn = false;
             $("#error_capslock").hide();
         } else if (isCapsOn == false) {
             isCapsOn = true;
             $("#error_capslock").show();
         }
      }
      });
      $("#Password").bind("keypress", function (e) {
          var keyCode = e.keyCode ? e.keyCode : e.which;
          if (keyCode >= 65 && keyCode <= 90 
&& !isShiftPressed) {
             isCapsOn = true;
             $("#error_capslock").show();
          } else {
         	$("#error_capslock").hide();
         }
         });
   });

Não podemos esquecer de colocar a chamada ao jquery no inicio da página ok? pode ser desta forma:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/
jquery/1.8.3/jquery.min.js"></script>

Bem é isso ae!!

Abraços.