使用下拉列表在MVC中篩選結果

Question

我有一個返回表的MVC Web應用程序。我想將下拉列表添加到將表格篩選到選定年份的視圖頁面。什麼是正確的方法？

我目前正在創建一個使用JQuery填充的下拉列表。我創建了一個onChange命令來回發，但我不知道如何獲取控制器中下拉列表的選定值。

這裏是碼片我有到位：

在控制器：

public ActionResult Index() 
    { 
     int year = 2012; 
     var vu_Estimates = dbBudget.vu_Estimates.OrderByDescending(o => o.Expense).ThenBy(o => o.CategoryGroupSortOrder).ThenBy(o => o.SortOrder).Where(o => o.Year == year).ToList(); 

     return View(vu_Estimates); 
    } 

    [AcceptVerbs(HttpVerbs.Post)] 
    public ActionResult Index(FormCollection formCollection) 
    { 
     int year = 2012; 
     var vu_Estimates = dbBudget.vu_Estimates.OrderByDescending(o => o.Expense).ThenBy(o => o.CategoryGroupSortOrder).ThenBy(o => o.SortOrder).Where(o => o.Year == year).ToList(); 

     return View(vu_Estimates); 
    } 

在視圖中，我有以下：

<script type="text/javascript"> 
    $(document).ready(function() {   
     $.post("/Estimate/PopulateYears/", { Year: $(this).val() }, function (data) { 
      populateDropdown($("#ddlYears"), data); 
     }); 
    }); 

    function populateDropdown(select, data) { 
     select.html(''); 
     $.each(data, function (id, option) { 
      select.append($('<option></option>').val(option.value).html(option.name)); 
     }); 
    } 
</script> 

<h2>Estimates List</h2> 

<div> 
    <% using (Html.BeginForm()) { %> 
     <select id="ddlYears" onchange="this.form.submit();"></select> | <%: Html.ActionLink("Create New Year of Estimates", "CreateEstimates", "Estimate") %> 
    <%} %> 
</div> 


<table> 
    <tr> 
     <th></th> 
     <th> 
      EstimateID 
     </th> 
     <th> 
      CategoryID 
     </th> 
     <th> 
      Year 
     </th> 
     <th> 
      EstimateAmount 
     </th> 
     <th> 
      CategoryName 
     </th> 
     <th> 
      SortOrder 
     </th> 
     <th> 
      CategoryGroupSortOrder 
     </th> 
     <th> 
      Expense 
     </th> 
    </tr> 

<% foreach (var item in Model) { %> 
    <tr> 
     <td> 
      <%: Html.ActionLink("Edit", "Edit", new { id=item.EstimateID }) %> | 
      <%: Html.ActionLink("Delete", "Delete", new { id=item.EstimateID })%> 
     </td> 
     <td> 
      <%: item.EstimateID %> 
     </td> 
     <td> 
      <%: item.CategoryID %> 
     </td> 
     <td> 
      <%: item.Year %> 
     </td> 
     <td> 
      <%: item.EstimateAmount %> 
     </td> 
     <td> 
      <%: item.CategoryName %> 
     </td> 
     <td> 
      <%: item.SortOrder %> 
     </td> 
     <td> 
      <%: item.CategoryGroupSortOrder %> 
     </td> 
     <td> 
      <%: item.Expense %> 
     </td> 
    </tr> 
<% } %> 

</table> 

<p> 
    <%: Html.ActionLink("Create New", "Create") %> 
</p> 

Answer 1

首先，給你的下拉列表中的名字：

<div> 
    <% using (Html.BeginForm()) { %> 
     <select id="ddlYears" name="Years" onchange="this.form.submit();"></select> | <%: Html.ActionLink("Create New Year of Estimates", "CreateEstimates", "Estimate") %> 
    <%} %> 
</div> 

然後使用FormCollection對象檢索值：

[AcceptVerbs(HttpVerbs.Post)] 
public ActionResult Index(FormCollection formCollection) 
{ 
    int year = Convert.ToInt32(formCollection["Years"]); 
    var vu_Estimates = dbBudget.vu_Estimates.OrderByDescending(o => o.Expense).ThenBy(o => o.CategoryGroupSortOrder).ThenBy(o => o.SortOrder).Where(o => o.Year == year).ToList(); 

    return View(vu_Estimates); 
} 

類似的東西。

Answer 2

我建議使用AJAX發佈dropdownlist的值，並返回使用此請求更新頁面所需的數據。否則，每當select元素中的值發生更改時，都需要重新加載頁面。

$('#idOfSelectElement').change(function() { 
    $.ajax({ 
     type: "POST", 
     url: '/Estimate/PopulateYears', 
     data: { 
      valueOfDropDown: $(this).val() 
     }, 
     /* Response is the data returned from controller method */ 
     success: function (response) { 

      var value1 = response.value1; 
      var value2 = response value2; 

      //TODO : Use these values to update your page. 

      return false; 
     } 
    }); 
}); 

在你的控制器，

/* Assuming the value of your dropdownlist is integer. If not use string */ 
public ActionResult PopulateYears(int valueOfDropDown) 
{ 
    try 
    { 
     /* Get data using the value of dropdownlist */ 
     var vu_Estimates = getData(valueOfDropDown); 

     return Json(new 
     { 
      success = true, 
      value1 = vu_Estimates.value1, 
      value2 = vu_Estimates.value1 
     }, JsonRequestBehavior.AllowGet); 
    } 
    catch 
    { 
     return Json(new { success = false }); 
    } 
}