使用ajax的MVC多級聯下拉篩選表

Question

我想要多個下拉列表篩選同一頁上的表。當你轉到頁面時，當你選擇第一個下拉菜單時，它會顯示一個表格，縮小數據並更新第二個下拉菜單。

這裏有一個例子我的工作MVC Sort headers and Dropdown Ajax update

我可以級聯下拉菜單或工作，我可以得到表更新，但我不能讓兩者。

我想使用ajax，所以頁面不會重新加載。

任何指導或例子都會很棒！

Answer 1

我還沒有看到你的代碼，所以不能說出確切的問題。這是我如何看你的解決方案。首先將您的第二個下拉值添加到您的過濾器方法中，未選擇時它應該具有默認值。

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

如果第二選擇然後檢查，在這種情況下是它爲0，和過濾

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

添加物品的另一種方法至極返回列表以第二種方法並調用它時firts下拉值改變。最佳選擇是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(); 
}) 

你的情況，這最後的代碼應該是完全不同的充。只要確保你的過濾器能夠接收到兩個下拉列表的值，並且當其中一個下拉列表發生變化時就會觸發它。希望這可以幫助你！