Início > ASP.NET MVC > jQuery Mobile com Asp.Net Mvc 4

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

Anúncios
  1. Nenhum comentário ainda.
  1. No trackbacks yet.

Deixar uma Anotação

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

dotnettips.wordpress.com/

Helping Programmers Since 1994

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

blog

so long

Fernando Franzini Blog

Engenharia de Software e Arquitetura Ágil

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: