Hoy vengo con un ejemplo sencillo para la introducción al uso de Ajax en ASP con C#.
Primero que nada, descarguen la dll de Ajax aquí:
Ajax.dll
o de su pagina oficial.
Ahora, crearemos un WebSite con Visual Studio (yo tengo el VS2010).
Añadamos dos TextBox, un asp:Button y un "input type:button"
Como vemos el asp:Button ejecutará postback, y usaremos el button de html para correr el metodo de ajax. Bien sabemos que Ajax no es más que javascript, así que necesitamos un mínimo conocimiento de este script para hacer esto.
Aquí coloco unas imágenes de la pagina y de su código así como el código del codebehind en C#:
 |
| Imagen1.- Muestra la Pagina (aspx) tal y como la debes de ver tu |
 |
| Imagen2.- Codigo aspx de la pagina |
 |
| Imagen3.- Codigo C# del code behind de la pagina |
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!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>Prueba Ajax</title>
<script type="text/javascript" language="javascript">
function SumaDosNumeros_CallBack(response) {
document.getElementById("Label_Resultado").innerHTML = response.value;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server" />
<asp:TextBox ID="TextBox2" runat="server" />
<asp:label id="Label_Resultado" runat="server" >Resultado</asp:label>
<asp:Button ID="Button_Suma" runat="server" Text="Suma por Servidor" onclick="Button_Suma_Click" />
<input type="button" value="Suma con Ajax" onclick="Default2.SumaDosNumeros(TextBox1.value, TextBox2.value, SumaDosNumeros_CallBack);" />
</div>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Default2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Ajax.Utility.RegisterTypeForAjax(typeof(Default2));
}
protected void Button_Suma_Click(object sender, EventArgs e)
{
this.Label_Resultado.Text = Convert.ToString(Convert.ToInt32(this.TextBox1.Text) + Convert.ToInt32(this.TextBox2.Text));
}
[Ajax.AjaxMethod()]
public string SumaDosNumeros(int num1, int num2)
{
return (Convert.ToString(num1 + num2));
}
}
Bien comienzo con el tuto, lo anterior solo es para hacer referencia:
1.- Agregar referencia de Ajax
Se supone que ya tenemos un proyecto Web creado, para este ejemplo creamos un WebForm llamado Default2.aspx.
Agregamos la referencia a la dll de ajax:
- En el Solution Explorer clic derecho al WebSite y Add Reference.
- Pestaña Browse
- Buscamos Ajax.dll (la que descargamos anteriormente) y Ok
- Listo, Hemos agregado la dll, si la quieres localizar se encuentra en la carpeta Bin
 |
| Agregando la Referencia a Ajax.dll |
Ahora, un punto crítico, algunas veces al hacer esto no se agrega la configuración correspondiente al Web.Config, creo que esto tiene algo que ver con el .Net Framework que estés usando. El .Net Framework 4 parece no presentar problemas, pero el 2.0 si.
Así que por las dudas, vamos al Web.Config y verifica si existen las siguientes lineas.
<httpHandlers> <add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax" /> </httpHandlers> </system.web> <system.webServer> <modules runAllManagedModulesForAllRequests="true"/> <validation validateIntegratedModeConfiguration="false"/> </system.webServer>
Coloco una imagen del Web.config:
 |
