Llenar una lista desplegable de forma dinámica con Javascript/jQuery

Question

En una vista ASP .NET MVC Razor, tengo una lista desplegable de la siguiente manera:

@Html.DropDownListFor(model => model.SelectedDeviceModel, Model.DeviceModelList) 

DeviceModelList es sólo un SelectList.

¿Cómo puedo llenar dinámicamente DeviceModelList dependiendo de una acción del lado del cliente como un clic de botón u otra selección desplegable usando Javascript/jQuery/Ajax?

Answer 1

Se puede externalizar esta lista desplegable en una parcial:

@model MyViewModel 
@Html.DropDownListFor(model => model.SelectedDeviceModel, Model.DeviceModelList) 

continuación, en la vista principal de incluirlo dentro de algún recipiente:

@model MyViewModel 
... 
<div id="ddlcontainer"> 
    @Html.Partial("Foo", Model) 
</div> 
... 

entonces usted podría tener una acción de controlador que tiene algún parámetro y en función de su valor, esto hace que este parcial:

public ActionResult Foo(string someValue) 
{ 
    MyViewModel model = ... go ahead and fill your view model 
    return PartialView(model); 
} 

Ahora la última parte es enviar la solicitud AJAX para actualizar la lista desplegable cuando ocurre algún evento. Por ejemplo, cuando el valor de algunos otros cambios DDL (o algo más, haga clic en un botón o lo que sea):

$(function() { 
    $('#SomeOtherDdlId').change(function() { 
     // when the selection of some other drop down changes 
     // get the new value 
     var value = $(this).val(); 

     // and send it as AJAX request to the newly created action 
     $.ajax({ 
      url: '@Url.Action("foo")', 
      type: 'POST', 
      data: { someValue: value }, 
      success: function(result) { 
       // when the AJAX succeeds refresh the ddl container with 
       // the partial HTML returned by the Foo controller action 
       $('#ddlcontainer').html(result); 
      } 
     }); 
    }); 
}); 

Otra posibilidad consiste en el uso de JSON. Su acción de controlador Foo solo devolvería algún objeto Json que contenga la nueva colección de clave/valor y en la devolución de llamada exitosa de la solicitud AJAX actualizaría la lista desplegable. En este caso, no necesita externalizarlo en un parcial por separado. Por ejemplo:

$(function() { 
    $('#SomeOtherDdlId').change(function() { 
     // when the selection of some other drop down changes 
     // get the new value 
     var value = $(this).val(); 

     // and send it as AJAX request to the newly created action 
     $.ajax({ 
      url: '@Url.Action("foo")', 
      type: 'POST', 
      data: { someValue: value }, 
      success: function(result) { 
       // when the AJAX succeeds refresh the dropdown list with 
       // the JSON values returned from the controller action 
       var selectedDeviceModel = $('#SelectedDeviceModel'); 
       selectedDeviceModel.empty(); 
       $.each(result, function(index, item) { 
        selectedDeviceModel.append(
         $('<option/>', { 
          value: item.value, 
          text: item.text 
         }) 
        ); 
       }); 
      } 
     }); 
    }); 
}); 

y, finalmente, su acción de controlador Foo volverá JSON:

public ActionResult Foo(string someValue) 
{ 
    return Json(new[] { 
     new { value = '1', text = 'text 1' }, 
     new { value = '2', text = 'text 2' }, 
     new { value = '3', text = 'text 3' } 
    }); 
} 

Para un ejemplo similar es posible echar un vistazo a la following answer.