ASP.Net MVC 2 - drop down list that controls a grid

I am just starting on MVC so this should be an easy question to answer. I am using MVC 2 for ASP.Net. I have a drop down list which when changes should cause the grid to change as well. I have found a way to catch the change selection event and refresh 开发者_开发技巧the whole form using the code below. The $('#TheForm').submit(); command causes the Index method of the Controller to run, and resets everything back as before. What I want of course is for this method to pick up the new value of the dropdownlist, extract and display the new data in the View accordingly. Is this how I should do it, or should I do more on the client side instead?

$(function () { $("#StatusId").change(function () { $('#TheForm').submit(); }); });

<p>
    <% using (Html.BeginForm("Index", "Home", FormMethod.Post, new { id = "TheForm" })){%>
        <%: Html.DropDownList("StatusId", (SelectList) ViewData["Status"]) %>
    <%}%>
</p>

<p>
    <% if (Request.IsAuthenticated) {  %>
     <%:  Html.ActionLink("Add new item", "Add")  %>
    <% }  %>
</p>

<table>
    <tr>

        <th>
            Title
        </th>

        <th>
            Date
        </th>
        <th>
            Status
        </th>
    </tr>

<% foreach (var item in Model) { %>

    <tr>


        <td>
            <%: Html.ActionLink(item.Title, "Details", new { id = item.ItemCode }) %>
        </td>

        <td>
            <%: String.Format("{0:g}", item.DateCreated) %>
        </td>
        <td>
            <%: item.Status %>
        </td>
    </tr>

<% } %>

</table>

  <p>
    <%: Html.Label("Page: ") %>

    <% for (int i = 1; i < Convert.ToInt32(ViewData["NumberOfPages"]); i++)
       {  %>

    <%: Html.ActionLink(i.ToString(), "Index", new { page = i })%>

    <% }  %>

  </p>

The Index action needs a parameter StatusId.

It has to filter the list of items by StatusId. If this does not work please post the code of the action.