时间戳

首页 > 解决方案 > 如何使用对象 MVC 5 C# 的 Javascript 列表填充剃刀 DropDownListFor

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

问题描述

我想要一个下拉列表，它将根据从另一个下拉列表（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,_);

我的“ReturnedVillage”对象是这样的

先感谢您。

标签： javascriptc#jqueryrazorasp.net-mvc-5

解决方案

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

推荐阅读