Question

I have a view in which I am attempting to do an ajax call (using MVC Ajax support) and insert the returned partial view into a div on the page. As far as I can tell, what I’m doing is very by-the-book. But instead of an Ajax call and an updated div, I’m getting a full postback.

Here’s the relevant chunk of the view:

<fieldset>
<legend>Available Instructors</legend>

<p>
    @{ using (Ajax.BeginForm("InstructorSearch", "CourseSection", new AjaxOptions() { UpdateTargetId = "divSearchResult" })) 
       {

        @Html.Raw(" Search: ")
        <select id="SearchType" name="SearchType">
            <option value="Last" @( (ViewBag.SearchType == "Last") ? " selected" : "")>Last Name</option>
            <option value="First" @( (ViewBag.SearchType == "First") ? " selected" : "")>First Name</option>
        </select>
        @Html.Raw(" ")
        <input type="text" id="SearchText" name="SearchText" value="@( ViewBag.SearchText)" />
        @Html.Raw(" ")
        <input type="submit" id="Search" name="Search" value="Search" />
       }
    }
</p>

<div id="divSearchResult"></div>
</fieldset>

Here’s the method on the controller:

[HttpPost]       
public PartialViewResult InstructorSearch(string searchType, string searchText)
{
    var list = Services.InstructorService.ListInstructors(
        base.CurrentOrganizationId.Value,
        (searchType == "First") ? searchText : null,
        (searchType == "Last") ? searchText : null,
        0,
        Properties.Settings.Default.InstructorListPageSize
        );
    return PartialView(list);
}

I’ve checked, and I’m loading MicrosoftAjax.js and MicrosoftMvcAjax.js.

So I’m stumped. I know that I can do all this in jQuery quite easily, and I’ve done that elsewhere, but this is a situation where, for reasons not worth getting into, if this could be made to work it would be the simplest, cleanest, easiest-to-understand solution.

Answer 1

I’ve checked, and I’m loading MicrosoftAjax.js and MicrosoftMvcAjax.js.

Those scripts are obsolete in ASP.NET MVC 3. You can completely remove them from your site. They are useless. They are included only for backwards compatibility if you were upgrading from previous versions in which case you must explicitly disable unobtrusive AJAX in your web.config:

<!-- Remark: don't do this => only for demonstration purposes -->
<add key="UnobtrusiveJavaScriptEnabled" value="false"/>

In ASP.NET MVC 3, Ajax.* helpers use jQuery by default. So must reference the jquery.unobtrusive-ajax.js which is what makes Ajax.* helpers work:

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>