使用ajax的MVC多级联下拉过滤表答案

【问题标题】：MVC multiple cascading dropdown filtering table using ajax使用ajax的MVC多级联下拉过滤表
【发布时间】：2016-12-26 16:04:57
【问题描述】：

我想要多个下拉列表来过滤同一页面上的表格。当您转到该页面时，它会在您选择第一个下拉列表时显示一个表格，它会缩小数据范围并更新第二个下拉列表。

这是我正在研究的一个例子MVC Sort headers and Dropdown Ajax update

我可以让级联下拉菜单正常工作，或者我可以让表格更新，但我无法同时获得这两者。

我正在尝试使用 ajax，因此页面不会重新加载。

任何指导或示例都会很棒！

【问题讨论】：

标签： jquery ajax asp.net-mvc sorting

【解决方案1】：

我还没有看到你的代码，所以不能告诉确切的问题。这是我如何看待您的解决方案。首先将您的第二个下拉值添加到您的过滤方法，它应该在未选择时具有默认值。

    public ActionResult Index(string sortOrder, string id, 
                              string channelLocation, int secon_ddl = 0)

然后检查是否选择了第二个，在这种情况下是0，然后过滤

    if(secon_ddl != 0)
    {
       //do whatever
    }

添加另一个方法，将项目列表返回到第二个方法，并在第一个下拉值更改时调用它。最好的选择是以 JSON 格式返回值。这是我的代码，当类别更改时我正在更新子类别列表

('#category_list').change(function() {
    var cat_value = $(this).val();
    $.ajax({
        url: '/Product/GetSubCategory',
        type: "GET",
        dataType: "JSON",
        data: { category: cat_value },
        contentType: 'application/json',
        success: function (data) {
            if (data.length > 0) {
                var list = $('#subCategory_list');
                list.html(""); // clear before appending new list
                list.append(
                        $('<option></option>').val(null).html("Chose"));
                $.each(data, function (i, subCat) {
                    list.append(
                        $('<option></option>').val(subCat.id).html(subCat.name));
                });
            }            
        }
    });
}

我使用的是jquery数据表，所以更新表很简单

 ('#category_list, #subCategory_list').change(function(){
       table.draw();
 })

在您的情况下，最后一个代码应该完全不同。只需确保您的过滤器方法接收到两个下拉列表的值，并在其中一个下拉列表更改时触发。希望对你有帮助！！

【讨论】：