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

The live() method was deprecated in jQuery version 1.7, and removed in version 1.9. Use the on() method instead.For more info refer: http://www.w3schools.com/jquery/event_live.asp

Answer 2

Check The Master Page OR Your Page's Scripts Reference about jquery.unobtrusive-ajax.js if not add Reference about this js :jquery.unobtrusive-ajax.js

Answer 3

I don't know if anyone else will run into this, but in my case, it only appeared to not be updating. I was building an simple edit form where you select the item you wish to edit from a dropdown, click a button, and it AJAX loads an edit form for the selected item.

It worked the first time, but after changing my selection in the drop down list, and clicking the button, none of the form values changed, even though I verified my server-side code was loading the new item into the view model. So it appeared Replace was not working. After stepping through jquery.unobtrisive-ajax.js, I found that it was replacing the contents of my target element, just with the same view markup it already had, which did not match the model that was passed to the view!

That's when I realized, it was the ModelState that was getting me. The second time I clicked the load button, it submitted my dropdown selection but also my filled out edit form. All of the values in the edit form were added to ModelState (as you would expect). My controller code then replaced the submitted view model (that the model binder created from the edit form values) with the view model for the selected drop down value and passed it to the partial view. However, the partial view uses a bunch of the Html.[X]For helper methods. These ignore the updated view model and pull their values directly from the ModelState. For example:

@Html.DisplayFor(m => m.Name)
@Model.Name

would display two different values for Name; the former displaying the submitted Name and the latter, the updated Name. This is the mechanism that lets MVC remember your user's form entries after a (server-side) validation error. In this case, because this is a partial page load and I'm just throwing out all of the submitted values, I don't need any of the ModelState values so I just call ModelState.Clear() before returning my view for the updated view model.

    public ActionResult GetItemEditForm(EditItemsViewModel editItemsVM)
    {
        if (editItemsVM.SelectedItemID != null)
        {
            //Load the selected item
            ItemsModelManager.GetEditItemsVM(editItemsVM);

            //Clear the submitted form values
            ModelState.Clear();
        }

        return PartialView("_ItemsEditor", editItemsVM);
    }

Answer 4

There is a problem with jquery.unobtrusive-ajax.min and JQuery 1.9 because JQuery 1.9 doesn't support the live() method any more. So you should use the JQuery migrate plug-in, and reference the JQuery migrate js.

Answer 5

First, install 'Microsoft.JQuery.Unobtrusive.Ajax' from NuGet Manager and later include "~/Scripts/jquery.unobtrusive" in "BundleConfig" after including "jquery-{version}.js"; which will look something similar to this:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                "~/Scripts/jquery-{version}.js",
                "~/Scripts/jquery.unobtrusive*));

Answer 6

Make sure you include the unobtrusive-ajax.js to the page, which you have placed your ajax form.

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