MVC中的Ajax联系人表单，验证失败后第二次提交时出现问题

Question

我遇到了一个问题，我第一次提交时正确地重新加载了AJAX联系人表单，并带有验证警告，但是如果我再次提交表单而没有解决验证问题，它只加载联系人表单的部分视图，而不加载其他内容。如果我纠正了验证问题，并在一次验证提交失败后提交了表单，它确实会发送，但通常在页面中加载的部分"发送"视图会作为自己的页面自行加载。

这是我的表格（缩写）：

@model international_mvc.Models.contactform
<script type="text/javascript" src="@Url.Content("/scripts/contactform.js")"></script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<div id="form_container" class="highlight_box contact_box">
    @using (Ajax.BeginForm("FormSubmit", "Home", new AjaxOptions
    {
        HttpMethod = "POST",
        UpdateTargetId = "cont_form"
    }, new { id = "cont_form" }))
    {
        @Html.ValidationSummary(true)
        @Html.AntiForgeryToken()
        <div class="form_col_l">
            <p class="form_title">
                @Html.LabelFor(model => model.FirstName, "Name")@Html.ValidationMessageFor(model => model.FirstName, null, new { @class = "errortext" })
            </p>
            <div class="resize_input">
                @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { placeholder = "First Name" } })
            </div>
  <div class="rcp_cont_right">
                    <p style="font-size:18px; color:red;">@ViewBag.Message</p>
                </div>
                <div class="buttoncontainer">         
                    <button class="button_form_send" name="btn" id="btn" type="submit">Send to OnLineTraining</button>
                    <button class="button_form_clear" type="reset">Clear form</button>
                </div> }

以下是与表单提交相关的控制器部分：

public ActionResult sent()
        {
            return PartialView();
        }

        [HttpPost]
        [ValidateAntiForgeryToken]
        public async System.Threading.Tasks.Task<ActionResult> FormSubmit(contactform model)
        {
            var response = Request["g-recaptcha-response"];
            string secretKey = "akey";
            var client = new WebClient();
            var result = client.DownloadString(string.Format("https://www.google.com/recaptcha/api/siteverify?secret={0}&response={1}", secretKey, response));
            var obj = JObject.Parse(result);
            var status = (bool)obj.SelectToken("success");
            ViewBag.Message = status ? "Google reCaptcha validation success" : "Please click on the recaptcha";

            if (ModelState.IsValid && status)
            {
                try
                {
                    var body = "<p>Email From: {0} ({1})</p><p>Message:</p><p>{2}</p>";
                    var message = new System.Net.Mail.MailMessage();
                    message.To.Add(new MailAddress("anemail"));
                    message.Subject = "Contact Us";
                    message.Body = string.Format(body, model.FirstName, model.LastName, model.Role, model.Location, model.Email, model.forg, model.orgname, model.COM, model.commissioninginfo, model.addinfo, model.phone);
                    message.IsBodyHtml = true;
                    using (var smtp = new SmtpClient())
                    {
                        await smtp.SendMailAsync(message);
                        return PartialView("_sent", model);
                    }
                }
                catch (Exception)
                {
                    return View("Error");
                }
            }
            else
            {
                return PartialView("_contactform", model);
            }

        }

有人能向我解释我做错了什么吗？当用户第一次未能正确填写表单时，我如何让表单继续在同一页面上返回相同的部分视图？

我可能应该提到上面的表格是另一个页面的一部分，它看起来像这样：

 <h2>Contact us</h2>
 @Html.Partial("_contactform")

感谢

Answer 1

您的分部不应包括Ajax.BeginForm位。第一次加载页面时，Razor会包含部分内容，并将其作为完整HTML文档的一部分发送到浏览器。浏览器解析该文档并运行Ajax.BeginForm添加的JS。然而，当您提交时，部分会通过AJAX替换，并且出于安全原因，AJAX响应中的JS是而不是运行。因此，您最终基本上只得到一个标准的旧的非AJAX表单，所以当您提交时，它的处理方式就像标准的旧POST一样。

总之，不要替换包含需要运行的JS的部分，即将Ajax.BeginForm从被替换的部分中移出。