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

asp.net-ajax, asp.net-mvc-3, double-submit-problem, partial-views, razor

Solution

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.

Problem

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?

Original source