MVC4 Ajax.BeginForm not replacing UpdateTargetId

Question

There are so many topics on SO about issues with the Ajax.BeginForm not correctly updating the target element with the return partial view:
mvc4 ajax updating same page<

Answer 1

For those that need a bit more explanation....

Type this in Package Manager Console PM> Install-Package jQuery.Migrate

Reference this in your partialview:

script src="~/Scripts/jquery.unobtrusive-ajax.js">

Happy coding everyone.

Answer 2

I was having similar problems to you - I had all my scripts bundled and loading correctly, and had all code implemented correctly. I checked package manager to see if any scripts needed to be updated and jQuery and jquery.unobtrusive-ajax did. jQuery went from 1.9 to 1.9.1. When I rebuilt my solution the target DIV was updated successfully. Try and update all JS in your solution, it may work.

Answer 3

User xr280xr's answer for including

ModelState.Clear();

worked for me. The app I'm working with is on an older jQ (1.7.x) so migrate wouldn't work in our situation. Clearing the model state in the controller did exactly what we expected BeginForm to do.

Answer 4

The following needs to be on any page that uses ajax.

@section Script {
    @Scripts.Render("~/bundles/jqueryval")
}

Answer 5

I had this problem, I just installed the latest unobtrusive package from NuGet and solved the problem

PM> Install-Package Microsoft.jQuery.Unobtrusive.Ajax

Will need JQ 1.8+

Answer 6

Wow, there are a lot of answers here. My problem was due to a bootstrap panel. It was creating a "nested" panel. I removed the panel markup and just used a plain old div and it worked. I think the UpdateTargetId has to be a direct parent of the AJAX form.

Here is the html illustrating the problem.

<div class="panel panel-default" id="notes-form">
  <div class="panel-body">
    @using (Ajax.BeginForm("EditNote", new { id = Model.Id }, new AjaxOptions { UpdateTargetId = "notes-form" }, htmlAttributes: new { @class = "form-horizontal" }))
    {
    }
  </div>
</div>