Arquivo

Posts Tagged ‘ajax’

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

grid jquery data tables

Grid do jQuery DataTables

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…

Using MVC 4 Web Api with jQuery DataTables

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

11 - 11 3 comentários

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/

guiaecologico.wordpress.com/

Despertando a consciência que preserva!

Viagem e Voo

Dicas para viagens, férias e voos nacionais e internacionais

Ivan Guimarães Meirelles

Analista Desenvolvedor

Void Podcast

Vazio e sem retorno de valor

Elemar DEV

Negócios, tecnologia e desenvolvimento

2,000 Things You Should Know About WPF

Everything a WPF Developer Needs to Know, in Bite-Sized Chunks

Gabriel RB.net

Blog técnico, com dicas, códigos, novidades e problemas do dia-a-dia programando.

Alexandre Valente's Blog

Experiências em tecnologia e assuntos diversos

%d blogueiros gostam disto: