如何使用Jquery AJAX调用MVC Action,然后在MVC中提交表单？

Question

在我的MVC视图中我有按钮:

<input id="btnSave" type="submit" name="Save" value="Save" />

当我点击这个按钮时,我需要调用一个动作,在那里做一些事情,然后提交我的表格.

我有这个jQuery:

$('#btnSave').click(function () {    
    $.ajax({
        url: "/Home/SaveDetailedInfo",
        type: "POST",
        data: JSON.stringify({ 'Options': someData}),
        dataType: "json",
        traditional: true,
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            if (data.status == "Success") {
                alert("Done");
            } else {
                alert("Error occurs on the Database level!");
            }
        },
        error: function () {
            alert("An error has occured!!!");
        }
    });
});

然后我想提交我的表格.在Controller我有2个动作:

public ActionResult SaveDetailedInfo(Option[] Options)
{
    return Json(new { status = "Success", message = "Success" });
}

[HttpPost]
public ActionResult Save()
{ 
    return RedirectToAction("Index", "Home");
}

问题是当我有type="submit"我的按钮,我无法达到SaveDetailedInfoAction,因为ajax给了我error,但是当我删除时type="submit",ajax工作正常,但SaveAction永远不会执行.

请问,如何执行这两项操作？我想也许在Ajax > Success尝试type=submit通过jquery 添加并使用之后.click(),但这对我来说听起来很奇怪.

Answer 1

使用preventDefault()停止提交按钮,并在Ajax调用成功的情况下,使用提交表单submit():

$('#btnSave').click(function (e) {
    e.preventDefault(); // <------------------ stop default behaviour of button
    var element = this;    
    $.ajax({
        url: "/Home/SaveDetailedInfo",
        type: "POST",
        data: JSON.stringify({ 'Options': someData}),
        dataType: "json",
        traditional: true,
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            if (data.status == "Success") {
                alert("Done");
                $(element).closest("form").submit(); //<------------ submit form
            } else {
                alert("Error occurs on the Database level!");
            }
        },
        error: function () {
            alert("An error has occured!!!");
        }
    });
});

Answer 2

假设您的按钮位于表单中,则不会阻止按钮单击的默认行为发生,即除了表单提交之外还进行了您的AJAX调用; 你很可能看到的是其中之一

1. 表单提交的速度比AJAX调用返回的速度快
2. 表单提交导致浏览器中止AJAX请求并继续提交表单.

因此,您应该阻止按钮单击的默认行为

$('#btnSave').click(function (e) {

    // prevent the default event behaviour    
    e.preventDefault();

    $.ajax({
        url: "/Home/SaveDetailedInfo",
        type: "POST",
        data: JSON.stringify({ 'Options': someData}),
        dataType: "json",
        traditional: true,
        contentType: "application/json; charset=utf-8",
        success: function (data) {

            // perform your save call here

            if (data.status == "Success") {
                alert("Done");
            } else {
                alert("Error occurs on the Database level!");
            }
        },
        error: function () {
            alert("An error has occured!!!");
        }
    });
});