如何使用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!!!");
        }
    });
});

然后我想提交我的表单。在控制器中，我有两个动作：

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

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

问题是当我在按钮中使用 type="submit" 时，我无法到达 SaveDetailedInfo 操作，因为 Ajax 给了我一个错误，但是当我去除 type="submit" 时，Ajax 就可以正常工作了，但是 Save 操作永远不会执行。

请问有什么办法可以同时执行这两个操作吗？我想过在 Ajax > Success 后尝试通过 jQuery 添加 type=submit 并使用 .click()，但这听起来很奇怪。

- Bryuk

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!!!");
        }
    });
});

- Ehsan Sajjad

---

好的。现在我可以访问Home/SaveDetailedInfo，但是当我提交表单时，无法进入Save()操作。 - Bryuk

确保 Ajax 调用成功后，在成功回调中放置警报以进行验证。 - Ehsan Sajjad

我修改了submit()的代码，现在它可以正常工作了！非常感谢！ - Bryuk

你改了什么，@Bryuk。 - Ehsan Sajjad

$(element).closest("form").submit(); - Bryuk

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!!!");
        }
    });
});

- Russ Cam

---

好的。现在我可以访问Home/SaveDetailedInfo了，但是当我提交表单时，我无法进入Save()操作。 - Bryuk

Answer 3

你的C#操作“保存”没有执行，因为你的AJAX URL指向“/Home/SaveDetailedInfo”，而不是“/Home/Save”。

如果要在一个动作中调用另一个动作，可以尝试这个解决方案：链接

这里有另一个更好的解决方案：链接

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

[HttpPost]
public ActionResult Save()
{ 
    return RedirectToAction("SaveDetailedInfo", Options);
}

AJAX:

Initial ajax call url: "/Home/Save"
on success callback: 
   make new ajax url: "/Home/SaveDetailedInfo"

- TchiYuan

---

动作“保存”与按钮名称为“Save”类型为“Submit”的按钮名称相同，因此当我单击此按钮时，我将进入[HttpPost] ActionResult Save()。 - Bryuk

不要使用<input type="submit"..>，而是尝试使用<button id="btnSave">保存</button>，你的JavaScript将在单击btnSave时触发。 - TchiYuan

保存详细信息操作后，我需要提交此表单。 - Bryuk

然后在您的ajax成功回调中，评估如果data.status ==“Success”，然后获取您的表单字段值并使用它构建一个新的json对象，并进行新的AJAX调用。 - TchiYuan

没错，但我相信有更好的方法进入Save() ActionResult，并处理Model和其他MVC内容。 - Bryuk