来自 jQuery 的回调没有到达控制器/动作

Question

我在 MVC 应用程序中使用 jQuery 在模式对话框中有一个联系我们表单。该框弹出很好，但是当我单击对话框中的提交按钮时，它没有进入我的操作方法。我已经尝试了几件事，但无法弄清楚出了什么问题。有人可以看到我可能做错了什么吗？谢谢。

PartialView（联系我们表格）：

@model BackgroundSoundBiz.Models.EmailModel

<form id="sendEmailForm">
    <div id="sendForm">
        @Html.LabelFor(m => m.senderName)<br />
        @Html.TextBoxFor(m => m.senderName)
        <br />
        @Html.LabelFor(m => m.senderEmail)<br />
        @Html.TextBoxFor(m => m.senderEmail)
        <br />
        @Html.LabelFor(m => m.message)<br />
        @Html.TextAreaFor(m => m.message)
        <br />
        <input class="close" name="submit" type="submit" value="Submit" />
    </div>
</form>

型号：

    public class EmailModel
    {
        [Required]
        [Display(Name = "Name")]
        public string senderName { get; set; }

        [Required]
        [Display(Name = "Email")]
        public string senderEmail { get; set; }

        [Required]
        [Display(Name = "Message")]
        public string message { get; set; }
    }

jQuery:

<script type="text/javascript">
        $.ajaxSetup({ cache: false });

        $(document).ready(function () {
            $(".openDialog").on("click", function (e) {
                e.preventDefault();
                $("<div></div>").addClass("dialog")
                    .attr("id", $(this).attr("data-dialog-id"))
                    .appendTo("body")
                    .dialog({
                        title: $(this).attr("data-dialog-title"),
                        close: function () { $(this).remove() },
                        width: 500,
                        height: 350,
                        show: { effect: "blind", duration: 1000 },
                        hide: { effect: "explode", duration: 1000 },
                        modal: true
                    }).load(this.href);
            });

            $(".close").on("click", function (e) {
                e.preventDefault();

                var senderName = $("#Name").val();
                var senderEmail = $("#Email").val();
                var message = $("#Message").text();

                $.ajax({
                    type: "POST",
                    url: "/Home/SendEmail",
                    data: { "senderName": senderName, "senderEmail": senderEmail, "message": message },
                    success: function (data) {
                        alert("Your email was successfully sent.");
                        $(this).closest(".dialog").dialog("close");
                    },
                    error: function (data) {
                        alert("There was an error sending your email.  Please try again or contact system administrator.");
                        $(this).closest(".dialog").dialog("close");
                    }
                })
            });
        });
    </script>

控制器：

        public ActionResult SendEmail()
        {
            return PartialView("SendEmail", new EmailModel());
        }

        [HttpPost]
        public ActionResult SendEmail(EmailModel model)
        {
            bool isSuccessful = true;

            if (ModelState.IsValid)
            {
                //send email
            }

            return Json(isSuccessful);
        }

Answer 1

您使用.load(this.href); 将表单动态添加到DOM，这意味着您需要使用事件委托来处理按钮。改变

$(".close").on("click", function (e) {

到

$(document).on('click', '.close', function(e) {`

虽然您应该在首次渲染视图时将document 替换为页面上存在的最近的祖先。

此外，您的 jQuery 选择器不正确，您不会发布任何与您的模型相关的值。正确的选择器基于HtmlHelper 方法生成的id 属性是

var senderName = $("#senderName").val();
var senderEmail = $("#senderEmail").val();
var message = $("#message").val();

不过最好使用.serialize() 方法，它可以正确序列化您的表单控件

$.ajax({
    type: "POST",
    url: '@Url.Action("SendEmail", "Home")', // don't hard code
    data: $('#sendEmailForm').serialize(),
    success: function (data) {
        ....