使用下拉列表过滤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

我建议使用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 } );
    }
}