O título pode parecer demasiado confuso com a utilização de tantos termos, no entanto estou confiante que no fim do artigo, vai estar de acordo com a escolha.
Recentemente deparei-me com uma nova situação, por um lado necessitava de toda a interactividade e flexibilidade proporcionada pelo jQuery no cliente mas também queria continuar a utilizar no lado do servidor Microsoft ASP.NET de forma convencional, ou seja, eu precisava do melhor dos dois mundos.
Depois de executar alguns testes, encontrei rapidamente alguns entraves, limitações e complexidades, o que me levou à procura de uma solução simples e eficaz.
Deparei-me com um cenário em que o utilizador necessitava de preencher um formulário extenso, para tornar mais agradável a experiência do utilizador, para isso implementei vários plugins do jQueryUI, conforme se pode verificar nas imagens em baixo.
A informação a inserir é extensa e necessita de validação no lado do servidor, não se torna prático executar tudo isso postback atrás de postback até estar tudo correcto, utilizar update panels torna-se demasiado complexo para o tipo de validação necessário e a biblioteca Ajax do ASP.NET não é das mais agradáveis de utilizar quando necessitamos de performance, optei por isso experimentar utilizar o método Ajax disponibilizado pelo jQuery.
Para simplificar o artigo, e porque o que realmente interessa é o conceito, optei por criar um formulário de teste cujo objectivo é adicionar um cliente ao sistema.
Depois adiciona-se um novo item ao projecto, um Generic Handler
Visto de uma forma mais simplista, um Generic Handler é uma página ASP.NET que contém apenas um método e não suporta eventos nem controlos.
De seguida vamos adicionar um novo ficheiro JS e utilizando método Ajax da biblioteca jQuery, vai ser chamado o Generic Handler AdicionarClienteHandler.
A função Ajax é de simples implementação, como se pode verificar ao analisar o script apresentado.
$(document).ready(function () { //activa o plugin Tabs $(function () { $("#tabs").tabs(); }); //método adicionar cliente $('#btnAdicionar').click(function () { $.ajax({ url: '../../Handlers/AdicionarClienteHandler.ashx', data: $('form').serialize(), type: 'POST', success: function (data) { alert('Cliente adicionado com sucesso.'); $('#listClientes').append(data); }, error: function (data) { alert("Ocorreu um erro ao processar o seu pedido."); } }); }); });
O utilizador vai preencher o formulário e quando é executado o click sobre o botão adicionar, vai ser executado o script apresentado anteriormente.
Este script vai serializar todos os campos de input que se encontram dentro da tag <form> e enviar esta informação para o Generic Handler através de um POST executado de forma assíncrona.
Depois o Generic Handler vai processar a informação enviada, executar as suas validações e construir a resposta.
using System; using System.Linq; using System.Web; using System.Text; using System.Collections.Generic; using System.Collections.Specialized; namespace WebApplication1.Handlers { public class AdicionarClienteHandler : IHttpHandler { public void ProcessRequest(HttpContext context) { var form = context.Request.Form; context.Response.ContentType = "text/html"; context.Response.Write(ProcessaFormulario(form)); } protected string ProcessaFormulario(NameValueCollection form) { string username, nome, email, telefone, telemovel, fax; nome = form["txtNome"]; username = form["txtUsername"]; email = form["txtEmail"]; telefone = form["txtTelefone"]; telemovel = form["txtTelemovel"]; fax = form["txtFax"]; var buildResponse = new StringBuilder(); buildResponse.AppendLine("<div class=\"DefaultRow\">"); buildResponse.AppendLine(string.Format("<h6>{0}</h6>", nome)); buildResponse.AppendLine(string.Format("<span class=\"DafaultRowLabel\">Username: {0}</span>", username)); buildResponse.AppendLine(string.Format("<span class=\"DafaultRowLabel\">Email: {0}</span>", email)); buildResponse.AppendLine(string.Format("<span class=\"DafaultRowLabel\">Telefone: {0}</span>", telefone)); buildResponse.AppendLine(string.Format("<span class=\"DafaultRowLabel\">Telemóvel: {0}</span>", telemovel)); buildResponse.AppendLine(string.Format("<span class=\"DafaultRowLabel\">Fax: {0}</span>", fax)); buildResponse.AppendLine("</div>"); return buildResponse.ToString(); } public bool IsReusable { get { return false; } } } }
A resposta por sua vez, é a informação do cliente formatada de acordo com a forma pretendida e pronta para ser adicionada à lista de clientes.
Tudo isto é executado de forma assíncrona, simples, eficaz e sem a necessidade de executar qualquer postback.
/*Versão JSON*/
Depois de verificar que surgiram alguns pedidos relativamente à utilização de JSON na resposta do Generic Handler, deixo aqui as alterações necessárias:
using System; using System.Linq; using System.Web; using System.Text; using System.Collections.Generic; using System.Collections.Specialized; using System.Web.Script.Serialization; namespace WebApplication1.Handlers { public class AdicionarClienteHandler : IHttpHandler { public void ProcessRequest(HttpContext context) { var form = context.Request.Form; var serializer = new JavaScriptSerializer(); context.Response.Charset = "utf-8"; context.Response.ContentType = "application/json"; context.Response.Write(serializer.Serialize(JsonResponse(form))); } public List<string> JsonResponse(NameValueCollection form) { string username, nome, email, telefone, telemovel, fax; var lista = new List<string>(); nome = form["txtNome"]; username = form["txtUsername"]; email = form["txtEmail"]; telefone = form["txtTelefone"]; telemovel = form["txtTelemovel"]; fax = form["txtFax"]; lista.Add(nome); lista.Add(username); lista.Add(email); lista.Add(telefone); lista.Add(telemovel); lista.Add(fax); return lista; } public bool IsReusable { get { return false; } } } }
Como podemos verificar na imagem em baixo, a resposta é agora JSON
O projecto de teste aqui demonstrado , desenvolvido em Visual Studio 2010, está disponível para download aqui.
Referências:
http://api.jquery.com/serialize/
