Use a dropdownlist to filter results in MVC

Question

I have an MVC web application that returns a table. I want to add a dropdownlist to the view page that filters the table to the selected year. What's the correct approach?

I'm currently creating a dropdownlist that I'm populating using JQuery. I created an onChange command to postback, but I don't know how to get the selected value of the dropdownlist in the controller.

Here are the code pieces I have in place:

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

In the view, I have the following:

<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

First, give your dropdown a name:

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

Then use the FormCollection object to retrieve the value:

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

Something like that.