Ajax.BeginForm posting to controller twice (ASP.NET MVC5)

Question

I've used the Ajax helper to create several forms like the one below throughout my website, but for some reason this single form posts to the server twice when submitted. I can see the posts in the dev tools happening immediately that the form is submitted. The only difference between them is the first one has an additional header (X-Requested-With:XMLHttpRequest).

I've read through some answers on Stackoverflow suggesting that I might have duplicate requests for the jquery.unobtrusive file but I have checked the source and the dev tools and can only find a single instance. Nor can I find any other code which might be submitting the form.

If I remove the jquery.unobtrusive library then the form submits once but not as an AJAX request so the issue must lie somewhere with this library and how I've set up the form.

My view looks like this:

@using (Ajax.BeginForm("_Action", "Controller", null, new AjaxOptions
{
    HttpMethod = "POST",
    OnBegin = "beginFunc",
    OnComplete = "completeFunc",
    OnSuccess = "successFunc",
    OnFailure = "failureFunc"
},
new { id = "form-id", @class = "loading-container" }))
{
    @Html.AntiForgeryToken()
    <div class="form-input">
        @Html.EditorFor(m => m.PropertyName)
        @Html.ValidationMessageFor(m => m.PropertyName)
    </div>
    <button type="submit" class="right-arrow">Submit</button>
}

My action looks like this:

[HttpPost]
[ValidateAntiForgeryToken]
public JsonResult _Action(ViewModel vm)
{
    // Method code goes here
}

In my BundleConfig.cs I have the following

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

Can anybody offer any other suggestions of how to debug this or things I can check?

@AlanBuchanan is this a partial view? The problem might be due to referencing jquery.validate.unobtrusive multiple times — Anonymous Duck, Sep 14 '16 at 09:28
@StephenMuecke The OnBegin etc. functions are just doing some visual stuff like adding a loader. — AGB, Sep 14 '16 at 10:49
@Sherlock It is in a partial view but I'm only referencing the library from my main _Layout.cshtml page. I've checked the source and there's definitely only one reference to the jquery.validate.unobtrusive library. — AGB, Sep 14 '16 at 10:52
If you know that you will be useing jQuery check out this: https://stackoverflow.com/a/5410121/3139083 I have some issues with Ajax.BeginForm and after migrate to jQuery.post() everything becomes so simple. — Marcin, Sep 14 '16 at 10:59

score 0 · Answer 1 · answered Sep 14 '16 at 10:50

0

You may have jquery-unobtrusive-ajax.js included multiple times on page. which is causing the form to be posted multiple times.

You have to make sure that it is included only once.

answered Sep 14 '16 at 10:50

Mannan Bahelim

1,289
1
11
31

Thank you, but as stated in the question I have already checked this and only have it referenced once. – AGB Sep 14 '16 at 10:53
@Alan Post your master layout page and the view in which you have Ajax Form. – Mannan Bahelim Sep 14 '16 at 10:54

score 0 · Answer 2 · answered Sep 27 '18 at 05:34

I think you have a problem with cache can you try using the OutputCacheAttribute on your controller action to disable caching.

[OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
public JsonResult _Action(ViewModel vm)
 {
     ModelState.Clear();
     ////your code
 }

please let us know if this works

Ajax.BeginForm posting to controller twice (ASP.NET MVC5)

2 Answers2