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.
Até breve 😉