javascript - 通过 javascript 提交时 MVC 会丢失值

Question

我有一个带有提交按钮的 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;
                    }
                }
            }
        });
    });

在我的 Controller 中，我试图捕获提交按钮的值，如下所示:

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

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

Answer 1

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

不要调用 e.preventDefault();，而是调用返回 true 或 false 的函数，就像您可以使用 javascript .confirm() 函数取消表单提交(即 return recognize("...");

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 个提交按钮。