Ajax.BeginForm replaces whole page onchange of a dropdownlist

Question

The purpose

I have a simple table listing names (in a partial view), and above it a dropdownlist containing those names. The purpose is to filter the table based on the name which was selected in the dropdownlist. The filtering should happen as soon as the selected value in the dropdownlist changes, and should render only the partial view again.

The problem

When I select a value in the dropdownlist, the partial view isn't rendered in the other view but is displayed as a whole page. However, when I include a submit button in my Ajax.BeginForm block, and trigger the action on the submit button, it does function as expected...

The code

Controller

public PartialViewResult Filter(string filterName) {     var names = from p in db.People                 select p;      if (!String.IsNullOrEmpty(filterName))     {         names = names.Where(p => p.Name.Equals(filterName));     }      return PartialView("_PersonsTable", names); } 

View

@model IEnumerable<Sandbox.Models.Person>  <h2>Index</h2>  <p>     @Html.ActionLink("Create New", "Create") </p>  @using (Ajax.BeginForm("Filter", "Person", new AjaxOptions {      HttpMethod = "Get", UpdateTargetId = "SearchResults", InsertionMode = System.Web.Mvc.Ajax.InsertionMode.Replace })) {     @Html.DropDownList("filterName", new SelectList(ViewBag.Names), "Select a name", new   { onchange = "this.form.submit()" }) }  @Html.Partial("_PersonsTable") 

Partial View

@model IEnumerable<Sandbox.Models.Person>  <table id="SearchResults">     <tr>         <th>             Name         </th>         <th>             Age         </th>         <th></th>     </tr>  @foreach (var item in Model) {     <tr>         <td>             @Html.DisplayFor(modelItem => item.Name)         </td>         <td>             @Html.DisplayFor(modelItem => item.Age)         </td>         <td>             @Html.ActionLink("Edit", "Edit", new { id=item.ID }) |             @Html.ActionLink("Details", "Details", new { id=item.ID }) |             @Html.ActionLink("Delete", "Delete", new { id=item.ID })         </td>     </tr> } </table> 

So why is it that my searchResults table isn't rendered as a partial view?

I have these scripts included in my _Layout view:

<script src="/Scripts/jquery-1.7.2.js" type="text/javascript"></script> <script src="/Scripts/modernizr-1.7.min.js" type="text/javascript"></script> <script src="/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script> <script src="/Scripts/MicrosoftAjax.debug.js" type="text/javascript"></script> <script src="/Scripts/MicrosoftMvcAjax.debug.js" type="text/javascript"></script> 

Answer 1

In your dropdown replace:

new { onchange = "this.form.submit()" } 

with:

new { onchange = "$(this.form).submit();" } 

Also get rid of all MicrosoftAjax*.js scripts. Those are completely legacy and shouldn't be used in ASP.NET MVC 3 and newer applications. They are provided only for compatibility reasons if you are migrating from older versions. jQuery.js and jquery.unobtrusive-ajax.js are enough.