javascript - 如何使用 Jquery AJAX 调用 MVC Action 然后在 MVC 中提交表单?

标签 javascript jquery ajax asp.net-mvc asp.net-mvc-4

在我的 MVC View 上我有按钮:

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

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

我有这个 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 个 Action :

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

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

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

拜托,有什么想法可以执行这两个操作吗?我想也许在 Ajax > Success 之后尝试通过 jquery 添加 type=submit 并使用 .click(),但这对我来说听起来很奇怪。

最佳答案

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

关于javascript - 如何使用 Jquery AJAX 调用 MVC Action 然后在 MVC 中提交表单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25068431/

相关文章:

javascript - Jquery/Ajax 通过 ID 更新 Span 或 Div 而无需刷新页面

javascript - 从面部数组中删除重复的面部 - Three.js

javascript - 选择一项向下滑动

javascript - D3 : dataset update does not remove elements from DOM

javascript - Ionic Controller 使用参数在 $state.go 上重新加载

javascript - 输入掩码中的可选字符

javascript - 使用json数据动态生成图表

javascript - Linnworks 的 AJAX 请求

php - 用JavaScript代替跨域请求

javascript - 将 .html 与 JQuery 一起使用不会将数组中的所有项目发布到 HTML