MVC 表单未从 JQuery 模式内部提交答案

【问题标题】：MVC form not submitting from inside JQuery modalMVC 表单未从 JQuery 模式内部提交
【发布时间】：2012-02-08 17:06:55
【问题描述】：

我在使用 MVC 提交的表单时遇到问题。它可以从 2 个不同的点加载，从一个提交，第二个不回发。

它是在 JQuery 模式对话框中加载的局部视图。当我从主页触发模式时，它会很好地提交。

可以启动另一个模态以允许用户找到一个任务，然后允许启动第二个模态以显示表单。当提交相同的表单时，它不会触发对控制器的发布。

这里是 JQuery 脚本：

$(document).ready(function () {
    var title =$(this).attr("data-dialog-title");

        $(".NoteDialog").live("click", function (e) {

            e.preventDefault();
            if ($(this).attr("data-dialog-title") != "Find Task") 
            {
                if ($(this).attr("data-dialog-id") == "deleteDialog") {
                    $("<div id='formModal'><img src='../../Content/images/ajax-loader.gif' /></div>")
                    .addClass("dialog")
                    .attr("id", $(this).attr("data-dialog-id"))
                    .appendTo("body")
                    .dialog({
                        width: 300,
                        position: [600, 50],
                        title: $(this).attr("data-dialog-title"),
                        close: function () { $(this).remove() },
                        modal: true,
                        buttons: {
                            "Delete": function () {
                                $("#form0").submit();
                                $(this).dialog("close");
                            },
                            Cancel: function () {
                                $(this).dialog("close");
                            }
                        }
                    })
                .load(this.href);
                }
                else 
                {
                    $("<div id='formModal'><img src='../../Content/images/ajax-loader.gif' /></div>")
                    .addClass("dialog")
                    .attr("id", $(this).attr("data-dialog-id"))
                    .appendTo("body")
                    .dialog({
                        width: 800,
                        position: [300, 50],
                        title: $(this).attr("data-dialog-title"),
                        close: function () { $(this).remove() },
                        modal: true,
                        buttons: {
                            "Save": function () {
                                alert('Handler for .submit() called.');
                                $("#form0").submit();
                                $(this).dialog("close");
                            },
                            Cancel: function () {
                                $(this).dialog("close");
                            }
                        }
                    })
                .load(this.href);
                }
            }
            else 
            {
                $("<div id='formModal'><img src='../../Content/images/ajax-loader.gif' /></div>")
                    .addClass("dialog")
                    .attr("id", $(this).attr("data-dialog-id"))
                    .appendTo("body")
                    .dialog({
                        width: 860,
                        position: [300, 50],
                        title: $(this).attr("data-dialog-title"),
                        close: function () { $(this).remove() },
                        modal: true
                })
                .load(this.href);
            }
    });

    $(".close").live("click", function (e) {
        e.preventDefault();
        $(this).closest(".dialog").dialog("close");
    });
});

它用于启动两个模式对话框。出现警报并出现关闭对话框，因此脚本正在处理，只是不提交。

部分视图使用@using (Ajax.BeginForm("AddTime","TimeTracker", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "TimeForm" }))创建表单

两次生成的表单标签是：

<form action="/TimeTracker/AddTime?AddID=183336&TypeID=1&_=1328710484230" data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#TimeForm" id="form0" method="post">

有其他的提交方式吗？我尝试将按钮作为表单本身的一部分，它可以工作但有一个不同的问题；取消按钮不会正确关闭模式，导致每次后续启动都会触发多个模式。如果能够补救，我可以回避这个非发布问题。

更新：我刚刚在使用 XHR 选项卡在 Firebug 中运行场景时发现了一个可能的问题/线索。似乎表单发布到处理第一个模式的 FindTask 方法。它应该发布到从主页调用时发生的 AddTime 方法。

为什么AJAX没有post到form标签中指定的action？

它还发送用于 FindTask 模式的帖子，而不是提交时来自 AddTime 表单的表单字段。

【问题讨论】：

标签： jquery asp.net-mvc modal-dialog

【解决方案1】：

问题原来是 MVC 为两个对话框表单分配了相同的表单 ID。它会提交它发现的第一个错误的。

一旦我为表单分配了一个特定的 ID，我就可以指定要提交哪个表单。

【讨论】：