update - ¿Se recomienda implementar una matriz de listas desplegables en cascada Ajax en MVC4/Razor?

update partial view using ajax

Question

Estoy escribiendo una aplicación basada en ASP.NET MVC4 / Razor / C # que necesita representar una grilla de registros. Cada fila tiene varias columnas, y puede haber 100 o más filas.

Cada fila tiene un campo de casillas de verificación, un campo de texto y luego tres listas desplegables en cascada. El primer menú desplegable se rellena previamente en la carga de la página. El segundo necesita ser rellenado usando Ajax en el cambio de la primera lista desplegable. El tercero de un cambio en el segundo. Cada fila está separada y no se influencia entre sí.

¿Cuál es la forma recomendada de implementar algo como esto? Las diversas soluciones para las listas desplegables en cascada son solo para listas en cascada individuales; no funcionan (para mí) cuando se colocan dentro de un bucle foreach.

El esqueleto de lo que tengo se muestra a continuación:

@model IList<MyModel>

@using (Html.BeginForm("MyAction", "Home")) {
  <table><tr><th>Use?</th><th>Name</th><th>List A</th><th>List B</th><th>List C</th></tr>
  @Html.EditorForModel()
</table>
}

El modelo se ve así:

public class MyModel
{
  public bool Use { get; set; }
  public string Name { get; set; }
  public int? ListAId { get; set; }
  public int? ListBId { get; set; }
  public int? ListCId { get; set; }
  public IList<ListAList> ListA { get; set; }
}

El archivo compartido de EditorTemplates MyModel.cshtml sigue esta estructura:

@model MyNamespace.MyModel
<tr>
  <td>@Html.CheckBoxFor(model => model.Use)</td>
  <td>@Html.DisplayFor(model => model.Name)</td>
  <td>@Html.DropDownListFor(model => model.ListAId, new SelectList(Model.ListA, "Id", "Name", Model.ListAId), "")</td>
  <td>??</td>
  <td>??</td>
</tr>

Los ?? indica que no estoy seguro de qué poner aquí.

¿Cómo procedo a renderizar el cuadro de selección de ListB con Ajax al cambiar el cuadro de selección de ListA, y luego al cambiar ListB, renderizar el cuadro de selección de ListC?

Answer 1

Mira esto:

• en evento de cambio de selección - Html.DropDownListFor
• http://addinit.com/node/19 o
• http://www.codeproject.com/Articles/258172/Simple-Implementation-of-MVC-Cascading-Ajax-Drop-D

Actualización1: suponga que hay Nombre ROWID (y enumera todos los mismos datos).

Actualización2: el ejemplo disponible en github

En base a estas respuestas:

• Cómo llenar un @ mtml.dropdownlist mvc helper usando JSon
• Completa un cuadro <select> </ select> con otro

Modelo:

using System.Collections.Generic;

namespace MyNamespace
{
    public class MyModel
    {
        public MyModel() { ListA = new List<ListAList>(); }
        public bool Use { get; set; }
        public string Name { get; set; }
        public int? ListAId { get; set; }
        public int? ListBId { get; set; }
        public int? ListCId { get; set; }
        public IList<ListAList> ListA { get; set; }
    }

    public class ListAList
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }

}

Acción principal en el controlador de inicio:

public ViewResult MyAction()
{
    var model = new List<MyModel>();
    for (int i = 0; i < 10; i++)
    {
        var item = new MyModel() 
            {
            Name = string.Format("Name{0}", i),
            Use = (i % 2 == 0),
            ListAId = null,
            ListBId = null,
            ListCId = null
            };

        for (int j = 0; j < 10; j++)
        {
            item.ListA.Add( new ListAList() 
                {
                    Id=j,
                    Name = string.Format("Name {0}-{1}",i,j)
                });
        }
        model.Add(item);
    }

    return View(model);
}

Proveedor de fuente de datos en el controlador de inicio:

public JsonResult PopulateOption(int? listid, string name)
{

    //todo: preparing the data source filter

    var sites = new[]
    {
        new { id = "1", name = "Name 1" },
        new { id = "2", name = "Name 2" },
        new { id = "3", name = "Name 3" },
    };
    return Json(sites, JsonRequestBehavior.AllowGet);
}

EditorTemplate:

@model MyNamespace.MyModel
<tr>
    <td>@Html.CheckBoxFor(model => model.Use)</td>
    <td>@Html.DisplayFor(model => model.Name)</td>
    <td>@Html.DropDownListFor(model => model.ListAId, new SelectList(Model.ListA, "Id", "Name", Model.ListAId), "", new { @id = string.Format("ListA{0}", Model.Name), @class="ajaxlistA" })</td>
    <td><select class="ajaxlistB" id="ListB@(Model.Name)"></select></td>
    <td><select class="ajaxlistC" id="ListC@(Model.Name)"></select></td>
</tr>

Y la vista principal con funciones de Ajax:

@using MyNamespace
@model IList<MyModel>

@using (Html.BeginForm("MyAction", "Home")) {
  <table><tr><th>Use?</th><th>Name</th><th>List A</th><th>List B</th><th>List C</th></tr>
@Html.EditorForModel()
</table>
}

<script src="@Url.Content("~/Scripts/jquery-1.7.1.js")" type="text/javascript"></script>


<script>
    $(document).ready( $(function () {
        $(''.ajaxlistA'').change(function () {
            // when the value of the first select changes trigger an ajax request
            list = $(this);
            var listvalue = list.val();
            var listname = list.attr(''id'');
            $.getJSON(''@Url.Action("PopulateOption", "Home")'', { listid: listvalue, name: listname }, function (result) {
                // assuming the server returned json update the contents of the 
                // second selectbox
                var listB = $(''#'' + listname).parent().parent().find(''.ajaxlistB'');
                listB.empty();
                $.each(result, function (index, item) {
                    listB.append(
                        $(''<option/>'', {
                            value: item.id,
                            text: item.name
                        })
                    );
                });
            });
        });
        $(''.ajaxlistB'').change(function () {
            // when the value of the first select changes trigger an ajax request
            list = $(this);
            var listvalue = list.val();
            var listname = list.attr(''id'');
            $.getJSON(''@Url.Action("PopulateOption", "Home")'', { listid: listvalue, name: listname }, function (result) {
                // assuming the server returned json update the contents of the 
                // second selectbox
                var listB = $(''#'' + listname).parent().parent().find(''.ajaxlistC'');
                listB.empty();
                $.each(result, function (index, item) {
                    listB.append(
                        $(''<option/>'', {
                            value: item.id,
                            text: item.name
                        })
                    );
                });
            });
        });
    }));
</script>

Y el resultado: