Question

我有一个问题，即AJAX联系表单在我第一次提交验证警告时已正确重新加载，但是如果我再次提交表单而不修复验证问题，那么它只会加载联系表单部分视图而不是其他任何内容。如果我在验证提交失败后解决验证问题并提交表单，它会发送但部分发送＆＃39;通常在页面内加载的视图本身作为自己的页面加载。

这是我的表格（缩短）：

@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移出被替换的部分。

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

1 个答案: