JQUERY en ASP

[el_chileno]

jQuery, Ajax y ASP.NET WebForms Publicado: 27/02/2009
Leído: 673 veces
Lectura: 0 minutos Categoría: AJAX y Javascript
Valoracion: 8


Admito que al principio era reticente a usar jQuery. Al fin y al cabo, todo lo que hace jQuery se puede hacer con javascript, y no lo veía más que como otro framework javascript más.

Sin embargo, conforme he ido utilizándola por necesidades de nuestro nuevo proyecto en Avanzis, más me ha ido gustando... y ahora me es prácticamente imprescindible :D

De la funcionalidad que quería hablar es sobre cómo se trabaja con Ajax en jQuery, y su aplicación para ASP.NET Webforms (con ASP.NET MVC es algo más fácil).

En la página oficial de jQuery encontramos una muy buena documentación de su uso con Ajax. Personalmente el método que más uso es el de getJSON.

Vayamos directamente al ejemplo. Bien sencillo: tenemos un TextBox y un Button. En el texto escribiremos un entero, y al presionar sobre el botón se ejecutará una función jQuery/Ajax que enviará el dato a servidor. En el servidor procesaremos el dato y devolveremos un resultado que nuestro javascript procesará. Vamos una ida-y-vuelta al navegador usando Ajax.

Nuestro HTML:
<input type="text" id="box" />
<input type="button" id="button" />

Nuestro javascript:
$(document).ready(function() {
$('#button').click(function() {
var idValue = $('#box').val();
if (idValue && (idValue != '')) {
sendData(idValue);
}
});
});

function sendData(idValue) {
var actionData = { id: idValue };
$.getJSON('/test/ajaxtest.aspx', actionData, function(data) {
if (data == true) {
alert('par');
}
else if (data == false) {
alert('impar');
}
});
};

Nuestro código en servidor:
protected void Page_Load(object sender, EventArgs e)
{
if (!string.IsNullOrEmpty(Request.QueryString["id"]))
{
int id = Convert.ToInt32(Request.QueryString["id"]);

if (id%2 == 0)
returnJSON(true);

returnJSON(false);
}
}

protected void returnJSON(object data)
{
if (data.GetType() == typeof(bool))
data = data.ToString().ToLower();


Response.Clear();
Response.ContentType = "application/json";
Response.Flush();
Response.Write(data);
Response.End();
}


Como vemos, en nuestro código javascript lo primero que hacemos es decirle al navegador que en el momento esté preparado ("ready") coja el elemento con el identificador "button" y le asigne una función a su evento "click".

Dicha función lo único que hace es coger el valor del elemento con identificador "box", y si este valor es válido se ejecuta la funcion "sendData". La función "sendData" es la importante... y para ser importante es bien sencillita :D

Lo primero que hacemos es crear el elemento JSON, que será el dato que mandaremos a servidor.

Luego ejecutamos la función getJSON. Ésta se compone de tres parámetros. El primero es la URL a la que apuntamos. En nuestro caso ponemos un página .aspx normal y corriente. También podríamos crearnos un HttpHandler que gestionara todas las llamadas AJAX, o si estuvieramos usando ASP.NET MVC no tendríamos más que poner la ruta correspondiente.

El segundo parámetro es la variable json con los datos que enviaremos a servidor. Y el tercer parámetro es la función que se ejecutará cuando vuelva de servidor y que luego analizaremos. Lo importante de esta función es que el dato que devuelven ya está en JSON, con lo que es muy fácil trabajar con él.

En cuanto al código de servidor, también es muy sencillo. Lo único que hace es recoger el dato que hemos enviado (y que en este caso se recibe como querystring), tratarlo y devolver una respuesta.

El quid de la cuestión está en que la respuesta debe ser un JSON, de lo cual se encarga el método "returnJSON". En nuestro ejemplo sólo devolvemos true o false, pero si creamos una variable JSON cualquiera igual nos vale (por ejemplo "{text:'texto de respuesta'}").

Y volviendo a la función javascript, vemos que tratar con JSON es muy sencillo. En nuestro caso sólo tratamos el "true" o el "false". Para mí es muy común trabajar sólo con eso, puesto que lo normal es mandar un dato a servidor, realizar una acción y devolver un booleano como diciendo "todo correcto" o "ups, ha habido un error".

Fácil, ¿no?


cuando encuentre el link perdido lo subo y SI tienen que ver porlo que dice este articulo que pronto probare.
sino funciona comentare

saludos y mas tolerancia no creen?