Como usar DropDownList o Selects en cascada con ASP.NET y jQuery?, es una de las dudas que mas se generan en los foros de discusión al momento de realizar cosas con AJAX y .NET sin el UpdatePanel.
Voy a explicar como realizo esta tarea para que sea un proceso sencillo.
Crearemos un nuevo proyecto web y nos aseguraremos de configurarlo para que pueda usar jQuery.
En la pagina Default.aspx agregaremos dos DropDownList y quedara algo como el siguiente codigo:
<%@ Page Language="C#" Inherits="EjemploDropDownList.Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head runat="server">
<title>Ejemplo DropDownList</title>
<script src="js/jquery-1.4.2.min.js" type="text/javascript" ></script>
</head>
<body>
<form id="form1" runat="server">
<asp:DropDownList runat="server" id="ddlPrincipal" ></asp:DropDownList>
<br />
<asp:DropDownList runat="server" id="ddlSecundario" > </asp:DropDownList>
</form>
</body>
</html>
Lo unico que hace este código es agregar la referencia de jQuery (la 1.4.2) y dos DropDownList, sin ningún otro control ni tampoco código que tenga que ser procesado aun por el servidor.
Enseguida vamos a llenar el primer DropDownList (ddlPrincipal) con algunos datos, en este caso seran continentes, esto lo vamos a colocar en el evento Load de la pagina Default.aspx:
private void Page_Load(object sender, System.EventArgs e)
{
ListItem elemento;
elemento = new ListItem("America", "1");
ddlPrincipal.Items.Add(elemento);
elemento = new ListItem("Africa", "2");
ddlPrincipal.Items.Add(elemento);
elemento = new ListItem("Europa", "3");
ddlPrincipal.Items.Add(elemento);
}
Corremos el proyecto y nos debe mostrar algo como esto:
Ahora es tiempo de meter un poco de código JavaScript en nuestra aplicación, para eso insertaremos el siguiente código entre las etiquetas <head> de Default.aspx :
<script type="text/javascript">
$(document).ready(function(){
// Configuracion de jQuery y AJAX
$.ajaxSetup({
type: "POST",
contentType: "application/json; charset=utf-8",
data: "{}",
dataFilter: function(data) {
var msg;
if (typeof (JSON) !== 'undefined' &&
typeof (JSON.parse) === 'function')
msg = JSON.parse(data);
else
msg = eval('(' + data + ')');
if (msg.hasOwnProperty('d'))
return msg.d;
else
return msg;
}
});
// Solo se ejecuta cuando seleccionamos alguna opcion.
$('#<%=ddlPrincipal.ClientID %>').change(function(){
$.ajax({
url: "Default.aspx/obtenerPaises",
data: "{'continente':'" + $("#<%=ddlPrincipal.ClientID %>").val() + "'}",
success: function(msg) {
$('#<%=ddlSecundario.ClientID %>').html(msg);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert('Error: ' + textStatus + ", " + errorThrown);
}
});
});
});
</script>
Este código hace dos cosas:
- Configura jQuery para usar AJAX y JSON como nosotros necesitamos y nos evita un pequeno malestar respecto a las “d” en los .NET frameworks anteriores a 3.5.
- Captura el evento Change del DropDownList Principal que ocurre cuando se selecciona cualquier opción del DropDownList y va a buscar el código que se ejecutara por .NET para traer lo que haga falta.
Como nota especial, si observan estoy pidiendo la información de la misma pagina “Default.aspx” y no de un WebService que es como comúnmente se hacen estas peticiones, a esto se le llama usar WebMethods.
Enseguida veremos el código que en .NET dependiendo de la opción seleccionada traerá una respuesta diferente, para lo cual agregaremos al archivo Default.aspx.cs el siguiente codigo debajo de Load_Page :
[WebMethod()]
public static string obtenerPaises(string continente)
{
List<ListItem> elementos = new List<ListItem>();
ListItem elemento;
string resultado = "";
// Usaremos simples 'if' para hacer sencillo el ejemplo.
if (continente == "1") {
elemento = new ListItem("Mexico", "1");
elementos.Add(elemento);
elemento = new ListItem("EUA", "2");
elementos.Add(elemento);
}
if (continente == "2") {
elemento = new ListItem("Kenia","1");
elementos.Add(elemento);
elemento = new ListItem("Congo","2");
elementos.Add(elemento);
}
if (continente == "3") {
elemento = new ListItem("Francia","1");
elementos.Add(elemento);
elemento = new ListItem("Italia","2");
elementos.Add(elemento);
}
foreach (ListItem item in elementos) {
resultado = resultado + "<option value='" + item.Value + "'>";
resultado = resultado + item.Text;
resultado = resultado + "</option>,";
}
return resultado;
}
Este código como verán es bastante sencillo y lo unico que hace es recibir como parametro el “continente” y en base al que se selecciono agregar a un listado ciertos elementos y al final regresar una cadena de <options> de un select de HTML.
Segunda nota: el nombre de la variable que recibe el parametro debe ser el mismo que el que pasamos en el javascript (data: “{‘continente’: … )
Y listo, ahora hay que correr el proyecto y esto nos permitira realizar DropDownList en cascada.
).