Как вызвать действие MVC с помощью JQuery AJAX, а затем отправить форму в MVC?

В моем представлении 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!!!");
        }
    });
});

Затем я хочу представить свою форму. В контроллере у меня есть 2 действия:

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

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

Проблема в том, что когда у меня есть type="submit" в моей кнопке, я не могу достичь SaveDetailedInfo Action, потому что ajax дает мне error, но когда я удаляю type="submit", ajax отлично работает, но Save Действие никогда не выполняется.

Пожалуйста, какие-либо идеи о том, как выполнять оба действия? Я подумал, что после Ajax > Success попробуйте добавить type=submit через jquery и использовать .click(), но это звучит странно для меня.

Ответ 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!!!");
        }
    });
});

Ответ 2

Предполагая, что ваша кнопка в форме, вы не предотвращаете поведение кнопки по умолчанию нажатия кнопки, т.е. ваш вызов AJAX выполняется в дополнение к отправке формы; что вы, вероятно, видите, является одним из

представление формы происходит быстрее, чем вызов AJAX возвращает
представление формы заставляет браузер прерывать запрос 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!!!");
        }
    });
});

Ответ 3

Действие С# "Сохранить" не выполняется, потому что ваш URL-адрес AJAX указывает на "/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"