MVC表单不是从JQuery模式内部提交的

时间:2012-02-08 17:06:56

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

我遇到了在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没有发布到表单标签中指定的操作?

它还会在提交时发送用于FindTask模式的帖子,而不是AddTime表单中的表单字段。

1 个答案:

答案 0 :(得分:1)

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

一旦我为表单指定了特定的ID,我就可以指示要提交的表单。