如何使用对象 MVC 5 C# 的 Javascript 列表填充剃刀 DropDownListFor

Posted 2023-04-12

【中文标题】如何使用对象 MVC 5 C# 的 Javascript 列表填充剃刀 DropDownListFor

【英文标题】：How do I fill razor DropDownListFor with Javascript list of object MVC 5 C#

【发布时间】：2019-12-13 09:04:21

【问题描述】：

我想要一个下拉列表，该下拉列表将根据从另一个下拉列表 (Cascade Dropdownlist) 中选择的 Id 进行填充，我希望能够返回以 javascript 排序的对象列表，然后将其提供给我的下拉列表，但我没有知道怎么做。

<div class="form-group col-sm-6 col-md-6">
     <label for="@html.IdFor(model => model.CoastId)">
              @Strings.CoastField
     </label>
     @Html.DropDownListFor(model => model.CoastId, Model.CoastList, SharedStrings.SelectDefaultOptionText, new  @class = "form-control" )
     @Html.ValidationMessageFor(model => model.CoastId)
</div>
<div class="form-group col-sm-6 col-md-6">
      <label for="@Html.IdFor(model => model.VillageId)">
                Village
      </label>
      @*DropdownListFor(model => model.VillageId, *****MyJavascriptList*****)*@
      @Html.ValidationMessageFor(model => model.VillageId)
</div>

然后我将我的村庄列表以 JSON 格式发送到我的 JavaScript 文件中。

      <script type="text/javascript">
         var villageList = @Html.Raw(Json.Encode(Model.AllVillageList));
         Form.init(villageList);
      </script>

然后，我在 ID 为“CoastId”的第一个下拉列表中放置了一个 onchange 事件。

var Form = (function ($,_) 
var init = function(villageArray) 
    $('#UserName').focus();
    if (villageArray !== "") 
        $("#CoastId").change(function () 
            model.ReturnedVillages = _.filter(villageArray, function (obj)  return obj.RegionId === parseInt($("#CoastId").val()); );
            console.log(model.ReturnedVillages);
        );
    
;
return 
    init: init
;
)(jQuery,_);

My "ReturnedVillage" object is like this

提前谢谢你。

【参考方案1】：

您好@MathD，您是否尝试过使用带有 ViewBag 的 Select List 元素，然后在 Select List 的 onchange 方法上，您可以获取所选值并通过 AJAX 将其发送到下一个操作以填充第二个 List , here 就是一个例子