Html.RenderPartial and Ajax.BeginForm -> Submit is called twice

Question

I have the following index view:

@model BoringStore.ViewModels.ProductIndexViewModel
@{
    ViewBag.Title = "Index";
}

<h2>Produkte</h2>

<div id='addProduct'>
    @{ Html.RenderPartial("Create", new BoringStore.Models.Product()); }
</div>

<div id='productList'>
    @{ Html.RenderPartial("ProductListControl", Model.Products); }
</div>

The "productList" is just a list of all products.

The addProduct renders my Create View:

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<div id="dialog-confirm" title="Produkt hinzufügen" style="display:none">
@using (Ajax.BeginForm("Index_AddItem", new AjaxOptions { UpdateTargetId = "productList" }))
{ 
    @Html.Raw(DateTime.Now.ToString());

    <div>
        @Html.LabelFor(model => model.Name)
        @Html.EditorFor(model => model.Name)
    </div>
    <br />
    <div>
        @Html.LabelFor(model => model.Price)
        @Html.EditorFor(model => model.Price)
    </div>
    <br /><br />
    <div>
        <input type="submit" value="Produkt hinzufügen" />
    </div>
}

When submitting the form, the Index_AddItem-method in my controller is called. Unfortunately the form always calls the method twice. :(

Can someone help me out?

score 52 · Accepted Answer · answered Feb 23 '13 at 14:34

52

Don't include scripts inside your partial views! They should go the your "main" views or your _layout.cshtml.

Your problem is that you have included the jquery.unobtrusive-ajax.min.js twice in your page. Once in your Create partial and once somewhere else. Because if you include that script multiple times it will subscribe on the submit event multiple times so you will get multiple submit with a single click.

So make sure that you have include that script only once in a page. So move the jquery.unobtrusive-ajax.min.js reference into your index view.

answered Feb 23 '13 at 14:34

nemesv

138,284
16
416
359

3

What if you have an Ajax link inside a partial view? The first inclusion of jquery.unobstrusive-ajax doesn't register the link. – allenylzhou Mar 22 '14 at 21:48
I had the jquery-{version}.js twice in my BundleConfig - once under my jquery bundle and once under ajax bundle. This caused the same issue for me. So thanks for putting me on the right track! – Arwin Feb 03 '15 at 20:59
I am having a similar issue and I think I may be including something twice I am including jquery-1.10.2, jquery.mask.min.js, jquery-ui-1.10.3.custom.min.js, jquery.validate and jquery.unobtrusive-ajax would a combination of these be causing my form to submit twice? – mgrenier May 21 '15 at 15:54
thanks, its resolved my problem by removing "jquery.unobtrusive-ajax.min.js" in partial view, it may cause problem when ajax library call multiple time. – adnan May 21 '16 at 11:11
My problem was _Layout.cshtml was being included in my partial view and "jquery.unobtrusive-ajax.min.js" was included twice. Setting @Layout = "" resolved my issue. – JClarkCDS May 06 '21 at 05:28

score 0 · Answer 2 · answered Jul 20 '20 at 11:16

insure that you dont have jquery.unobtrusive-ajax.min.js file duplicated in the layout as mentioned above, and you can check this using browser Inspectors

Another problem which may cause this error that i have encountered is resting a form using jquery in the ajax request as following

$("form").trigger("reset"); //just remove this line

Html.RenderPartial and Ajax.BeginForm -> Submit is called twice

2 Answers2

Linked