Hola, hoy
veremos como utilizar ajax de una manera muy sencilla, esto se logra atreves de
los PageMethods, estos se comunicaran con un WebMethod que este en nuestro código
de la pagina (del lado del servidor) .
Lo
primero que aremos es definir nuestro WebMethod, esto significa que a nuestro método
lo decoraremos con el atributo [WebMethod], ejemplo:
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
using
System.Web.Services;
using
System.Web.UI;
using
System.Web.UI.WebControls;
namespace
WebApplication2
{
public partial class _Default :
System.Web.UI.Page
{
[WebMethod]
public static List<Persona>
SendForm(string name)
{
////return name + " - Fue al
servidor";
List<Persona> p = new
List<Persona>();
p.Add(new Persona("Nombre
1", 26));
p.Add(new
Persona("Nombre 2", 26));
return p;
}
protected void Page_Load(object sender,
EventArgs e)
{
}
}
public class Persona
{
public Persona()
{
}
public
Persona(string nombre, int edad)
{
Nombre = nombre;
Edad = edad;
}
public string Nombre
{
get; set;
}
public int Edad
{
get; set;
}
}
}
Cabe
aclarar que un un PageMethod podrá retornar casi cualquier tipo de datos que
regrese el WebMethod, en este ejemplo retorna una lista de objetos de tipo
Persona.
Ahora
del lado del cliente definimos lo siguiente:
1. Habilitar
los PageMethods
Lo que hay que hacer
para permitir PageMethods es prender una propiedad de nuestro ScriptManager.
<asp:ScriptManager ID="ScriptManager1"
runat="server" EnablePageMethods="true">
<Scripts>
<asp:ScriptReference
Path="~/Scripts/Default.js" />
</Scripts>
</asp:ScriptManager>
Tambien aprovechamos para hacer
referencia a nuestro js que contiene las funciones que utilizaremos.
2. Crear
nuestro script (Default.js)
Esta es la función que
llamaremos desde el click de un botón (el nombre es indistinto), el objeto
PageMethods contiene los webMethods que tengamos en nuestro codigo de la pagina (en el
.cs)
function SendForm() {
var name =
$get(textBox1).value;
PageMethods.SendForm(name,
OnSucceeded, OnFailed);
}
Las funciones de OnSucceeded y OnFailed deben ser incluidas como parámetros en la ejecución de nuestro PageMethod PageMethods.SendForm(name, OnSucceeded, OnFailed), y el primer parámetro es parte de nuestro WebMethod.
Esta function cacha
el resultado de nuestro webMethod:
function OnSucceeded(lista) {
$get(lblPrueba).innerHTML =
string;
}
Esta function es
utilizada para cachar un possible error:
function OnFailed(error) {
alert(error.get_message());
}
3. En
el aspx:
<p>
<asp:TextBox
ID="TextBox1" runat="server"></asp:TextBox>
<asp:UpdatePanel
ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button
ID="Button1" runat="server" Text="Button"
OnClientClick="SendForm();" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:Label
ID="LblPrueba" runat="server"
Text="Label"></asp:Label>
</p>
<script
type="text/javascript">
var lblPrueba =
'<%=LblPrueba.ClientID %>';
var textBox1 = '<%=TextBox1.ClientID
%>';
</script>
Como ven esta manera de utilizar ajax es muy facil y te olvidas de mandar a llamar un pagina y en el load procesar la petición... entre otras cosas, de esta forma el codigo queda en la misma pagina y se manda a llamar de una manera transparente.
Espero que esto les sea de utilidad.
Lo que se puede imaginar ... se puede programar
