從jQuery回調沒有進入Controller / Action

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中.load(this.href); 這意味着您需要使用事件委派來處理按鈕。 更改

$(".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) {
        ....