Jquery y JSON , combo cascada.

Introducción :

Muchas veces en los sistemas de información , se requiere cargar información a partir de un parámetro para otros controles ,y normal es que puedas hacerlo cargando cada control con un autopostback o un refresh de página , esto puede ser algo molesto ya que para cada cambio se tendrá que refrescar la página y esto puede ocasionar alguna perdida de datos sin mencionar que para un sistema profesional no es para nada óptimo hacer el llenado de datos via autopostback, este trabajo puede ser tedioso si buscas la manera de como hacerlo en entorno MVC ya que aqui no existe alguna propiedad para realizar el autopostback en controles html.

Hoy veremos como realizar un combo cascada por medio de Jquery y Json , los cuales nos ayudarán a realizar dicha tarea.

Que es JSON ?

Json es un formato simple y ligero para poder intercambiar información ya que podemos cargar información desde el servidor mediante peticiones a determinadas URLs.
En este caso utilizaremos la función get.Json de la libreria Jquery, la cual trabaja con la misma sintaxis.
Podemos ver mas información acerca de esto en la documentación de Json  en JSON

A continuación realizaremos un ejemplo sencillo haciendo un listado de categorías en un select y al escoger se liste otro select con los productos que pertenecen a esa categoría.

1. Realizamos la conexión a la base de datos Neptuno mediante el Entity Framework y usaremos procedimientos almacenados agregados al EF, los cuales son los siguientes.

CREATE PROCEDURE ListarCategorias
AS
SELECT IdCategoria,NombreCategoria FROM Categorias
GO

CREATE PROCEDURE ListarProductosXCategoria 
@IdCategoria INT
AS
SELECT IdProducto,NombreProducto FROM Productos
WHERE IdCategoria=@IdCategoria
GO

2. Como mencione anteriormente las acciones pueden devolver varias tipos de resultado , en este caso para usar Json , retornaremos un resultado en formato Json , por tanto hacemos lo siguiente.

public class Categorias_ProductosController : Controller
    {
        NeptunoEntities db = new NeptunoEntities();

        public ActionResult ListarCategorias()
        {
            var Listado = db.ListarCategorias().ToList();
            ViewBag.Categorias = Listado;
            return View();
        }

        public JsonResult ListarProductosXCategoria(int IdCategoria)
        {
            var Listado = db.ListarProductosXCategoria(IdCategoria);
            var JsonListado = Json(Listado.ToList(), JsonRequestBehavior.AllowGet);
            return JsonListado;
        
        }
       
    }

Aqui uso directamente los procedimientos almacenados hechos en SQL e importados al EF,tan solo llamandolos desde la variables instanciada, esta variable me guardara todas las entidades del EF , y podre llamarlas en cualquier controlador y por tanto acción.

Como dije al comienzo estamos usando ahora un JSON RESULT , pero que es lo que hago exactamente aquí ?

Para resumir , explico la sintaxis de Json, la cual es la siguiente :

Json (object Data , JsonRequestBehavior Behavior)

Json --> Creará un objeto en formato Json
object data --> son los datos que queremos serializar.
JsonRequestBehavior --> Clase que indica si este Json va aceptar o no peticiones Http.
Behavior --> Respuesta si aceptaremos o no las peticiones http, estas puedes ser 2 , "AllowGet" la cual hace referencia que si aceptará peticiones y "DenyGet" que indica que no aceptará peticiones http.

Sabiendo esto, podemos realizar la llamada desde Jquery en la vista.

3. Creamos los "select" en la vista , en primer select lo llenamos con un foreach como ya l hemos realizado antes.

@using Combo_Cascada.Models;

ListarCategorias

Categorias


@foreach (var c in ViewBag.Categorias as List)
{ 

@c.NombreCategoria
    
}
--Seleccione--



Productos

y usando jquery hacemos la llamada a JsonResult.

como se daran cuenta usamos get.JSON cuya sintaxis es la siguiente :

get.JSON (URL)

Sabemos de por si , que los controladores y acciones vienen a ser url , ya que si lo notas cuando ejecutas un controlador en la barra de direcciones aparece su ruta, por tanto definimos el controlador y accion que corresponde en este caso ("ListarProductosXCategoria", "Categorias_Productos") y enviandole el parámetro IdCategoria el cual capturamos por medio del selector del select categorias (id), y realizando un foreach con el resultado y le agregamos los items al segundo select.
Sabemos que en (data) , se guarda el resultado de la petición.

Por último  mediante el selector del select Categorias (id) y la funcion change cargamos el método  que llena el segundo select , asi que cada vez que seleccionemos un item cambiará el contenido del segundo select.

Espero que este post te haya sido de utilidad, aquí dejo la solución por si deseas descargarla.