在数据库中插入记录，但不会在AJAX调用中播放成功代码

Question

我的代码成功地插入了数据库中的记录，但不会"成功地发送"消息，并且不会重定向到任何其他视图，并且插入后不会清除文本框。似乎帖子方法只是在停止。

控制器：

//GET 
    [HttpGet]
    public ActionResult ContactUs()
    {
        return View();
    }
//POST
    [HttpPost]
    public ActionResult ContactUs(string Name, string Email, string Message, string Address)
    {
        ContactusMessages contactUs = new ContactusMessages();
        contactUs.Name = Name;
        contactUs.Email = Email;
        contactUs.Phone = "---";
        contactUs.Message = Message;
        contactUs.IPAddress = Address;
        contactUs.IsSeen = false;
        contactUs.DateAdded = DateTime.Now;
        db.ContactusMessages.Add(contactUs);
        db.SaveChanges();
        ModelState.Clear();
        return RedirectToAction("Index", "HomeEn");
    }

查看：

@{
ViewBag.Title = "ContactUs";
Layout = "~/Views/Shared/_LayoutUserEn.cshtml";
}
<section class="body-contact">
<div class="container">
    <div class="content" id="contact-us">
        <div class="top">
            <img src="~/Content/itree-en/images/logo.png" alt="logo">
            <h3>Contact Us</h3>
        </div>
            <form id="myForm" method="post">
            <div class="right">
                <input id="Name" name="Name" placeholder="Name" type="text" value="" />
                <h5 id="Err_Email" style="font-weight: 100;font-size: 14px;color:#FF0000;"></h5>
                <input id="Email" name="Email" placeholder="Email " type="text" value="" />
                <input id="Address" name="Address" placeholder="Address" type="text" value="" />
            </div>
            <div class="left">
                <textarea cols="20" id="Message" name="Message" placeholder="Message" rows="2"></textarea>
                <button type="submit" value="Send" class="hvr-underline-from-center" id="b">Send</button>
                <h5 id="result"><span class="field-validation-valid" data-valmsg-for="message" data-valmsg-replace="true"></span></h5>
            </div>
           </form>
          </div>
          </div>
          </section>
          <script>
            function onformsubmitProject() {
        if ($('#Name').val() != '' && $('#Email').val() != '' && $('#Address').val() != '' && $('#Message').val() != '') {
            return true;
        }
        else {
            if ($('#Name').val() == '') { $('#Name').css("borderColor", "red"); } else { $('#Name').css("borderColor", ""); }
            if ($('#Email').val() == '') { $('#Email').css("borderColor", "red"); } else { $('#Email').css("borderColor", ""); }
            if ($('#Address').val() == '') {   $('#Address').css("borderColor", "red"); } else {  $('#Address').css("borderColor", ""); }
            if ($('#Message').val() == '') {  $('#Message').css("borderColor", "red"); } else {  $('#Message').css("borderColor", ""); }
            return false;
        }
        };
        </script>
        <script type="text/javascript">
    $(document).ready(function () {
        $('#myForm').on('submit', function (event) {
            event.preventDefault();
            if (!onformsubmitProject()) return false;
            $.ajax({
                url: '/HomeEn/ContactUs',
                type: 'post',
                data: $('#myForm').serialize(),
                beforeSend: function () {
                    $('#b').html('Sending .....'); // change submit button text
                    $('#result').text("");
                    $('#Name').css("borderColor", "");
                    $('#Email').css("borderColor", "");
                    $('#Address').css("borderColor", "");
                    $('#Message').css("borderColor", "");
                },
                success: function (data) {
                    // There is no problem with the validation
                    if (data.success) {
                        $('#b').html('Send');
                        $('#result').text("Sent successfully");
                        document.getElementById("myForm").reset();
                        $('#Name').css("borderColor", "");
                        $('#Err_Email').text("");
                        $('#Address').css("borderColor", "");
                        $('#Message').css("borderColor", "");
                        $('#Email').css("borderColor", "");
                    }
                    // Problem happend during the validation, display message related to the field.
                    $.each(data.Errors, function (key, value) {
                        if (value != null) {
                            //$("#Err_" + key).html(value[value.length - 1].ErrorMessage);
                            $("#" + key).css("borderColor", "rgba(247, 5, 5, 0.53)");
                            $('#b').html('Send');
                            $('#result').text("");
                        }
                    });
                }
            });
        });
    });

Answer 1

我所理解的您需要ajax.beginform。我已经相应地改变了您的观点。请检查。

 @{
        ViewBag.Title = "ContactUs";
        Layout = "~/Views/Shared/_LayoutUserEn.cshtml";
        var formId = Guid.NewGuid().ToString();
  }
  @Scripts.Render("~/bundles/jquery")
  @Scripts.Render("~/bundles/bootstrap")
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<section class="body-contact">
    <div class="container">
        <div class="content" id="contact-us">
            <div class="top">
                <img src="~/Content/itree-en/images/logo.png" alt="logo">
                <h3>Contact Us</h3>
            </div>
            @using (Ajax.BeginForm("ContactUs", "HomeEn", new AjaxOptions
                    {
                        HttpMethod = "post",
                        OnBegin = "Begin",
                        OnFailure = "Failure",
                        OnComplete = "Complete",
                        OnSuccess = string.Format("Success(data, '{0}')", formId)
                    }, new{id = formId}))
            {
                <form id="myForm" method="post">
                    <div class="right">
                        <input id="Name" name="Name" placeholder="Name" type="text" value="" />
                        <h5 id="Err_Email" style="font-weight: 100;font-size: 14px;color:#FF0000;"></h5>
                        <input id="Email" name="Email" placeholder="Email " type="text" value="" />
                        <input id="Address" name="Address" placeholder="Address" type="text" value="" />
                    </div>
                    <div class="left">
                        <textarea cols="20" id="Message" name="Message" placeholder="Message" rows="2"></textarea>
                        <button type="submit" value="Send" class="hvr-underline-from-center" id="b">Send</button>
                        <h5 id="result"><span class="field-validation-valid" data-valmsg-for="message" data-valmsg-replace="true"></span></h5>
                    </div>
                </form>
            }

        </div>
    </div>
</section>
<script type="text/javascript">
    function onformsubmitProject() {
        if ($('#Name').val() != '' && $('#Email').val() != '' && $('#Address').val() != '' && $('#Message').val() != '') {
            return true;
        }
        else {
            if ($('#Name').val() == '') { $('#Name').css("borderColor", "red"); } else { $('#Name').css("borderColor", ""); }
            if ($('#Email').val() == '') { $('#Email').css("borderColor", "red"); } else { $('#Email').css("borderColor", ""); }
            if ($('#Address').val() == '') { $('#Address').css("borderColor", "red"); } else { $('#Address').css("borderColor", ""); }
            if ($('#Message').val() == '') { $('#Message').css("borderColor", "red"); } else { $('#Message').css("borderColor", ""); }
            return false;
        }
    };

    function Begin() {
        if (!onformsubmitProject()) return false;
        $('#b').html('Sending .....'); // change submit button text
        $('#result').text("");
        $('#Name').css("borderColor", "");
        $('#Email').css("borderColor", "");
        $('#Address').css("borderColor", "");
        $('#Message').css("borderColor", "");
    }
    function Success(data, formId) {
        if (data == "success") {
            $('#b').html('Send');
            $('#result').text("Sent successfully");
            document.getElementById(formId).reset();
            $('#Name').css("borderColor", "");
            $('#Err_Email').text("");
            $('#Address').css("borderColor", "");
            $('#Message').css("borderColor", "");
            $('#Email').css("borderColor", "");
        }
    }
    function Failure(data) {
    }
    function Complete(data) {
    }
</script>

请注意，您需要添加jquery.unobtrusiver-ajax.js才能成功工作。

您还需要稍微更改控制器。您必须发送JSONRESULT，您将在JavaScript函数中收到相应的结果。

        [HttpPost]
        public ActionResult ContactUs(string Name, string Email, string Message, string Address)
        {
            ContactusMessages contactUs = new ContactusMessages();
            contactUs.Name = Name;
            contactUs.Email = Email;
            contactUs.Phone = "---";
            contactUs.Message = Message;
            contactUs.IPAddress = Address;
            contactUs.IsSeen = false;
            contactUs.DateAdded = DateTime.Now;
            db.ContactusMessages.Add(contactUs);
            db.SaveChanges();
            ModelState.Clear();
            return Json("success", JsonRequestBehavior.AllowGet);
           // return RedirectToAction("Index", "HomeEn");
        }

在这里，我将"成功"作为JSON结果返回。您可以根据需要更改它。

nb：我剩下功能故障（数据）并故意完成功能（数据）空白。您可以在此处保留代码，或者如果不需要，则可以从JS以及AJAX构造函数中删除这些代码。我已经检查了，并且代码工作正常。祝您好运！