title: Use a dropdownlist to filter results in MVC
body: <p>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?  </p>
  
  <p>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.</p>
  
  <p>Here are the code pieces I have in place:</p>
  
  <p>In the controller:</p>
  
  <pre><code>    public ActionResult Index()
      {
          int year = 2012;
          var vu_Estimates = dbBudget.vu_Estimates.OrderByDescending(o =&gt; o.Expense).ThenBy(o =&gt; o.CategoryGroupSortOrder).ThenBy(o =&gt; o.SortOrder).Where(o =&gt; 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 =&gt; o.Expense).ThenBy(o =&gt; o.CategoryGroupSortOrder).ThenBy(o =&gt; o.SortOrder).Where(o =&gt; o.Year == year).ToList();
  
          return View(vu_Estimates);
      }
  </code></pre>
  
  <p>In the view, I have the following:</p>
  
  <p></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(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($('&lt;option&gt;&lt;/option&gt;').val(option.value).html(option.name));
          });
      }
  &lt;/script&gt;
  
  &lt;h2&gt;Estimates List&lt;/h2&gt;
  
  &lt;div&gt;
      &lt;% using (Html.BeginForm()) { %&gt;
          &lt;select id="ddlYears" onchange="this.form.submit();"&gt;&lt;/select&gt; | &lt;%: Html.ActionLink("Create New Year of Estimates", "CreateEstimates", "Estimate") %&gt;
      &lt;%} %&gt;
  &lt;/div&gt;
  
  
  &lt;table&gt;
      &lt;tr&gt;
          &lt;th&gt;&lt;/th&gt;
          &lt;th&gt;
              EstimateID
          &lt;/th&gt;
          &lt;th&gt;
              CategoryID
          &lt;/th&gt;
          &lt;th&gt;
              Year
          &lt;/th&gt;
          &lt;th&gt;
              EstimateAmount
          &lt;/th&gt;
          &lt;th&gt;
              CategoryName
          &lt;/th&gt;
          &lt;th&gt;
              SortOrder
          &lt;/th&gt;
          &lt;th&gt;
              CategoryGroupSortOrder
          &lt;/th&gt;
          &lt;th&gt;
              Expense
          &lt;/th&gt;
      &lt;/tr&gt;
  
  &lt;% foreach (var item in Model) { %&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;%: Html.ActionLink("Edit", "Edit", new { id=item.EstimateID }) %&gt; |
              &lt;%: Html.ActionLink("Delete", "Delete", new { id=item.EstimateID })%&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;%: item.EstimateID %&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;%: item.CategoryID %&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;%: item.Year %&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;%: item.EstimateAmount %&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;%: item.CategoryName %&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;%: item.SortOrder %&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;%: item.CategoryGroupSortOrder %&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;%: item.Expense %&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;% } %&gt;
  
  &lt;/table&gt;
  
  &lt;p&gt;
      &lt;%: Html.ActionLink("Create New", "Create") %&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p></p>