Created
May 6, 2012 18:16
-
-
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)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//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