Me gustaría cambiar dinámicamente mi formulario ASP.NET según la entrada del usuario. Primero, el usuario debe seleccionar Item1 de un menú desplegable y, según el valor seleccionado, checkItem(); script habilitará ciertos campos de entrada deshabilitados por defecto. Me gustaría tener algo que cambiaría el contenido de esos campos de entrada según el valor seleccionado.
<tr> <td style="text-align: center;"> item1: </td> <td colspan="2"> @Html.DropDownListFor(model => model.item1, (SelectList)ViewData["item1List"], htmlAttributes: new { onchange = "checkItem();", id = "Item1", name = "Item1", @class = "form-control", @style = "min-width: 100%!important;", @required = true }) </td> </tr> <tr> <td style="text-align: center;"> item2: </td> <td colspan="2"> @if ( # I need something here, or have JavaScript instead #) { @Html.DropDownListFor(model => model.item2, (SelectList)ViewData["item2List"], htmlAttributes: new { id = "item2", name = "item2", disabled = false, @class = "form-control", @style = "min-width: 100%!important;" }) } else { @Html.DropDownListFor(model => model.item2, (SelectList)ViewData["differentItem2List"], htmlAttributes: new { id = "item2", name = "item2", disabled = true, @class = "form-control", @style = "min-width: 100%!important;" }) } </td> </tr>por ejemplo, si Item1 tiene 10 opciones: 5 locomotoras y 5 trenes de motor, si el usuario selecciona una locomotora, el script checkItem habilitará el campo de entrada item2, que tiene una lista de vagones de pasajeros, y si el usuario selecciona un tren de motor ( por ejemplo, un Stadler FLIRT), el elemento 2 tendrá una lista de otros trenes de motor compatibles con el seleccionado (es decir, otros trenes de motor Stadler).
¿Cómo puedo hacer algo como esto, sin enviar el formulario o recargar toda la página?
Puede intentar usar ajax para obtener datos de la acción:
$("#Item1").change(function () { $.ajax({ url: "getList", type: "GET", data: {Item1: $("#Item1").val()}, success: function (data) { var items = ''; $("#item2").empty(); $.each(data, function (i, item) { items += "<option value='" + item.value + "'>" + item.text + "</option>"; }); $('#item2').html(items); }, error: function (result) { alert("error occured"); } });acción:
public List<SelectListItem> getList(string Item1) { //return Item2 data here }