在 MVC 中维护级联下拉列表的最佳方法答案

【问题标题】：Best way to maintain cascading dropdown in MVC在 MVC 中维护级联下拉列表的最佳方法
【发布时间】：2018-07-10 11:13:32
【问题描述】：

我有两个下拉列表，如下所示

 @Html.DropDownListFor(model => model.ProductId, new SelectList(ViewBag.Products, "ProductId", "ProductName", Model == null? string.Empty : Model.ProductId),"Select Product",new { @class = "form-control" })

 @Html.DropDownListFor(model => model.SubProduct, Enumerable.Empty<SelectListItem>(), "Select Sub Product", new { @class = "form-control" })

我正在使用 JQuery 根据所选产品绑定子产品。这工作正常。现在，在编辑时，我正在设置产品的选定值。这个时候，子产品的绑定和设置值的最佳方式是什么？

我正在考虑的一种方法是使用 JQuery 手动触发下拉菜单的更改事件。但问题是这需要在 jquery 函数中手动设置选定的值。

有什么建议吗？

【问题讨论】：

建议您研究 this DotNetFiddle 中的代码 - 您的第二个下拉列表需要绑定到您的模型（不是 Enumerable.Empty<SelectListItem>()）

标签： jquery asp.net-mvc cascadingdropdown

【解决方案1】：

你的代码可以是这样的

@Html.DropDownListFor(model => model.ProductId, new SelectList(ViewBag.Products, "ProductId", "ProductName", Model == null? string.Empty : Model.ProductId),"Select Product",new { id="product-ddl", @class = "form-control" })
<select id="sub-product-ddl" class = "form-control" name="SubProduct"></select>

<script>
$("#product-ddl").change(function() {
    var selectedProductId = $(this).val();
    var url = "your url";
    var method = "GET";
    $.ajax({
        method: method ,
        url: url ,
        data: { ProductId: selectedProductId  }
    })
    .done(function(response) { // assume it is list of products
       var subProductsDdl = $("#sub-product-ddl");
       subProductsDdl.find('option').remove();
       for(var i = 0;i< response.length;i++){
            subProductsDdl.append($('<option>', {
                value: response[i].ProductId,
                text: response[i].ProductName
            }));
        }
     });
});
</script>

只需将其编辑为您的 API 端点

【讨论】：