web-dev-qa-db-fra.com

Comment puis-je retourner un résultat JSON à un Ajax.BeginForm

J'ai ce formulaire simple:

@using (Ajax.BeginForm("CreateProductFromAjaxForm","Product" , 
                  null, 
                  new AjaxOptions() {  HttpMethod = "post", OnSuccess = "getresult" },
                  null))
{
    @Html.EditorFor(m => m)
    <hr />
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" class="btn btn-info" value="Next" />
        </div>
    </div>
}

Et, pour les tests, un simple contrôleur:

    [HttpPost]
    public JsonResult CreateProductFromAjaxForm(CreateProductModel model)
    {
        if (!ModelState.IsValid)
        {
            return new JsonResult()
            {
                JsonRequestBehavior = JsonRequestBehavior.AllowGet,
                Data = new { result = "error" }
            };
        }

       //add to database

        return new JsonResult()
        {
            JsonRequestBehavior = JsonRequestBehavior.AllowGet,
            Data = new { result = "success"}
        };
    }

Je les ai ajoutés au Web.Config:

 <add key="ClientValidationEnabled" value="true" />
 <add key="UnobtrusiveJavaScriptEnabled" value="true" />

et ceux-ci à mon bundle de script:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js",
                    "~/Scripts/jquery.validate.js",
                    "~/Scripts/jquery.validate.unobtrusive.js"
                    ));

Après avoir cliqué sur le bouton "Soumettre", la page résultante affiche simplement:

{"result":"success"}

Je m'attendrais à pouvoir gérer le résultat dans le OnSuccess="getresult" gestionnaire, mais cela ne semble pas fonctionner.

Fondamentalement, j'utilise le Ajax.BeginForm principalement pour la validation côté client.

Pouvez-vous me dire ce qui ne va pas?

MISE À JOUR: j'ai ajouté le HttpMethod = "post" aux AjaxOptions.

MISE À JOUR: le getresult, est défini au-dessus du Ajax.BeginForm comme ça:

<script type="text/javascript">
    var getresult = function (data) {
        alert(data.result);
    };
</script>
c#.netajaxasp.net-mvcasp.net-mvc-5
28
Stefan

vous devez inclure jquery.unobtrusive-ajax.js fichier.

<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
37
Lin

JsonResult est juste une sorte de classe dérivée d'ActionResult qui indique que cette action retournera JSON au lieu d'une vue ou autre chose.

Par exemple:

 @using (Ajax.BeginForm("CreateProductFromAjaxForm","Product" , null, 
              new AjaxOptions() {  OnSuccess = "getresult" }, null))

Cela générera un élément qui enverra une demande AJAX lorsqu'elle sera soumise à l'action. Pour que cela fonctionne, vous devez inclure le script suivant sur votre page:

Il ne reste plus qu'à écrire cette fonction javascript onSuccess et à traiter les résultats JSON retournés par le serveur:

<script type="text/javascript">
var onSuccess = function(data) {
    alert(data.result);
};
</script
8
Vaibhav Parmar

en page

new AjaxOptions() {  
    OnSuccess = "getresult", 
}

en javascript

function getresult(data){
   alert(data.x);
}

en c #

[HttpPost]
public ActionResult CreateProductFromAjaxForm(CreateProductModel model)
{
    if (!ModelState.IsValid)
    {
        return Json("error", JsonRequestBehavior.AllowGet);
    }

   //add to database

    return Json(model, JsonRequestBehavior.AllowGet);
}
6
Monzur

Essayez de spécifier la méthode HTTP:

new AjaxOptions() {  
    OnSuccess = "getresult", 
    HttpMethod = "post" 
}

Exemple:

@using (Ajax.BeginForm("CreateProductFromAjaxForm", "Product" , null, new AjaxOptions() {  OnSuccess = "getresult", HttpMethod = "post" }, null))
{
    ....
}
2
Rui Jarimba

J'ai rencontré le même problème avec mon projet. La bibliothèque Ajax n'est pas en cours de chargement est le problème. Lorsque j'ai vérifié mon bundleconfig et mon fichier de mise en page, il contenait l'include mais j'inclus le nom absolu de la bibliothèque ajax comme

bundles.Add(new ScriptBundle("~/bundles/jqueryajax").Include(
"~/Scripts/jquery.unobtrusive-ajax.min.js"));

Mon ami m'a demandé d'utiliser le caractère générique à la place. Étonnamment, bundles.Add(new ScriptBundle("~/bundles/jqueryajax").Include("~/Scripts/jquery.unobtrusive-ajax*")); a commencé à inclure la bibliothèque ajax.

Maintenant, mes fonctions OnSuccess se chargent comme prévu plutôt que de regarder l'écran vide avec une réponse json dessus.

1
Ram Boppana

Au lieu de:

var getresult = function (data) {
    alert(data.result);
};

Essayer

function getresult(data) {
    alert(data.result);
};
0
Rui Jarimba