ASP.NET y AJAX con JQUERY
ASP.NET AJAX Control Toolkit podéis bajarlo desde la web de asp.net.
Descargar JQuery
En las páginas que utilicen jquery se debe incluir el fichero jquery.js:
<head><script src=”js/jquery.js” type=”text/javascript”></script></head>
Una vez incluido ya podremos utilizar jquery y ajax.
¿Cómo utilizar ajax con jquery?.
Al final del artículo he preparado un ejemplo en c# y vb.net. El ejemplo consiste en: dos combos y un listado. El primer combo se carga al iniciar la página, el segundo combo se carga con ajax y jquery al seleccionar un elemento del primer combo y el listado se carga con ajax y jquery cuando se selecciona un elemento del segundo combo.
Tenemos dos combos en nuestra página aspx
<asp:DropDownList ID=”comboCustomer” runat=”server” OnChange=”change();”></asp:DropDownList>
<asp:DropDownList ID=”comboOrder” runat=”server” OnChange=”changeOrder();”></asp:DropDownList>
El primer combo (comboCustomer) se carga al iniciar la página aspx y en el combo se define una función JavaScript en el evento OnChange, “change()” esta función está hecha en jquery:
function change() {
Definimos que es una function jquery-ajax
$.ajax({
El tipo de envio es POST (podriamos hacer un GET)
type: “POST”,
Definimos la URL donde hará el POST
url: “ajax/load_ordersCustomer.ashx”,
Definimos los valores del POST, ésto seria así:
load_ordersCustomer.ashx?Customer=VALOR
data: “Customer=” + document.getElementById(“comboCustomer”).
options[document.getElementById("comboCustomer").selectedIndex].value,
Cuando acabe de procesarse el script (load_ordersCustomer.ashx), el texto que me devuelve (en html) lo colocas en el ID comboOrder que es nuestro segundo combo.
success: function(html){
$(“#comboOrder”).html(html);
}
});
}
Con esta función lo que hacemos es enviar un POST a la página load_ordersCustomer.ashx y esa página nos devolverá un string con los datos del combo.
Las páginas ashx son scripts que no devuelven html solo devuelven lo que se les dice. En nuestro caso un string.
load_ordersCustomer.ashx
Función que se porcesa al cargar la página ashx
public void ProcessRequest (HttpContext context) {
Decimos al script que devolverá texto plano.
context.Response.ContentType = “text/plain”;
Definimos un DataSet donde rellenaremos los datos de la query
DataSet ds = new DataSet();
Creamos la sentencia SQL y le añadimos el filtro del parámetro que le hemos pasado por POST desde JQUERY
string ID = context.Request.Form["Customer"];
string sSQL = “Select OrderID, OrderID From Orders Where CustomerID = ‘” + ID + “‘”;
Ejecutamos la consulta contra la base de datos.
SqlConnection conn = new SqlConnection(System.Configuration.
ConfigurationManager.AppSettings["ConnectionString"]);
SqlCommand cmd = new SqlCommand(sSQL, conn);
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(ds);
Una vez devuelta la consulta en un DataSet, recorremos el DataSet para crear un String con los datos que necesitamos para rellenar el combo
string sOptions = “”;
for (int i = 0; i < ds.Tables[0].Rows.Count; i++) {
string field = ds.Tables[0].Rows[i].ItemArray[0].ToString();
string value = ds.Tables[0].Rows[i].ItemArray[1].ToString();
sOptions += "
Cerramos conexiones a la base de datos
cmd.Dispose();
conn.Dispose();
conn.Close();
Y devolvemos la llamada escribiendo por pantalla el string.
context.Response.Write(sOptions);
}
Y ésto es todo, en los ficheros tenéis los ejemplos que podéis probar, utilizan la base de datos Northwind.
Saludos
Alex
Enlaces relacionadas:
