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

【问题标题】：How do I fill razor DropDownListFor with Javascript list of object MVC 5 C#如何使用对象 MVC 5 C# 的 Javascript 列表填充剃刀 DropDownListFor
【发布时间】：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

提前谢谢你。

【问题讨论】：

标签： javascript c# jquery razor asp.net-mvc-5

【解决方案1】：

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

【讨论】：