Arquivo
jQuery DataTables obtendo dados no Api Controller com ASP NET MVC
Conhecimentos necessários:
* Ter conhecimento prévio de como funciona o data tables.
* Referenciar scripts e css necessários.
Página oficial jQuery Data Tables
Etapas:
- Criar método para retornar os dados para o jquery data tables no seu controller. A assinatura do método é a seguinte.
- Código no lado do servidor:
public class DataController : ApiController { public dynamic GetJdt(int sEcho, int iDisplayStart, int iDisplayLength, string sSearch, int iSortCol_0, string sSortDir_0) { // Utilizando LINQ para fazer a consulta em uma Session do NHibernate</pre> var consulta = sessao.Query<Objeto>().AsQueryable(); // Seta os termos da busca if (!String.IsNullOrEmpty(sSearch)) { consulta = consulta.Where( wh => wh.Coluna1.ToLower().Contains(sSearch.ToLower())); } // Total de registros para cálculo de paginação var quantidadeRegistrosSemFiltro = consulta.Count(); // Ordenação string colunaOrdenacao = "Id"; switch (iSortCol_0) { case 0: colunaOrdenacao = "Id"; break; case 1: colunaOrdenacao = "Coluna1"; break; case 2: colunaOrdenacao = "Coluna2"; break; case 3: colunaOrdenacao = "Coluna3"; break; case 4: colunaOrdenacao = "Coluna4"; break; case 5: colunaOrdenacao = "Coluna5"; break; } consulta = consulta.OrderByField(colunaOrdenacao, sSortDir_0 == "asc"); // Aqui eu usei um método de extensão para converter strings em uma expression linq: //<a href="http://ronniediaz.com/2011/05/24/orderby-string-in-linq-c-net-dynamic-sorting-of-anonymous-types/">http://ronniediaz.com/2011/05/24/orderby-string-in-linq-c-net-dynamic-sorting-of-anonymous-types/</a> // Adiciona paginação e já faz uma projeção dos dados através do select var resultadoConsulta = consulta.Skip(iDisplayStart).Take(iDisplayLength).Select( sel => new { Id = sel.Id, Coluna1 = sel.Coluna1, Coluna2 = sel.Coluna2, Coluna3 = sel.Coluna3, Coluna4 = sel.Coluna4, Coluna5 = sel.Coluna5 } ).ToArray(); var quantidadeTotalRegistrosAposPaginacao = resultadoConsulta.Count(); // pega o retorno e coloca em uma variável var retorno = new { sEcho = sEcho, iTotalRecords = quantidadeRegistrosSemFiltro, iTotalDisplayRecords = quantidadeTotalRegistrosAposPaginacao, aaData = resultadoConsulta }; // retorna o objeto que é automaticamente convertido para JSON pelo API controller return retorno; } }
- Código no lado do cliente:
<script type="text/javascript">// <![CDATA[ $(document).ready(function(){ $('.dataTable').dataTable({ "bJQueryUI": true, "bProcessing": true, "bServerSide": true, "sAjaxSource": "/api/produtos/getjdt", "aoColumns": [ { "mDataProp": "Coluna1" }, { "mDataProp": "Coluna2" }, { "mDataProp": "Coluna3" }, { "mDataProp": "Coluna4" }, { "mDataProp": "Coluna5"} ] }); }); // ]]></script>
Dessa forma o jQuery Data Table vai carregar os dados dinamicamente, com AJAX.
Importante:
- Número de colunas da tabela deve ser o mesmo retornado nos dados e na criação da data table especificar as colunas através da propriedade aoColumns como mostrado acima., para evitar um erro semelhante a esse:
DataTables warning (table id = ‘myTable’): Requested unknown parameter ‘2’ from the data source for row 0
Referências:
JQuery Datatables warning: Requested unknow parameter…
jQuery Mobile com Asp.Net Mvc 4
Recentemente foi necessário desenvolver um módulo de um aplicativo .net Windows Forms, que fosse acessível via dispositivo touch / mobile. Para reutilizar todas as regras de negócio, classes de domínio e camada de conexão a dados utilizei ASP.NET MVC 4 com jQuery Mobile.
Vale a pena ler a documentação com atenção, para evitar problemas. http://jquerymobile.com/demos/1.1.1/
De cara posso destacar os seguintes pontos:
- jQuery mobile utiliza fortemente o jQuery.
- Utiliza navegação via ajax, que permite transição de páginas com efeitos de transição.
- Forms com input de arquivo, não são suportados pelo Ajax, e por isso deve-se decorar o form de file send com o atributo:
data-ajax="false"
, pois por padrão, o jQuery Mobile posta os forms via ajax. - No set de elementos visuais do jQuery Mobile faz falta um Date Picker para seleção de datas.
Como as páginas são injetadas via Ajax para facilitar a transição, debugar javascript fica complicado, então em modo de debug, eu desativo completamente o Ajax do jQuery mobile, usando o evento “mobileinit”, e setando ajaxEnabled = false.
Quando do release, eu ativo novamente o ajax.
<script type="text/javascript"> $(document).bind("mobileinit", function () { $.mobile.ajaxEnabled = false; $.mobile.defaultPageTransition = "slideup"; }); </script>
Para carregar dados na página assincronamente, pode-se utilizar API Controllers, e requisitar os dados com a função getJSON.
Exemplo do preenchimento de um ComboBox (vulgo Select) utilizando ajax e um api controller que retorna os UFs do país:
<script type="text/javascript"> $(document).ready(function () { // Envia requisição AJAX $.getJSON("/api/uf/", function (estados) { // Se for bem-sucedido, 'estados' contém os dados retornados $.each(estados, function (index, estado) { $("<option value=" + estado.IdUf+ ">" + estado.Descricao + "</option>").appendTo($("#comboboxUf")); }); }); /* ------- combobox que receberá os dados --------- */ <select name="selectUf" id="comboboxUf"></select>
Código da Controller:
public class UfController : ApiController { // GET api/Uf public IEnumerable<Dominio.Uf> GetTodosEstados() { var sessaoNh = MvcApplication.ObterSessaoNh(); var crud = new DAL.UfDao(sessaoNh); return crud.Listar().ToArray(); }
No mais é só ler a documentação e utilizar os elementos visuais a vontade.
http://jquerymobile.com/demos/1.1.1/docs/forms/docs-forms.html
Renderizando uma Partial View com Ajax e jQuery MVC 3
Renderizar Partial Views com Ajax é útil pra acelerar e otimizar o carregamento da sua página.
No exemplo temos:
1 controller Home
1 view Mensagem
- Código do Controller:
public class HomeController : Controller { public ActionResult Mensagem() { ViewBag.MensagemRenderizar = "Esta mensagem é renderizada na view parcial"; return PartialView(); }
- Código da View:
<h2>@ViewBag.MensagemRenderizar</h2>
- Código no _Layout.cshtml
<div id = “result”> </div>
<script type="text/javascript"> $(function () { $('#result').load('/Home/Mensagem'); }); </script>
Utilizando o método Load do jQuery, é feita uma requisição ajax e retornado o conteúdo da view especificada.
Mais informações: http://api.jquery.com/load/