Neste artigo veremos como podemos usar os recursos do Ajax em aplicações ASP .NET MVC.
Revisão de Conceitos – Teoria
AJAX – é um acrônimo para Asynchronous JavaScript and XML e é constituído por um conjunto de tecnologias como JavaScript, HTML, CSS, DHTML e DOM.
A tecnologia AJAX é uma avanço na tentativa de se construir uma ponte entre a funcionalidade e a interatividade de uma aplicação desktop e uma aplicação web. A ideia é permitir a criação de uma interface e de controles em uma aplicação web com os mesmos recursos encontrados nas aplicações dekstop (esta síndrome também é conhecida como “saudades (ou inveja) do desktop” rs).
Obs: Na verdade, AJAX não é uma linguagem de programação , nem um Framework, nem um padrão. É apenas um conceito lançado inicialmente por Jesse James Garret (que nome hein?!) no artigo Ajax: A New Approach to Web Applications, em 18 de fevereiro de 2005.
Na prática, usando AJAX, podemos postar informações para o servidor sem a necessidade de enviar a página inteira, recebendo de volta apenas uma parte da informação, sem a necessidade de ter que atualizar a página inteira.
Desde o seu lançamento, a tecnologia AJAX evoluiu e não usamos XML para a comunicação – usamos o JSON (JavaScript Object Notation) no lugar. Assim, o JSON é um protocolo leve para intercâmbio de dados e está baseado em um subconjunto da linguagem de programação JavaScript, sendo independente desta e de qualquer linguagem.
JSON lembra XML:
- JSON é texto simples;
- JSON é “auto-descritivo” (legível);
- JSON é hierárquico (valores dentro de valores);
- JSON pode ser analisado pelo JavaScript;
- JSON os dados podem ser transportadas usando AJAX.
Mas é diferente de XML:
- Não utiliza a tag de fechamento;
- É mais curto e simples;
- É mais rápido de ler e escrever;
- Pode ser analisado usando a função eval() do JavaScript;
- Utiliza matrizes;
- Não possui palavras reservadas;
- Possui parser nas principais linguagens e navegadores.
Usamos JSON porque ele é menor do que XML, mais rápido e mais fácil de analisar.
Quando desenvolvemos aplicações para web, usamos um navegador e no nosso caso o framework ASP .NET MVC e jQuery. Neste cenário a responsabilidade de comunicação é do navegador e encapsulamos a lógica da comunicação usando jQuery.
Quando usamos jQuery, a forma básica para se comunicar de forma assíncrona com o servidor é usar o método $.ajax.
Se você consultar a API jQuery verá que a sintaxe usada neste método é:
jQuery.ajax( url [, settings ] )
Neste método podemos definir a url, o método de retorno (para sucesso/falha), o tipo de dados passado (Content-Type como Json, xml, text etc.), HTTP (get, post etc.)
Neste artigo, eu vou usar os métodos get() e post() do jQuery-AJAX, visto que eles abstraem o método $.ajax sendo usados para requisitar dados do servidor usando um HTTP GET ou POST.
GET é utilizado basicamente para recuperar dados do servidor(o método GET pode retornar dados em cache). POST também pode ser usado para obter alguns dados do servidor. No entanto, o método POST nunca armazena dados em cache, e muitas vezes é usado para enviar dados junto com o pedido.
Nota: Estes métodos invocam o método $.ajax, passando no parâmetro type o tipo post ou get.
Recursos usados: Visual Studio Community 2013 e ASP .NET 4.5
Usando chamadas jQuery Ajax GET e POST para métodos de controladores
Para atingir o nosso objetivo, vamos realizar as seguintes tarefas:
- Usar o método get() para obter informações do servidor;
- Usar o método get() para enviar informações para o servidor;
- Usar o método post() para enviar informação ao servidor usando parâmetros e objetos.
1. Criando o projeto ASP .NET MVC
Abra o VS Community 2013 clique em New Project e selecione Visual Basic (ou Visual C#) -> web e o template ASP .NET Web Application e informe o nome Mvc_Get, clicando no botão OK logo após.
A seguir, selecione o template Empty e marque a opção MVC e clique no botão OK.
Vamos incluir em nosso projeto o pacote jQuery Unobtrusive clicando no menu TOOLS e, a seguir, em Nuget Package Manager -> Manage Nuget Package for Solution.
Selecione o pacote Microsoft jQuery Unobtrusive AJax e clique em Install.
Os arquivos do jQuery Unobtrusive serão copiados na pasta Scripts.
2. Usando GET
Agora vamos criar um controlador na pasta Controllers. Clique com o botão direito sobre esta pasta e a seguir clique em Add -> Controller.
Selecione a opção – MVC 5 Controller Empty – e clique no botão Add.
A seguir, na janela Add Controler, informe o nome: HomeController e clique no botão Add (será criado o controlador HomeController com o método Index()). Vamos incluir no controlador HomeController o método DataHoraAtual, conforme o código a seguir:
using System; using System.Web.Mvc; namespace Mvc_Get1.Controllers { public class HomeController : Controller { // GET: Home public ActionResult Index() { return View(); } public string DataHoraAtual() { return DateTime.Now.ToString("dd/MM/yyyy hh:mm:ss"); } } }
Agora vamos criar uma view para o método Index(). Clique com o botão direito do mouse sobre o método Index() e, a seguir, clique em Add View.
Na janela Add View, aceite o nome Index e o template Empty(without model) e clique no botão Add.
Será criado na pasta /Views/Home o arquivo Index.cshtml. Vamos incluir o código abaixo neste arquivo:
<!DOCTYPE html> <html> <head> <title>Usando Get</title> <script src="@Url.Content("~/Scripts/jquery-1.10.2.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script> <script type="text/jscript"> var url = "/Home/DataHoraAtual"; $.get(url, null, function (data) { $("#rData").html(data); }); </script> </head> <body> <p id="rData"></p> </body> </html>
Neste código, após referenciar as bibliotecas jQuery e jQuery Unobtrusive, definimos um script onde estamos chamando o método DataHoraAtual do controladorHomeController.
Quando a página for carregada (Load), o jQuery Ajax irá gerar uma chamada Ajax GET:
- O primeiro parâmetro é a URL;
- O segundo são os dados (este parâmetro é opcional e por isso informamos null);
- O terceiro é função que recebe os dados de resposta : function (data).
A função recebe um parâmetro “data” que contém o conteúdo texto, a seguir anexamos este conteúdo a um elemento DOM onde usamos o elemento <p> identificado por ‘rData’ para exibir o resultado.
Executando o projeto iremos obter:
Para gerar uma requisição AJAX GET quando o usuário clicar em um botão na página, basta alterar o código do arquivo Index.cshtml conforme abaixo:
<!DOCTYPE html> <html> <head> <title>Usando Get</title> <script src="@Url.Content("~/Scripts/jquery-1.10.2.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script> <script type="text/javascript"> $('#btnExibir').click(function () { var url = "/Home/DataHoraAtual"; $.get(url, null, function (data) { $("#rData").html(data); }); }) </script> </head> <body> <p id="rData"></p> <input type="submit" id="btnExibir" value="Exibir Data Hora" /> </body> </html>
3. Usando POST
Existem várias maneiras para postar dados do formulário. Veremos um exemplo bem simples.
Vou usar apenas duas caixas de texto e um botão de envio, quando o usuário clicar no botão de comando vamos salvar os dados via chamada jQuery Ajax POST. O nosso método vai aceitar o nome e endereço como parâmetros.
Para realizar essa tarefa, vamos incluir no controlador HomeController o método SubmeterInscricao() que recebe o nome e endereço e ‘salva’ os dados:
O código pode ser visto abaixo:
[HttpPost] public string SubmeterInscricao(string Nome, string Endereco) { if (!String.IsNullOrEmpty(Nome) && !String.IsNullOrEmpty(Endereco)) //TODO: salvar dados no banco de dados return "Obrigado " + Nome + ". O dados foram Salvos."; else return "Complete a informação do formulário."; }
Vamos agora definir o código a seguir no arquivo Index.cshtml para chamar esse método usando um jQuery AJAX POST.
<!DOCTYPE html> <html> <head> <title>Usando Post</title> <script src="@Url.Content("~/Scripts/jquery-1.10.2.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script> <script type="text/javascript"> $('#Salvar').click(function () { var url = "/Home/SubmeterInscricao"; var nome = $("#Nome").val(); var endereco = $("#Endereco").val(); $.post(url, { Nome: nome, Endereco: endereco }, function (data) { $("#msg").html(data); }); }) </script> </head> <body> <p> Informe seu nome <br /> @Html.TextBox("Nome") </p> <p> Informe seu endereço <br /> @Html.TextBox("Endereco") </p> <input type="button" value="Salvar" id="Salvar" /> <span id="msg" style="color:red;" /> </body> </html>
Neste código, usamos o método post() para enviar os dados do textbox Nome e Endereco.
Executando o projeto, teremos o resultado acima.
Na continuação deste artigo veremos como tratar com dados complexos em requisições jQuery Get e Post.
Pegue o projeto sem as referências aqui: Mvc_Get1.zip