web-dev-qa-db-fra.com

Comment appeler MVC Action à l'aide de Jquery AJAX puis soumettre le formulaire dans MVC?

Sur ma vue MVC, j'ai le bouton:

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

Lorsque je clique sur ce bouton, j’ai besoin d’appeler une action, d’effectuer certaines tâches puis de soumettre mon formulaire.

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

Ensuite, je veux soumettre mon formulaire. Dans Controller, 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 est que lorsque j'ai type="submit" Dans mon bouton, je ne peux pas atteindre SaveDetailedInfo Action, car ajax me donne error, mais lorsque je supprime type="submit" , ajax fonctionne bien, mais Save L’action ne s’exécute jamais.

S'il vous plaît, des idées sur la façon d'exécuter les deux actions? Je pensais que peut-être après Ajax > Success Essayer d’ajouter type=submit Via jquery et d’utiliser .click(), mais cela me semble étrange.

javascriptjqueryajaxasp.net-mvcasp.net-mvc-4
15
Bryuk

Utilisez preventDefault() pour arrêter l’événement du bouton submit et dans le succès de l’appel ajax, soumettez 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!!!");
        }
    });
});
22
Ehsan Sajjad

En supposant que votre bouton se trouve dans un formulaire, vous n’empêchez pas le comportement par défaut du clic du bouton, c’est-à-dire que votre appel AJAX est fait en plus de la soumission du formulaire; ce qui est très probable voir est l'un des

  1. la soumission du formulaire est plus rapide que l'appel AJAX renvoie
  2. la soumission du formulaire amène le navigateur à abandonner la demande AJAX et continue de soumettre le formulaire.

Donc, vous devriez empêcher le comportement par défaut du clic du bouton

$('#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!!!");
        }
    });
});
5
Russ Cam

Votre action C # "Enregistrer" ne s'exécute pas car AJAX url pointe sur "/ Home/SaveDetailedInfo" et non sur "/ Home/Save".

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

Voici une autre meilleure solution: link

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