通过 javascript 提交时，MVC 发布丢失值答案

【问题标题】：MVC post losing values when submitted via javascript通过 javascript 提交时，MVC 发布丢失值
【发布时间】：2016-05-17 01:46:36
【问题描述】：

我有一个带有提交按钮的 MVC 表单：

 <form method="POST" id="submitProject" action="@Url.Action(SubmitProject, "ProjectSummary")">
                <button type="submit" name="submitButton" id="submitProject" value="saveToProposed" class="btn btn-primary">Submit Project</button>
            </form>

但是当用户点击该按钮时，我想在帖子继续之前向他们显示一个确认对话框：

 $('#submitProject').submit(function (e) {
        var currentForm = this;
        e.preventDefault();
        bootbox.dialog({
            message: "Approve or Reject",
            title: "Project Approval",
            buttons: {
                success: {
                    label: "Approve",
                    className: "btn-success",
                    callback: function () {
                        alert("Approved");
                        currentForm.submit();
                    }
                },
                danger: {
                    label: "Reject",
                    className: "btn-danger",
                    callback: function () {
                        alert("Rejected");
                        currentForm.submit();
                    }
                },
                main: {
                    label: "Cancel",
                    className: "btn-primary",
                    callback: function () {
                        return true;
                    }
                }
            }
        });
    });

在我的控制器中，我试图像这样捕获提交按钮的值：

 [HttpPost]
        public ActionResult SubmitProject(ProjectModel m, string submitButton)
        {
}

如果我没有那个 preventDefault 行，我可以在控制器中看到 submitButton 的值。使用 preventDefault，该值始终为空。这是我在尝试学习 MVC 时一直在努力解决的问题。如果我没有任何客户端交互我会没事的。但是试图让 js 与 mvc 一起玩让我感到耳鸣。我做错了什么？

【问题讨论】：

只有在单击提交按钮时才会回发提交按钮值。您正在取消默认操作并调用currentForm.submit();，这将不包括提交按钮的值。
这是有道理的。但我有什么办法？我在这个表单上有多个提交按钮，我需要知道哪个被点击了，但我还需要那个确认对话框
您可以只处理.submit() 事件，但如果您想取消它（即单击“取消”按钮）或return true 让正常提交发生（并删除e.preventDefault();）

标签： javascript asp.net-mvc

【解决方案1】：

表单只回发被点击的提交按钮的名称/值对。在您的情况下，您取消按钮 .click() 事件，然后调用 .submit() 函数（即提交不再由点击触发，因此其值不会在请求中发送）。

与其调用e.preventDefault();，不如调用一个返回true或false的函数，就像你可以使用javascript中的.confirm()函数取消表单提交一样（即return confirm("...");

function confirmSubmit()
{
    bootbox.dialog({
        ....
        // for the success and danger buttons - return true;
        // for the main button - return false

        buttons: {
            success: {
                label: "Approve",
                className: "btn-success",
                callback: function () {
                    return true;
                }
            },
            ....
    });
}

$('#submitProject').submit(function (e) {
    return confirmSubmit();
});

附注：您的表单只有一个提交按钮，所以string submitButton 的值永远只会是"saveToProposed"。不确定您是否从代码中省略了它，但我假设您确实至少有 2 个提交按钮。

【讨论】：