Para empezar lo primero que haremos es crear 3 proyectos: 1 Proyecto MVC3 llamado CombosCascada. 2 Proyecto de clases llamado CombosCascada.Models.

3 Proyecto de clases llamado CombosCascada.Conexion. Proyecto CombosCascada.Models: Para este proyecto vamos a crear tres clases: 1- Localidad
public class Localidad { public int Id { get; set; } public int idDepartamento { get; set; } public string Nombre { get; set; } }

2- Provincia
public class Provincia { public int Id { get; set; } public string Nombre { get; set; } }

3- Departamento

public class Departamento { public int Id { get; set; } public int idProvincia { get; set; } public string Nombre { get; set; } }

En nuestro proyecto nos quedara:

Proyecto CombosCascada.Conexion: Aqu es donde vamos a agregar una clase que se llamara Ejecutar y servir para manejar las conexiones a la base de datos SQL.

Primero agregamos una referencia al proyecto CombosCascada.Models, para realizar esto vamos a la carpeta References, hacemos botn derecho con el mouse y seleccionamos Agregar referencia.

Ahora seleccionamos la pestaa Proyecto y seleccionamos CombosCascada.Models

Una vez que tenemos la referencia agregamos una clase y la llamamos Ejecutar de la siguiente forma:

Una vez que tenemos la clase creada, reemplazamos el cdigo por el siguiente:
using using using using using using using System; System.Collections.Generic; System.Text; System.Data.SqlClient; System.Data; System.Configuration; CombosCascada.Models;

namespace CombosCascada.Conexion { public class Ejecutar { private SqlConnection Conectar() { SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["Conexion"].ConnectionString); con.Open(); return con; } public IEnumerable<Provincia> LeerProvincias() { SqlConnection con = Conectar(); SqlCommand cmd = new SqlCommand(); cmd.Connection = con; cmd.CommandType = CommandType.Text; cmd.CommandText = "Select * from provincia"; IDataReader reader = cmd.ExecuteReader(); while (reader.Read()) { yield return new Provincia() { Id = Convert.ToInt32(reader["ID"]), Nombre = reader["Nombre"].ToString() }; } con.Close(); } public IEnumerable<Departamento> LeerDepartamentos(string IdProvincia) { SqlConnection con = Conectar(); SqlCommand cmd = new SqlCommand(); cmd.Connection = con; cmd.CommandType = CommandType.Text; cmd.CommandText = "Select * from departamento where idProvincia = " + IdProvincia; IDataReader reader = cmd.ExecuteReader(); while (reader.Read()) { yield return new Departamento() { Id = Convert.ToInt32(reader["ID"]), Nombre = reader["Nombre"].ToString(), idProvincia = Convert.ToInt32(reader["idProvincia"]) }; } con.Close(); } public IEnumerable<Localidad> LeerLocalidades(string IdDepartamento) { SqlConnection con = Conectar(); SqlCommand cmd = new SqlCommand(); cmd.Connection = con; cmd.CommandType = CommandType.Text;

cmd.CommandText = "Select * from localidad where idDepartamento = " + IdDepartamento; IDataReader reader = cmd.ExecuteReader(); while (reader.Read()) { yield return new Localidad() { Id = Convert.ToInt32(reader["ID"]), Nombre = reader["Nombre"].ToString(), idDepartamento = Convert.ToInt32(reader["idDepartamento"]) }; } con.Close(); } } }

Hasta aqu solamente creamos los mtodos de conexin para traer los datos de la base de datos. Proyecto CombosCascada: Controller: Aqu vamos a reemplazar el cdigo de nuestro controlador Home por el siguiente:
public ActionResult Index() { ViewBag.Message = "Ejemplo de combo en cascada"; //Cargamos las provincias por primera vez ViewBag.ListaProvincia = new SelectList(new Ejecutar().LeerProvincias(), "Id", "Nombre"); return View(); } public ActionResult About() { return View(); } [HttpPost] public JsonResult ObtenerDepartamento(string id) { //Devolvemos un IEnumerable de departamento return Json(new Ejecutar().LeerDepartamentos(id), JsonRequestBehavior.AllowGet); } [HttpPost] public JsonResult ObtenerLocalidad(string id) { //Devolvemos un IEnumerable de localidad return Json(new Ejecutar().LeerLocalidades(id), JsonRequestBehavior.AllowGet); }

Lo nico que hacemos hasta ahora es crear los datos para devolver los departamentos y las localidades.

Vista Home/Index: Reemplazamos el cdigo de nuestro controlador por el siguiente:

@{ ViewBag.Title = "Home Page"; } <h2>@ViewBag.Message</h2> @if (false) { <script src="../../Scripts/jquery-1.5.1.js" type="text/javascript"></script> } @Html.DropDownList("Provincia", (SelectList)ViewBag.ListaProvincia, "Seleccione") <br /> <br /> <select id="Departamento"> <option value="0">Seleccione...</option> </select> <br /> <br /> <select id="Localidad"> <option value="0">Seleccione...</option> </select> <script type="text/javascript"> $(function () { //Nos suscribimos al evento change de nuestro primer dropsownlist $("#Provincia").change(function () { //Limpiamos los otros dropsownlist if ($("#Provincia").val() == 0) { $("#Departamento").empty(); $("#Departamento").append($("<option />").val("0").text("Seleccione...")); $("#Localidad").empty(); $("#Localidad").append($("<option />").val("0").text("Seleccione...")); return; } //Ejecutamos el AJAX para llamar a la accin "ObtenerDepartamento" $.ajax({ url: '@Url.Action("ObtenerDepartamento")', type: "POST", dataType: "json", async: true, data: { 'id': $("#Provincia").val() }, success: function (items, responseText) { $("#Departamento").empty(); $("#Departamento").append($("<option />").val("0").text("Seleccione...")); $.each(items, function (i, item) { $("#Departamento").append($("<option />").val(item.Id).text(item.Nombre)); }); }, error: function () { alert('Error...'); } }); }); //Nos suscribimos al evento change de nuestro segundo dropsownlist $("#Departamento").change(function () { //Limpiamos los otros dropsownlist

if ($("#Departamento").val() == 0) { $("#Localidad").empty(); $("#Localidad").append($("<option />").val("0").text("Seleccione...")); return; } //Ejecutamos el AJAX para llamar a la accin "ObtenerLocalidad" $.ajax({ url: '@Url.Action("ObtenerLocalidad")', type: "POST", dataType: "json", async: true, data: { 'id': $("#Departamento").val() }, success: function (items, responseText) { $("#Localidad").empty(); $("#Localidad").append($("<option />").val("0").text("Seleccione...")); $.each(items, function (i, item) { $("#Localidad").append($("<option />").val(item.Id).text(item.Nombre)); }); }, error: function () { alert('Error...'); } }); }); }); </script>

Como se explica en nuestro cdigo, vamos a suscribirnos al evento change de los DropDownList para poder obtener los datos desde acciones del controlador por medio de AJAX. Por ltimo agregamos la base de datos Argentina.mdf en la carpeta App_Data de nuestro proyecto y agregamos el siguiente ConnectionString a nuestro Web.config:

<connectionStrings> <add name="Conexion" connectionString="Data Source=.\SQLEXPRESS;Integrated Security=true;AttachDbFilename=|DataDirectory|Argentina.mdf;User Instance=true;" providerName="System.Data.SqlClient" /> </connectionStrings>

Con esto terminamos de armar nuestros tres combos en cascada.