Ajax.BeginForm replaces whole page onchange of a d

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.

Answer 2

Not sure if I understand it correctly, but if submit button works OK why not just do this:

@Html.DropDownList("filterName", new SelectList(ViewBag.Names), "Select a name", new   { onchange = "clickMe('mybuttonId')" })

and write small script

function clickMe(id) {
  $('#' + id).click() // where id is id of button that should submit the form.
}

If you do not want the button to display then just hide it. This is a hack and if it doesn't fit your needs we can investigate further.