MVC drop down list that controls a grid - what is the best way to get this to work?

Question

I have a drop down list on the client side. When the user makes a selection, my jquery script extracts the new value of the selection. But the code below does not work because I cannot work out how to send the selected value back to the controller. I am not sure about the syntax of sending the parameters as I am using paging parameters as it is. Maybe I should do an Ajax call instead?

The View looks like;

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    BankHoliday
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="AdminAccountsContent" runat="server">
    <% using (Html.BeginForm())
       {%>
       <%: Html.AntiForgeryToken() %>
        <h3>Bank Holiday Administration</h3>
        <p>Select the year: <%: Html.DropDownListFor(model => model.SelectedYear, Model.YearList)%></p>
            <fieldset>
            <legend>Enter the bank holidays here:</legend>
            <table>
                <tr><td colspan="3"><i>You can find the bank holiday dates on this <a target="_blank" href="http://www.year-planner-calendar.wanadoo.co.uk/"&gt;website&lt;/a&gt;.&lt;/i&gt; </td></tr>
                <tr>
                    <th>Bank Holiday</th>
                    <th>Date</th>
                    <th>Notes</th>
                </tr>
                <% foreach (var bankHolidayExtended in Model.BankHolidays)
                   { %>
                    <% Html.RenderPartial("BankHolidaySummary", bankHolidayExtended); %>
                <% } %>
               <tr>
                    <td align="center" colspan="3" style="padding-top:20px;">
                        <input type="submit" value="Save"/>
                    </td>
                </tr>
                 <% if (ViewData["UpdatedFlag"] == "True")
                   { %>
                   <tr>
                        <td id="confirmationMessage" colspan="3">
                            At time <% Response.Write(DateTime.Now.ToString("T")); %> - Details have been successfully saved 
                        </td>
                   </tr>
                   <%}
                   else if (ViewData["UpdatedFlag"] == "False")
                   {%>
                   <tr>
                        <td id="Td1" colspan="3">
                            At time <% Response.Write(DateTime.Now.ToString("T")); %> - ERROR! Details have NOT been saved 
                        </td>
                   </tr>
                   <%} %>
            </table>
            </fieldset>
        <% } %>
        <script language="javascript" type="text/javascript">
            $(function () {
                $("#SelectedYear").change(function () {
                    var year = $("#SelectedYear").val();
                    $("#wholepage").load("/BankHoliday/Create/" + year);
                });
            });

    </script>
</asp:Content>

and the Controller looks like;

public ActionResult ListHistory(GridSortOptions sort, int? page, int? EmployeeStatusId) { if (Request.QueryString["lastPersonMessage"] == null) ViewData["LastPersonMessage"] = string.Empty; else ViewData["LastPersonMessage"] = Request.QueryString["lastPersonMessage"];

    IEnumerable<EmployeeExtended> employees = null;

    switch (EmployeeStatusId.GetValueOrDefault(1))
    {
        case 1: employees = EmployeeExtended.GetAllFormerEmployees();
            break;
        case 2: employees = EmployeeExtended.GetAllOnNoticeEmployees();
            break;
        case 3: employees = EmployeeExtended.GetAllCurrentEmployees();
            break;
    }
    if (sort.Column != null)
    {
        employees = employees.OrderBy(sort.Column, sort.Direction);
    }
    int pageLength = Convert.ToInt32(ConfigurationManager.AppSettings["EmployeeListPageLength"].ToString());
    employees = employees.AsPagination(page ?? 1, pageLength);
    ViewData["sort"] = sort;
    return View(employees);
}

Answer 1

You can it inside an Ajax.BeginForm() Call but the Url wouldn't change then.. - means: every time you refresh it, it'll return you back to the default page..

I already did something very similar to this:

<%: Html.DropDownList(Model => Model.SelectedYear, Model.YearList, new { onchange = "location.href='/Controller/Action/'+this.value" }) %>

This should provide some foundation on solving the issue.