如何使用對象MVC 5 C＃的Javascript列表填充剃須刀DropDownListFor

Question

我想要一個下拉列表，它將根據從另一個下拉列表（Cascade Dropdownlist）中選擇的ID進行填充，並且我希望能夠返回以Javascript排序的對象列表，然后將其提供給我的dropdownlistfor，但是我不知道如何。

<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>

然后，將onchange事件放在ID為“ CoastId”的第一個下拉列表中。

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”對象是這樣的

先感謝您。

Answer 1

嗨@MathD你試圖用一個選擇列表元素與ViewBag，然后在onchange的選擇列表，你的方法可以選擇的值，並將它發送到通過AJAX下一個動作，以填補第二列表， 這里是一個例子