mvc控制兩個dropdownlist來過濾數據

Question

大家好我想問一個問題abuout mvc dropdownlist。我試圖過濾數據到他們的地方或他們的代碼，而下拉選擇索引更改。當我使用一個下拉菜單時，我可以做到這一點，但當我使用多個下拉菜單時，我無法單獨獲得結果。

正如你在圖片中看到的，我有兩個下拉列表。

public ActionResult Index(int? id,int? ddwList) 
    { 

     Repository<Order> _ro = new Repository<Order>(); 
     IEnumerable<SelectListItem> _orderSelectListItem = _ro.All().AsEnumerable().Select(s => new SelectListItem 
     { 
      Text = s.code, 
      Value = s.id.ToString() 
     }); 

     ViewData["ddOrder"] = _orderSelectListItem; 

     Repository<Workshop> _rw = new Repository<Workshop>(); 
     IEnumerable<SelectListItem> _workshopSelectListItem = _rw.All().AsEnumerable().Select(s => new SelectListItem 
     { 
      Text = s.name, 
      Value = s.id.ToString() 
     }); 

     ViewData["ddwList"] = _workshopSelectListItem; 

     Repository<ClothShipment> _rcs = new Repository<ClothShipment>(); 
     IEnumerable<MyClothShipment> _myClothShipment = null; 

     if (id != null) 
     { 
      int? idOrd = _rcs.Find(w => w.orderId == id).orderId; 
      //int? idWork = _rcs.Find(w => w.workshopId == id).workshopId; 

      if (idOrd != null) 
      { 
       _myClothShipment = _rcs.All().Where(w => w.orderId == id).Select(s => new MyClothShipment 
       { 
        id = s.id, 
        amount = s.amount, 
        orderName = s.order.code, 
        clothName = s.clothList.name, 
        workshopName = s.workshop.name, 
        shipDate = s.shipDate 
       }); 
      } 
      //else if(idWork != null){ 
      // _myClothShipment = _rcs.All().Where(w => w.workshopId == id).Select(s => new MyClothShipment 
      // { 
      //  id = s.id, 
      //  amount = s.amount, 
      //  orderName = s.order.code, 
      //  clothName = s.clothList.name, 
      //  workshopName = s.workshop.name, 
      //  shipDate = s.shipDate 
      // }); 
      //} 
     } 
     else { 
      _myClothShipment = _rcs.All().Select(s => new MyClothShipment 
      { 
       id = s.id, 
       amount = s.amount, 
       orderName = s.order.code, 
       clothName = s.clothList.name, 
       workshopName = s.workshop.name, 
       shipDate = s.shipDate 
      }); 
     } 

     return View(_myClothShipment); 
    } 

我的看法是這裏

<div id="sample_editable_2_length" class="dataTables_length"> 
         <label> 
          @Html.DropDownList("ddwList",(IEnumerable<SelectListItem>)ViewData["ddwList"],"Atölye Seçiniz",new {@id="StateDropDown1", @class = "span15 chosen"}) 
         </label> 
        </div> 

我的看法是這裏

<div id="sample_editable_2_length" class="dataTables_length"> 
         <label> 
          @Html.DropDownList("ddwList",(IEnumerable<SelectListItem>)ViewData["ddwList"],"Atölye Seçiniz",new {@id="StateDropDown1", @class = "span15 chosen"}) 
         </label> 
        </div> 

<div id="sample_editable_1_length" class="dataTables_length"> 
         <label> 
          @*<select class="m-wrap small" name="sample_editable_1_length" size="1" aria-controls="sample_editable_1"> 

          </select>*@ 
          @Html.DropDownList("ddOrder",(IEnumerable<SelectListItem>)ViewData["ddOrder"],"Sipariş Kodu Seçiniz",new {@id="StateDropDown", @class = "span15 chosen"}) 
         </label> 
        </div> 

，這裏是我的腳本代碼

