MVC How do I refresh a grid from a dropdownlist?

Question

When I change the year in my dropdownlist, how do I refresh the grid underneath?

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/AdminAccounts.master" Inherits="System.Web.Mvc.ViewPage<SHP.WebUI.Models.BankHolidayViewModel>" %>

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

<asp:Content ID="Content2" ContentPlaceHolderID="AdminAccountsContent" runat="server">
<h3>Bank Holiday Administration</h3>
<p>Select the year: <%: Html.DropDownListFor(model => model.SelectedYear, Model.YearList)%></p>
<table>
    <tr>
        <th>Bank Holiday</th>
        <th>Date</th>
        <th>Notes</th>
    </tr>
    <% foreach (var bankHolidayExtended in Model.BankHolidays)
    { %>
        <% Html.RenderPartial("BankHolidaySummary", bankHolidayExtended); %>
    <% } %>
</table>

Answer 1

The easiest way would be to create a tag that will be the target where your grid will be displayed from an AJAX call:

<div id="bankHolidays"></div>

Then you're jQuery would look like this:

$(function() {
    $("#SelectedYear").change(function() {
        var year = $("#SelectedYear").val();
        $("#bankHolidays").load("/YourController/BankHolidays/" + year);
    });
});

Then you just create a controller action called BankHolidays:

public ActionResult BankHolidays(int year)
{
  this.ViewData.Model = repository.GetBankHolidaysForYear(year);
  return this.View();
}

Finally, in your BankHolidays.ascx you move your foreach loop from above in there and the model for that BankHolidays.ascx is your IEnumerable. This fragment of HTML will be returned in the AJAX call. jQuery will set that HTML to be the HTML inside the "bankHolidays" tag.