Question

我有一个mvc项目。我在模态对话框中打开一个表单。用户填写表单并点击保存。表单发布到控制器，但我试图拦截并通过json发布。

查看开发工具网络部分以及在我的json中有alert（）它没有运行，我认为它没有正确附加？我已阅读了几页，看来我的json基本上是正确的。

我知道父页面和窗口之间存在关系...这是一个成为模态窗口的div。但是，我不知道这是否是分解的一部分。

在父窗口中，这是我的模态的启动方式。

$("#edit").click(function (e)
    {
        e.preventDefault();

        var detailsWindow = $("#window").data("kendoWindow");

        if (!detailsWindow)
        {
            // create a new window, if there is none on the page
            detailsWindow = $("#window")
                // set its content to 'loading...' until the partial is loaded
                .html("Loading...")
                .kendoWindow(
                    {
                        modal: true,
                        width: "800px",
                        height: "400px",
                        title: "@T("....")",
                        actions: ["Close"],
                        content:
                            {
                                url: "@Html.Raw(Url.Action("...", "..."))",
                                data: { ... }
                            }
                    }).data('kendoWindow').center();
        }

        detailsWindow.open();

        });

以上代码命中控制器并填充模型，然后按预期加载局部模态中的部分。

在模态部分我有这个：

@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "formCreateEdit" }))
{ 
   ...HTML ELEMENTS...
   <input type="submit" name="save" id="save" value="@T("...")" />
}

<script>
   $(function()
   {
     $("#formCreateEdit").submit
        (function (e)
        {
            alert(e);
            e.preventDefault(); //As we will manually submit the form
            $.ajax(
            {
                type: "POST",
                url: "@Html.Raw(Url.Action("...", "..."))",
                data: $(this).serialize(),
                success: function (data)
                {
                    //here we check if database called resulted in Success/Failure
                    if (data.Result === "Success")
                    {
                        alert('Finis');
                    }
                    else
                    {
                        //Show error message or whatever.
                    }
                }
            })
            //});
        });

</script>

修改

我也尝试拦截按钮点击事件。我可能已经做错了所以这是我尝试的代码：

$('#save').click(function(event)
{
    event.preventDefault();
    // take over and perform ajax post

    alert('ddd');

    $.ajax(
    {
        type: "POST",
        url: "@Html.Raw(Url.Action("...", "..."))",
        data: $(this).serialize(),
        success: function (data)
        {
            //here we check if database called resulted in Success/Failure
            if (data.Result === "Success")
            {
                alert('Finis');
            }
            else
            {
                //Show error message or whatever.
            }
        }
    })

});

Answer 1

拦截提交按钮的点击而不是表格。

$('#save').click(function(event){
   event.preventDefault();
   // take over and perform ajax post
})

Answer 2

所以它最终变得更复杂，因为模态是在通过控制器后从视图加载的...因此它被认为是动态生成的。所以解决方案是在文档生成后附加事件处理程序，如此处所示。我已经链接到这两篇文章，以便与我分享知识的SO成员如果对你有益，也可以获得赞成。

First Post

Second Post

JSON没有在模态窗口上停止表单提交

2 个答案: