Skip to content

Instantly share code, notes, and snippets.

@willnss
Created May 6, 2012 18:16
Show Gist options
  • Save willnss/2623613 to your computer and use it in GitHub Desktop.
Save willnss/2623613 to your computer and use it in GitHub Desktop.
Implementando ajax com ASP.NET (Versão .Net Framework 2.0) (baiano mode-on)
//ASPX com o código HTML
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WTRFramework._Default" %>
<%@ Register src="WebControl.ascx" tagname="WebControl" tagprefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
// ( -> Install-Package JQuery)
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('input[type=button]').click(function () {
$('#Loading').css({ display: 'inline-block' });
$('#div_result').html('');
//Função Registrada na página que irá enviar as informações par ao Servidor
CallServer($(this).parent().parent().parent().find('input[type=text]').serialize(), $('#form1').serialize());
});
});
//Função que recupera a resposta do servidor
function ReceiveServerData(arg, context) {
a = arg, c = context;
var div = document.getElementById('div_result');
div.innerHTML = a;
$('#Loading').css({display:'none'});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<uc1:WebControl ID="WebControl1" runat="server" />
<div id="div_result">
</div>
</form>
</body>
</html>
//Arquivo com o código implementado na classe
//Aqui essa classe herda de UserControl, para poder transformar um controle ASCX em um componente Ajax.
using System;
using System.Collections.Generic;
using System.Web;
using System.Threading;
using System.Web.UI;
using System.IO;
namespace WTRFramework
{
public class WTRAjaxForm : UserControl, ICallbackEventHandler
{
public string GetResultCallBack { get; set; }
public Page ComponentControl {get;set;}
public WTRAjaxForm() { }
public void SetAjaxScriptConfig()
{
ClientScriptManager cm = this.Page.ClientScript;
//Registra a função de CallBack no Cliente
//Essa função é (WebForm_DoCallback) implementada pelo próprio asp.net
//"ReceiveServerData" -> Essa é a função que será implementada no cliente, esperando a resposta do server.
String cbReference = cm.GetCallbackEventReference(this, "arg", "ReceiveServerData", "context");
//Cria a função "CallServer" e registra na página cliente
String callbackScript = "function CallServer(arg, context) {" + cbReference + "; }";
cm.RegisterClientScriptBlock(this.GetType(), "CallServer", callbackScript, true);
}
//Função implementada pela Interface
//Essa função retorna os dados HTML do component e, esse resultado, será recuperado através da função
//"ReceiveServerData" no parâmetro "arg"
public string GetCallbackResult()
{
Thread.Sleep(2000);
string[] arResul = GetResultCallBack.Split('&');
StringWriter pTextWriter = new StringWriter();
HtmlTextWriter writer = new HtmlTextWriter(pTextWriter);
writer.Write("<div style=\"border:1px solid #efefef; width: 500px;\">");
writer.Write("<p style=\"margin: 0; padding: 2px; border: 1px solid #fff; background-color: #eee; font-family: Arial; font-size: 0.8em\">Resultado</p>");
foreach (string s in arResul)
{
writer.Write("<p>" + s.Split('=')[1] + "</p>");
}
writer.Write("</div>");
return pTextWriter.ToString();
}
//Função implementada pela Interface
//Essa função recupera os Argumentos enviados pela função javascript
public void RaiseCallbackEvent(string eventArgument)
{
GetResultCallBack = eventArgument;
}
}
}
//Código HTML do controle ASCX
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebControl.ascx.cs" Inherits="WTRFramework.WebControl" EnableViewState="false" %>
<div id="div_Component" runat="server">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><label for="edtNome">Nome:</label></td>
<td><input type="text" name="edtNome" value="" /></td>
</tr>
<tr>
<td><label for="edtEmail">E-Mail:</label></td>
<td><input type="text" name="edtEmail" value="" /></td>
</tr>
<tr>
<td><label for="edtCodigoAcesso">Código Acesso:</label></td>
<td><input type="text" name="edtCodigoAcesso" value="" /></td>
</tr>
<tr>
<td><label for="edtCargo">Cargo:</label></td>
<td><input type="text" name="edtCargo" value="" /></td>
</tr>
<tr>
<td><label for="edtDepartamento">Departamento:</label></td>
<td><input type="text" name="edtDepartamento" value="" /></td>
</tr>
<tr>
<td></td>
<td>
<input type="button" name="btnEnviar" value="Enviar" /><p id="Loading" style="margin:0; position:absolute; padding: 5px; font-size: 0.8em; display: none;"><img src="loading1.gif" /> Loading...</p>
</td>
</tr>
</table>
</div>
//Código C# do controle
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Threading;
namespace WTRFramework
{
//Classe herda do Controle AJAX
public partial class WebControl : WTRAjaxForm
{
protected void Page_Load(object sender, EventArgs e)
{
//Chama a função que configura o javascript ajax na página do cliente.
this.SetAjaxScriptConfig();
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment