willnss/gist:2623613

## gistfile1.cs
//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();
        }
    }
}
	//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();
	}
	}
	}