I am using Ajax.BeginForm in Modal pop-up, but when submitting form values, it is calling controller twice and hence saving the same form details twice in the database, what can be the cause of it, i am not able to find any good solution on internet, I am using PartialView in ActionMethod to return Ajax.Beginform view
Here is the PartialView code
@model MyMVCApp.Model.OrderNowViewData
@{
Layout = null;
}
@using (Ajax.BeginForm("Action", "Controller",new AjaxOptions{ HttpMethod = "POST", UpdateTargetId = "ModalContent" }))
{
@Html.AntiForgeryToken()
<fieldset>
<legend>Contact Information</legend>
<div class="row">
<div class="col-lg-2">
<div class="form-group">
<label>Contact Name :-</label>
</div>
</div>
<div class="col-lg-10">
<div class="form-group">
<input type="text" class="form-control" id="ContactName" name="ContactName" value="@Model.ContactName"/>
</div>
</div>
</div>
<br/>
<div class="row">
<div class="col-lg-2">
<div class="form-group">
<label>Contact Email :-</label>
</div>
</div>
<div class="col-lg-10">
<div class="form-group">
<input type="text" class="form-control" id="ContactEmail" name="ContactEmail" value="@Model.ContactEmail" />
</div>
</div>
</div>
<br/>
<div class="row">
<div class="col-lg-2">
<div class="form-group">
<label>Contact Phone :-</label>
</div>
</div>
<div class="col-lg-10">
<div class="form-group">
<input type="text" class="form-control" id="ContactPhone" name="ContactPhone" value="@Model.ContactPhone" />
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>Billing Address</legend>
<div class="row">
<div class="col-lg-2">
<div class="form-group">
<label>Address:-</label>
</div>
</div>
<div class="col-lg-10">
<div class="form-group">
<input type="text" class="form-control" id="BillingAddress" name="BillingAddress" value="@Model.Address" />
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-lg-2">
<div class="form-group">
<label>City:-</label>
</div>
</div>
<div class="col-lg-10">
<div class="form-group">
<input type="text" class="form-control" id="BillingCity" name="BillingCity" value="@Model.City" />
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-lg-2">
<div class="form-group">
<label>State :-</label>
</div>
</div>
<div class="col-lg-10">
<div class="form-group">
<input type="text" class="form-control" id="BillingState" name="BillingState" value="@Model.State" />
</div>
</div>
</div>
<br/>
<div class="row">
<div class="col-lg-2">
<div class="form-group">
<label>Country :-</label>
</div>
</div>
<div class="col-lg-10">
<div class="form-group">
<input type="text" class="form-control" id="BillingCountry" name="BillingCountry" value="@Model.Country" />
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>Customer Main Contact Information</legend>
<div class="row">
<div class="col-lg-2">
<div class="form-group">
<label>Name :-</label>
</div>
</div>
<div class="col-lg-10">
<div class="form-group">
<input type="text" class="form-control" id="CustomerContactName" name="CustomerContactName" />
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-lg-2">
<div class="form-group">
<label>Email :-</label>
</div>
</div>
<div class="col-lg-10">
<div class="form-group">
<input type="text" class="form-control" id="CustomerContactEmail" name="CustomerContactEmail" />
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-lg-2">
<div class="form-group">
<label>Phone :-</label>
</div>
</div>
<div class="col-lg-10">
<div class="form-group">
<input type="text" class="form-control" id="CustomerContactPhone" name="CustomerContactPhone" />
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>Technical Contact</legend>
<div class="row">
<div class="col-lg-2">
<div class="form-group">
<label>Name :-</label>
</div>
</div>
<div class="col-lg-10">
<div class="form-group">
<input type="text" class="form-control" id="TechnicalContactName" name="TechnicalContactName" />
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-lg-2">
<div class="form-group">
<label>Email :-</label>
</div>
</div>
<div class="col-lg-10">
<div class="form-group">
<input type="text" class="form-control" id="TechnicalContactEmail" name="TechnicalContactEmail" />
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-lg-2">
<div class="form-group">
<label>Phone :-</label>
</div>
</div>
<div class="col-lg-10">
<div class="form-group">
<input type="text" class="form-control" id="TechnicalContactPhone" name="TechnicalContactPhone" />
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>Billing Contact</legend>
<div class="row">
<div class="col-lg-2">
<div class="form-group">
<label>Name :-</label>
</div>
</div>
<div class="col-lg-10">
<div class="form-group">
<input type="text" class="form-control" id="BillingContactName" name="BillingContactName" value="@Model.BillingContactName" />
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-lg-2">
<div class="form-group">
<label>Email :-</label>
</div>
</div>
<div class="col-lg-10">
<div class="form-group">
<input type="text" class="form-control" id="BillingContactEmail" name="BillingContactEmail" value="@Model.BillingContactEmail" />
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-lg-2">
<div class="form-group">
<label>Phone :-</label>
</div>
</div>
<div class="col-lg-10">
<div class="form-group">
<input type="text" class="form-control" id="BillingContactPhone" name="BillingContactPhone" value="@Model.BillingContactPhone" />
</div>
</div>
</div>
</fieldset>
<button type="submit" class="btn btn-primary SendMail">Submit</button>
}
Any help?? Any idea what is causing this, I am adding Ajax.BegnForm Required js files in the Main view(calling method, this is modal pop-up)
Answered by:- Vipin
There can be possibly two cause of this issue:
jquery.unobtrusive-ajax.js files twice,i.ex you may have included the below script twice (in main view or may be in partial view)<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>?
Answered by:- SnehalSawant
Instead of ajax begin form try to use normal form tag to. Post data
Or..
Check jquery references
Subscribe to our weekly Newsletter & Keep getting latest article/questions in your inbox weekly