Jquery AJAX를 사용하여 MVC Action을 호출한 후 MVC에서 양식을 제출하는 방법은 무엇입니까?

Jquery AJAX를 사용하여 MVC Action을 호출한 후 MVC에서 양식을 제출하는 방법은 무엇입니까?

내 MVC View에는 다음 버튼이 있습니다.

<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액션, 아약스가 내게 주니까.error, 제거할 때는type="submit", ajax는 잘 작동하지만,Save작업이 실행되지 않습니다.

두 가지 액션을 모두 실행하는 방법을 알고 계십니까?어쩌면 다음에Ajax > Success덧붙이려고 애쓰다type=submit교묘히 이용하여.click(), 이상하게 들립니다.

사용하다preventDefault()제출 버튼의 이벤트를 중지하고 ajax call success에서 다음을 사용하여 양식을 제출합니다.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!!!");
        }
    });
});

단추가 양식이라고 가정하면 단추 클릭의 기본 동작이 발생하는 것을 방지하지 못합니다.양식 제출 외에 귀하의 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!!!");
        }
    });
});

AJAX URL이 "/Home/SaveDetailedInfo"가 아닌 "/Home/SaveDetailedInfo"를 가리키고 있으므로 C# 작업 "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"

언급URL : https://stackoverflow.com/questions/25068431/how-to-call-mvc-action-using-jquery-ajax-and-then-submit-form-in-mvc