Duplicate entries issue while using multiple partial views in single page

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();