Comment appeler l'action MVC en utilisant Jquery AJAX puis soumettre le formulaire dans MVC?

Sur mon MVC Vue que j'ai sur le bouton:

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

Lorsque je clique sur ce bouton, j'ai besoin d'appeler une Action, de faire quelques trucs et puis il y Soumettre mon formulaire.

J'ai cette 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!!!");
        }
    });
});

Alors je veux envoyer mon formulaire. Dans le Contrôleur, j'ai 2 Actions:

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

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

Le problème, c'est quand j'ai type="submit" dans mon bouton, je ne peux pas atteindre SaveDetailedInfo Action, cause d'ajax me donne errormais quand j'enlève type="submit"ajax fonctionne très bien, mais Save Action ne s'exécute jamais.

S'il vous plaît, toutes les idées comment exécuter deux Actions? J'ai pensé que peut-être après Ajax > Success essayez d'ajouter type=submit grâce à jquery et l'utilisation .click()mais il semble étrange pour moi.

source d'informationauteur Bryuk

  1. 20

    Utilisation preventDefault() pour mettre fin à l'événement de bouton soumettre et en appel ajax succès soumettre le formulaire à l'aide de 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. 5

    En supposant que votre bouton dans un formulaire, vous n'empêchent pas le comportement par défaut du bouton de passe c'est à dire Votre appel AJAX est faite en plus du formulaire de soumission; ce que vous êtes très probable de voir est l'un des

    1. la soumission du formulaire arrive plus vite que l'appel AJAX retourne
    2. la soumission du formulaire, le navigateur pour annuler la requête AJAX et continue de la soumission du formulaire.

    De sorte que vous devriez éviter le comportement par défaut du bouton cliquez sur

    $('#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. 2

    Votre C# action "Enregistrer" n'est pas exécuté parce que votre AJAX url pointe vers "/Home/SaveDetailedInfo" et non pas "/Home/Enregistrer".

    Pour appeler une autre action dans une action, vous pouvez peut-être essayer cette solution:
    lien

    Voici une autre meilleure solution : lien

    [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"