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 😉
