Form submitted twice after updating from ASP MVC 3

问题:

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.

回答1:

I had the same problem, and i found the solution: I included the "jquery.unobtrusive-ajax.min.js"-Script twice :-)

回答2:

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?

回答3:

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

回答4:

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!

回答5:

one small tip all the time before you using .live(), do .die() :)
this will kill all the java scripts attached to this event and will create a new one.

example:

$(function() {
    $('#MyInfoForm').die();
    $("#MyInfoForm").live('submit', function(e) {
        //some code
        e.preventDefault();
    });
});

回答6:

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.

回答7:

You can use bind instead of live in jquery.unobtrusive-ajax.min.js~~~ This is very important.Because live event will call the previous events every time but bind only calls the current event.

回答8:

Moving jquery.unobtrusive-ajax.js outside partial-view solved the issue in my case.

回答9:

I had the same problem. I had a login partial view in master page that included jquery.unobtrusive-ajax.min.js. I also had this file included in my view. So I removed one and the problem is solved now.

回答10:

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.

回答11:

This might be helpful for someone having a scenario similar to what I have:

On my page, the edit form opens a partial view inside a Kendo UI modal pop-up window, which loads the code of the form dynamically, including jquery.unobtrusive-ajax.js. With this setting, - which can relate to any pop-up such as that of jQuery UI and not just Kendo UI - the behavior of form submission is as follows:

The first time the pop-up window is opened, the form submission causes a single call to the controller (server-side) code. So far so good. However, for the second time that the window is opened (without closing the container page), the form submission calls the controller 2 times. Subsequently, each re-opening of the pop-up window, causes an additional loading of the jquery.unobtrusive-ajax.js code, which in turn causes an additional unwanted call to the controller at each single submission of the form.

In order to fix the problem, I moved the inclusion of jquery.unobtrusive-ajax.js from the partial view of the pop-up window into the main page. However this made the client-side validation stop working, and to fix that, I used the solution provided in here: client side validation with dynamically added field which links to this blog post: http://xhalent.wordpress.com/2011/01/24/applying-unobtrusive-validation-to-dynamic-content/

回答12:

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.

回答13:

this is old but I found something really stupid that is easy to overlook.

Our form also had the following attached to it:

$(document).ready(function () {
    $('#submit-button').on('click', function (e) {
        ....
    }
});

Obviously the .NET code handles this itself.