Duplicate entries issue while using multiple partial views in single page - asp.net-mvc

Question

Hi I have two partial views in a single asp .net mvc page. When I submit entries using any of the partial view 2 entries got saved in database. If I disable any one partial view page works fine. Please help.
My Partial views look like this:
#using (Ajax.BeginForm("Create", "EnquiryForm", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "divEnquiryFormMessage", LoadingElementId = "imgLoadingEnquiryForm" }))
{
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
#Html.AntiForgeryToken()
<div id="divEnquiryFormMessage">
</div>
<div class="form-group">
#Html.EditorFor(model => model.Name, new { htmlAttributes = new { #class = "form-control", #placeholder = "Name" } })
#Html.ValidationMessageFor(model => model.Name, "", new { #class = "col-sm-12 text-danger" })
</div>
<div class="form-group">
#Html.EditorFor(model => model.ContactNumber, new { htmlAttributes = new { #class = "form-control", #placeholder = "Contact Number" } })
#Html.ValidationMessageFor(model => model.ContactNumber, "", new { #class = "col-sm-12 text-danger" })
</div>
<div class="form-group">
#Html.EditorFor(model => model.Email, new { htmlAttributes = new { #class = "form-control", #placeholder = "Email" } })
#Html.ValidationMessageFor(model => model.Email, "", new { #class = "col-sm-12 text-danger" })
</div>
<div class="form-group">
#Html.TextAreaFor(model => model.Comments, new { htmlAttributes = new { #class = "form-control", #placeholder = "Comments" } })
#Html.ValidationMessageFor(model => model.Comments, "", new { #class = "col-sm-12 text-danger" })
</div>
<button type="submit" class="submit_btn">Submit</button>
<img style="display:none;" src="~/Content/Images/LoadingImage.gif" id="imgLoadingEnquiryForm" />
}
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
Second partial view:
#using (Ajax.BeginForm("Create", "MailingList", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "divMessage", LoadingElementId = "imgLoading" }))
{
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
#Html.AntiForgeryToken()
<div id="divMessage">
</div>
<div class="form-group">
#Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { #class = "form-control", #placeholder = "First Name" } })
#Html.ValidationMessageFor(model => model.FirstName, "", new { #class = "col-sm-12 text-danger" })
</div>
<div class="form-group">
#Html.EditorFor(model => model.LastName, new { htmlAttributes = new { #class = "form-control", #placeholder = "Last Name" } })
#Html.ValidationMessageFor(model => model.LastName, "", new { #class = "col-sm-12 text-danger" })
</div>
<div class="form-group">
#Html.EditorFor(model => model.Email, new { htmlAttributes = new { #class = "form-control", #placeholder = "Email" } })
#Html.ValidationMessageFor(model => model.Email, "", new { #class = "col-sm-12 text-danger" })
</div>
<div class="form-group">
#Html.EditorFor(model => model.ZipCode, new { htmlAttributes = new { #class = "form-control", #placeholder = "Zip Code" } })
#Html.ValidationMessageFor(model => model.ZipCode, "", new { #class = "col-sm-12 text-danger" })
</div>
<button type="submit" class="submit_btn">Submit</button><img style="display:none;" src="~/Content/Images/LoadingImage.gif" id="imgLoading" />
}
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
Both partial views are hitting different controllers and method still there is weird situation. I thing multiple "submit" buttons are causing problems, but I do not know how to resolve this issue.
Other ISSUE: after saving content I want to empty input controls in my partial view but it is also not working. I have tried ModelState.Clear()
My Controller:
[HttpPost]
[ValidateAntiForgeryToken]
public string Create(EnquiryFormViewModel vObj)
{
System.Threading.Thread.Sleep(1000);
if (ModelState.IsValid)
{
EnquiryForm mObj = new EnquiryForm();
mObj.Name = vObj.Name;
mObj.ContactNumber = vObj.ContactNumber;
mObj.Email = vObj.Email;
mObj.Comments = vObj.Comments;
mObj.IsContacted = false;
mObj.CreatedOn = DateTime.Now;
string status = enquiryFormService.insertEnquiryForm(mObj);
ModelState.Clear();
return status;
}
else
{
return "<p class=\"bg-danger\">Oops there are some errors on page.</p>";
}
}

Answer 1

There Should Be Only 1 Ajax-unobtrusive in your whole page otherwise your controller will hit multiple times

Answer 2

You can use a success method after form have been submitted like this:-
#using (Ajax.BeginForm("Create", "MailingList", new AjaxOptions { onSuccess="ResetForm",HttpMethod = "POST", UpdateTargetId = "divMessage", LoadingElementId = "imgLoading" }))
And create a Function ResetForm() inside <script> tag and Inside function write
$('#formID')[0].reset();