在单个页面中使用多个局部视图时出现重复条目​​问题

Question

您好，我在单个 asp .net mvc 页面中有两个局部视图。当我使用任何部分视图提交条目时，2 个条目已保存在数据库中。如果我禁用任何一个局部视图页面都可以正常工作。请帮忙。

我的局部视图是这样的：

@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>

第二个局部视图：

@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>

两个局部视图都在使用不同的控制器和方法，但仍然存在奇怪的情况。我发现多个 "submit" 按钮导致了问题，但我不知道如何解决这个问题。

其他问题： 保存内容后，我想清空局部视图中的输入控件，但它也不起作用。我试过 ModelState.Clear()

我的控制器：

 [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

整个页面中应该只有 1 个 Ajax-不引人注目，否则您的控制器会点击多次

Answer 2

您可以在提交表单后使用成功方法，如下所示：-

@using (Ajax.BeginForm("Create", "MailingList", new AjaxOptions { onSuccess="ResetForm",HttpMethod = "POST", UpdateTargetId = "divMessage", LoadingElementId = "imgLoading" }))

并在 <script> 标签内创建一个 Function ResetForm() 并写入 Inside 函数 $('#formID')[0].reset();