#desenvolvimento

Como utilizar jQuery + AJAX + Handler?


Olá leitores.

Continuando a ~onda~ de posts sobre jQuery dessa vez iremos fazer algo um pouco além do código HTML. Neste post veremos como é possível implementar uma comunicação entre HTML e C# sem utilizar ASP.NET WebForms nem ASP.NET MVC. Para isto utilizaremos os Handlers, que no final das contas é uma classe C#. E para ficar ainda melhor iremos utilizar AJAX e Twitter Bootstrap também.

Então vamos lá.

No Visual Studio, crie um novo projeto ASP.NET Empty Web Application. Com o projeto criado será preciso adicionar:

  • um arquivo HTML denominado index.html.
  • um arquivo Generic Handler denominado Handler.ashx.
  • uma pasta denominada javascript.
  • uma pasta denominada twitter-bootstrap.

Na pasta javascript deverá conter os arquivos:
jquery-1.7.2.min.js
less-1.3.0.min.js
jquery.form.js

E na pasta twitter-bootstrap deve conter apenas as pastas img, js e less contidas nos fontes do Twitter Bootstrap.

No arquivo index.html vamos adicionar as referências aos arquivos CSS:

<link rel="stylesheet/less" type="text/css" href="twitter-bootstrap/less/bootstrap.less">
<link rel="stylesheet/less" type="text/css" href="twitter-bootstrap/less/responsive.less">

E as referências aos arquivos JS:

<script src="javascript/less-1.3.0.min.js"></script>
<script src="javascript/jquery-1.7.2.min.js"></script>
<script src="javascript/jquery.form.js"></script>
<script src="twitter-bootstrap/js/bootstrap-modal.js"></script>

O código abaixo cria um formulário com apenas um campo e um botão. Adicione-o dentro da tag body do arquivo index.html:

<div class="span5 form-horizontal">
   <!-- Formulário -->
   <form id="form-enviar-email">
      <fieldset>
         <legend>Formulário</legend>
         <!-- Campo de e-mail -->
         <div class="control-group">
            <label for="txt-email" class="control-label">E-mail</label>
            <div class="controls">
               <div class="input-prepend">
                  <span class="add-on"><i class="icon-envelope"></i></span><input id="email" required style="text-transform: lowercase;" class="input-xlarge" placeholder="Digite seu e-mail" name="txt-email" type="email">
               </div>
            </div>
         </div>
         <!-- Botão para enviar -->
         <div class="span5 form-actions">
            <button id="btn-adicionar" type="submit" class="btn btn-primary">Enviar</button>
         </div>
      </fieldset>
   </form>
</div>

Vamos adicionar uma div com um modal para exibir o valor digitado no campo:

<!-- Modal -->
<div class="modal hide" id="div-modal">
   <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">×</button>
      <h3>Mensagem</h3>
   </div>
   <div class="modal-body">
      <!-- E-mail digitado no formulário -->
      <span id="span-email"></span>
   </div>
   <div class="modal-footer">
      <a href="#" class="btn" data-dismiss="modal">Fechar</a>
   </div>
</div>

E para finalizar o conteúdo do arquivo index.html é necessário acrescentar o código responsável pela comunicação com o Handler utilizando o jQuery Form Plugin.

<script type="text/javascript">
   $(document).ready(function () {

      // Adicionar evento de click ao botão "Enviar".
      $('#btn-enviar').click(function () {

         // Cria um conjunto de opções para envio do formulário.
         var opcoes = {

            type: 'POST',        // Define o método de envio como POST.
            url: 'Handler.ashx', // Define qual Handler será chamado.

            // Função executada se a comunicação acontecer corretamente.
            success: function (data) {

               // Adiciona o retorno no Handler para o span contido no modal.
               $('#span-email').html(data);

               // Exibe o modal.
               $('#div-modal').modal();
            },
            // Trata o erro caso aconteça alguma falha na comunicação.
            error: function (data) {
               alert("Ocorreu um erro ao executar a operação.");
            }
         };
         // Prepara o formulário para submissão via AJAX.
         $('#form-enviar-email').ajaxForm(opcoes);
      });
   });
</script>

Falta ainda o código para o Handler funcionar. Precisamos de dois métodos:
ProcessRequest – que é invocado quando o Handler for chamado pelo formulário.

public void ProcessRequest(HttpContext context)
{
   // Obtém o formulário.
   NameValueCollection formulario = context.Request.Form;
   context.Response.ContentType = "text/html";

   // Escreve o retorno do método para a saída do HTTP atual.
   context.Response.Write(ObterEmailInformado(formulario));
}

ObterEmailInformado – que captura o valor informado no campo.

protected string ObterEmailInformado(NameValueCollection formulario)
{
   // Obtém o valor do campo "txt-email".
   string email = formulario["txt-email"];

   // Cria a string de retorno com o e-mail digitado.
   StringBuilder conteudoHtml = new StringBuilder(string.Format("Email: {0}", email));

   return conteudoHtml.ToString();
}

É isso! A príncipio parece algo difícil de entender, mas tentei fazer com que o código ficasse bem simples e espero que seja útil para quem precisar fazer esse tipo de implementação.

Baixe o código completo.

Até breve 😉

Anúncios
Padrão

Deixe um comentário

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