asp.net-mvc - 使用下拉列表过滤 MVC 中的结果

Question

我有一个返回表的 MVC Web 应用程序。我想向 View 页面添加一个下拉列表，将表格过滤到所选年份。正确的做法是什么？

我目前正在创建一个使用 JQuery 填充的下拉列表。我创建了一个 onChange 命令来回发，但我不知道如何在 Controller 中获取下拉列表的选定值。

以下是我的代码片段:

在 Controller 中:

    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);
    }

在 View 中，我有以下几点:

<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;
        }
    });
});

在您的 Controller 中，

/* 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 } );
    }
}