Form submitted twice after updating from ASP MVC 3

Question

After upgrading my ASP MVC from 3 Preview to 3 Beta I see strange behaviour in my Ajax forms.

@using(Ajax.BeginForm("New", new AjaxOptions() {OnSuccess = "onAjaxSuccess", OnFailure = "onAjaxFailure", OnBegin = "onAjaxBegin", HttpMethod = "Post"})) {}

<form action="/Order/New" data-ajax="true" data-ajax-begin="onAjaxBegin" data-ajax-failure="onAjaxFailure" data-ajax-method="Post" data-ajax-success="onAjaxSuccess" method="post"></form>

I have placed an alert inside my function onAjaxBegin and it is beeing fired twice, each time i click on my submit button.

Anyone else seen this behaviour? I have not changed anything in the code after upgrading, and it worked perfectly before the upgrade.

Answer 1

I also had this exact problem and for a very different reason. I had included the script reference to the jquery.unobtrusive-ajax.min.js within the div that got updated. Moving it outside the div fixed it.

Answer 2

The duplicated jquery.unobtrusive-ajax.min.js can also happened if your controller returns a View() instead of PartialView().

Answer 3

Just for future reference for those using ASP.NET MVC; "~/Scripts/jquery.unobtrusive*" does also include "~/Scripts/jquery.unobtrusive-ajax.js".

So if your BundleConfig looks like this;

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

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.unobtrusive*",
                    "~/Scripts/jquery.validate*"));

It will result in submitting an Ajax form twice. Removing either "~/Scripts/jquery.unobtrusive*" or "~/Scripts/jquery.unobtrusive-ajax.js" will fix the problem.

Just posting this because it is easy to overlook "~/Scripts/jquery.unobtrusive*" when searching for unobtrusive-ajax.

Answer 4

I found out the solution, just remove all jquery.unobtrusive-ajax.js references, since you are using the Ajax.BeginForm it will use the ajax normally.

So it doesn't has to disable the ajax.

Answer 5

Look at the generated HTML. In ASP.NET MVC 3 Beta there's new support for unobtrusive jquery based ajax and all the Ajax helpers use jquery now. Maybe there's something left with MS Ajax which causes the double call. Make sure you remove all the inclusions of MSAjax scripts from the page. Also why using Ajax.BeginForm when you could simply use Html.BeginForm with unobtrusive jquery?

Answer 6

I had the same problem using a AJAX.BeginForm call that is loaded dynamically using $.load() I solved it by removing the extra include of jquery.unobtrusive-ajax.min.js on the loaded form. That's the key!