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?

Answer 1

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.