时间戳

首页 > 解决方案 > 在 MVC 中维护级联下拉列表的最佳方法

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

问题描述

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

 @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 函数中手动设置选定的值。

有什么建议么？

标签： jqueryasp.net-mvccascadingdropdown

解决方案

你的代码可以是这样的

@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 端点

推荐阅读