$("#StateDropDown").change(function (e) { 

      var controllerName = '@ViewContext.RouteData.Values["Controller"].ToString()'; 
      var actionName = '@ViewContext.RouteData.Values["Action"].ToString()'; 

      var _id = $("#StateDropDown").val(); 
      var _url = "/" + controllerName + "/" + actionName + "/" + _id; 


      window.location.href =_url 

     }); 

     $("#StateDropDown1").change(function (e) { 

      var controllerName = '@ViewContext.RouteData.Values["Controller"].ToString()'; 
      var actionName = '@ViewContext.RouteData.Values["Action"].ToString()'; 

      var _id = $("#StateDropDown1").val(); 
      var _url = "/" + controllerName + "/" + actionName + "/" + _id; 


      window.location.href = _url 

     }); 

我填充從數據庫加載頁面時的下拉列表，並獲取所有數據以顯示下拉列表我想過濾顯示的數據...並使用此代碼我的下拉列表中的一個我選取了選定的ID item（Index（int？ ID））在這裏，但當我嘗試分別使用它們兩個它不工作，我怎麼能讓他們兩個工作。我該怎麼辦 ？第二個參數總是爲空，或者如果我使用不同的參數，除了「id」它再次變爲空？而且我試圖把參數作爲字符串，但它也是空的...謝謝你的幫助。

Answer 1

如果我明白這一點，您可以一次使用其中一個下拉列表，並且該下拉列表成功將其值發送給您的控制器，而另一個下拉列表總是發送空值。如果是這種情況，那麼您的選擇標籤的選項標籤的下拉列表方式正常工作。

正如MSDN文檔中解釋說：http://msdn.microsoft.com/en-us/library/dd492256(v=vs.118).aspx

optionLabel類型：System文本默認空項目。 此參數可以爲null。

所以如果你希望兩個下拉列表的是在同一時間使用，你需要刪除的事件.change並添加形式與下拉菜單並在一個提交按鈕同時使用值在同一時間。

OR

不要使用選項標籤意味着下拉列表的第一個選項將被用作它的初始/默認值。這裏是msdn文檔的鏈接，顯示了不同格式化Html.DropDownList助手的方法：http://msdn.microsoft.com/en-us/library/system.web.mvc.html.selectextensions.dropdownlist(v=vs.118).aspx

我希望我能正確理解你！

Answer 2

要解釋一下你的代碼是這樣做的：

當您選擇從您的第一選擇，要傳遞其價值的指數方法（如/Index/1），因此參數id值的值爲1，但沒有價值已經傳遞給參數ddwList，所以它是空的。當您從第二個選擇中選擇一個值時，您將其值傳遞給索引方法（e.d. /Index/5），因此參數id的值爲5，但沒有值傳遞給參數ddwList，因此它再次爲空。

假設你想要顯示一個基於兩個選擇的選擇表，那麼你需要構造的網址爲/Index?id=1&ddwList=5。因此，從您的選擇中刪除更改事件並添加一個按鈕，該按鈕在其單擊事件中構建查詢。但是，您這樣做的方式是每次重新加載整個頁面。我建議您考慮使用jQuery.get()方法從部分視圖中加載表格，以避免每次加載完整的頁面。例如

public ActionResult Index() 
{ 
    // Build the 2 select lists only 
    return View(); 
} 

索引視圖

// Add the two @Html.DropdownFor()... 
<button id="LoadTable">Load Table</button> 
<div id="TablePlaceholder"></div> 

和腳本

$('#LoadTable').click(function() { 
    var id1 = // the value of the first select 
    var id2 = // the value of your second select  
    $.get('@Url.Action("Table")', { id: id1, ddwList: id2 }, function(data) { 
    $('#TablePlaceHolder').html(data); 
    }); 
} 

和部分結果

public ActionResult Table(int? id, int? ddwList) 
{ 
    // Build your table view based on values of id and ddwList 
    return PartialView(); 
}