| Chequen la parte inferior del Web.Config, httpHandlres y validateIntegratedModeConfiguration="false" son importantes |
Bien puedo decir que las lineas mas importantes son las 3 primeras, los httphandlres y la validacion de integracion validateIntegratedModeConfiguration="false" si esta línea no se encuentra es posible que te marque el Error 500.23, para evitar futuros contratiempos con el IIS y Ajax te recomiendo colocar estas lineas si faltaran de una vez .
Excelente querido lector, si bien, ahora crearemos una WebPage que lo único que hará es sumar de dos maneras distintas dos números localizados cada uno en una caja de texto diferente. Una de las maneras será usando la tradicional forma en PostBack que usan nativamente los eventos en ASP, la otra manera será usando Ajax, genial!!!!!!!!, el resultado de la suma será colocado en una Label.
Comenzamos................ =)
2.- Preparamos nuestra WebPage
Como había dicho antes, agregamos un WebForm llamado Default2.aspx, bueno, a este le agregamos 2 asp:TextBox (TextBox1 y TextBox2), le agregamos una asp:Label (Label_Resultado), un asp:Button (Button_Suma) y un input type="button".
Tal y como se muestra en las Imágen 1 y 2 al inicio de esta entrada.
3.- Creamos los Métodos, Funciones y Eventos
Bien llegó la hora de programar C# y javascript.
1.- En el evento PageLoad de Default.aspx.cs colocamos el siguiente código:
Ajax.Utility.RegisterTypeForAjax(typeof(Default2));
Podemos obervar el typeof. Esto quiere decir que debemos allí colocar el nombre de la clase de nuestra WebPage, en nuestro caso se llama Default2.
2.- Agregamos un método Click al asp:Button, y en el colocamos el siguiente código:
this.Label_Resultado.Text = Convert.ToString(Convert.ToInt32(this.TextBox1.Text) + Convert.ToInt32(this.TextBox2.Text));
3.- Bien ahora creamos un Método llamado SumaDosNumeros, y antes de él colocamos la llamada a métodos externos Ajax.AjaxMetrhod tal como coloco a continuación y como se puede apreciar en la imagen 3:
[Ajax.AjaxMethod()]
public string SumaDosNumeros(int num1, int num2)
{
return (Convert.ToString(num1 + num2));
}
4.- Bon, ahora nos iremos al código aspx, entra a Default.aspx para ver el código de la página, crea una función javascript llamada SumaDosNumeros_CallBack(response), tal como coloco a continuación, si vemos bien, que espero que sí (si no, creo que ya ocupamos lentes queridos lectores) el nombre de la función javascript es el mismo que el método en C# pero agregando al final de su nombre la palabra _CallBack y requiriendo el parámetro response:
<script type="text/javascript" language="javascript">
function SumaDosNumeros_CallBack(response) {
document.getElementById("Label_Resultado").innerHTML = response.value;
}
</script>
5.- C'est parfait, ahora agregamos al evento onclick del input type="button" una llamada al evento en C#, con la siguiente sintaxis:
nombrePage.NombreMetodoC#(parametro1, parametro2,...., parametro_n, nombreFuncionJavascript)
Por tanto el input te quedará de la siguiente manera:
<input type="button" value="Suma con Ajax" onclick="Default2.SumaDosNumeros(TextBox1.value, TextBox2.value, SumaDosNumeros_CallBack);" />
Wow, parece ser que casi acabamos, ahora sólo nos queda testear esto y listo
5.- Testeamos
Coloco una imagen de mi Debug corriendo en localhost:
Bien, aquí acaba mi parte,
si quieren la solución (.sln) de VS2010 esta aquí:
WebSite_Ajax
ya saben, coloquen el .sln en:
C:\Users\NombreUsuario\Documents\Visual Studio 2010\Projects\WebSite_PruebaAjax
y los archivos del website en:
C:\Users\ NombreUsuario \Documents\Visual Studio 2010\WebSites\WebSite_PruebaAjax
Por favor, dejen sus comentarios, dudas, quejas y sugerencias para poder mejorar esta entrada y el blog en general, ya saben comentar es agradecer
Saludos a todos.
Tags:
- Ajax
- ASP
- C#
- Como usar Ajax
- Usar Ajax con ASP
- Usar Ajax con C#
- Correr Metodos de C# desde el cliente
- Ejecutar codigo C# con javascript
- Error HTTP 500.23 - Internal Server Error
Se ha detectado una configuración de ASP.NET que no se aplica en el modo integrado de canalización administrada.
No hay comentarios:
Publicar un comentario