Combos en cascada en ASP.Net MVC Razor mediante Ajax y Json utilizando Ajax.BeginForm

@model IEnumerable<Dream.Models.Articulo>
 
@{
    ViewBag.Title = "Referencias";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
 
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
 
<script type="text/javascript">
    $.ajaxSetup({
        cache: false
    });
 
    // Inicialización
    $(document).ready(function () {
        _$("comboGruposDeProductos").options[0].disabled = true;
        _$("comboProductos").disabled = true;
    });
    
    // Carga el desplegable de productos en función
    // del grupo que le llega como parámetro.
    function actualizaComboProductos(grupoDeProductos) {
 
        // Eliminar el elemento "0" = "<Selecciona grupo>" si es que aún existe
        if (_$("comboGruposDeProductos").options[0].value == "0")
            _$("comboGruposDeProductos").options[0] = null;
 
        // Limpiar combo de Productos y poner "Espere..." mientras se carga.
        var dd = _$("comboProductos");
        dd.options.length = 0;
        dd.options[0] = new Option("Espere...");
        dd.selectedIndex = 0;
        dd.disabled = true;
 
        // Control de errores
        $("#comboProductos").ajaxError(function (event, request, settings) {
            dd.options[0] = new Option("Grupo incorrecto");
        });
 
        // Obtenemos los datos...
        var selectedProductIndex = 0;
        $.getJSON(
            '@Url.Action("GetJsonProductSelectList")',  // URL a la acción
            {grupo: grupoDeProductos },                // Objeto JSON con parámetros
            function (data) {                           // Función de retorno exitoso
                dd.options[0] = new Option("<Selecciona producto>", "0");
                dd.options[0].disabled = true;
                $.each(data, function (i, item) {
                    dd.options[i + 1] = new Option(item.Text, item.Value);
                });
                dd.selectedIndex = selectedProductIndex;
                dd.disabled = false;
            }
        );
    }
 
    //Recargar lista de artículos: se utiliza submit para que MVC haga una llamada ajax
    function actualizaListaDeArticulos() {
        $('form').submit();
 
        // Eliminar el elemento "0" = "<Selecciona producto>" si es que aún existe
        if (_$("comboProductos").options[0].value == "0")
            _$("comboProductos").options[0] = null;
    }
    
    function _$(id) {
        return document.getElementById(id);
    }
</script>
 
<h3>@Request.Params["vehiculo"]</h3>
 
@using (Ajax.BeginForm("ItemListGrid", 
    new { idCar = int.Parse(Request["idCar"]) },
    new AjaxOptions { 
        UpdateTargetId = "divReferencias", 
        LoadingElementId = "divCargando", 
        HttpMethod = "GET", 
        InsertionMode = InsertionMode.Replace,
        OnBegin = "_$(\"divReferencias\").style.display = \"none\";",
        OnComplete = "_$(\"divReferencias\").style.display = \"block\";"
    },
    new { 
        name = "formReferencias",
        style = "display:fixed"
    }))
{
    @Html.DropDownList("comboGruposDeProductos", (SelectList)ViewData["ProductGroupSelectList"], new
    {
        onchange = "actualizaComboProductos(this.options[this.selectedIndex].value)",
        style = "width: 300px; display:fixed"
    })
 
    var productSelectList = new List<SelectListItem>(); // De entrada no necesito nada en el 2º combo...
    @Html.DropDownList("comboProductos", productSelectList, new
    {
        onchange = "actualizaListaDeArticulos()",
        style = "width: 400px"
    })
}
 
<div id="divReferencias" class="tabletGrid">
    @Html.Partial("ItemListGrid", Model)
</div>
                            
<!--div id="divCargando" class="divCargando"><p>Cargando...</p><img src=@Url.Content("~/Images/cargando2.gif") alt="Cargando..." title="Cargando..." /></div!!!-->
 

Otras entradas del blog relacinadas:

Carga de combos en cascada en página web mediante Ajax y Json

Actualización de datos en página web mediante AJAX y JSON