Comment puis-je retourner un résultat JSON à un Ajax.BeginForm
J'ai cette forme 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 tester, un contrôleur simple:
[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"}
};
}
J'ai ajouté ceux-ci sur le Web.Config:
<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
Et ceux-ci à mon paquet 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 gestionnaire OnSuccess="getresult", 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.
UPDATE: le getresult, est défini au-dessus du Ajax.BeginForm comme ceci:
<script type="text/javascript">
var getresult = function (data) {
alert(data.result);
};
</script>
6 réponses
Vous devez inclure le fichier jquery.unobtrusive-ajax.js.
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
JsonResult est juste une sorte de classe dérivée 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 requête AJAX lorsqu'il sera soumis à l'action. Pour que cela fonctionne, vous devez inclure le script suivant dans votre page:
Maintenant, il ne reste plus qu'à écrire cette fonction javascript onSuccess et à traiter les résultats JSON renvoyés par le serveur:
<script type="text/javascript">
var onSuccess = function(data) {
alert(data.result);
};
</script
À la 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);
}
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))
{
....
}
J'ai fait face au même problème avec mon projet. La bibliothèque Ajax n'est pas chargée est le problème. Quand j'ai vérifié mon bundleconfig et mon fichier de mise en page, il avait l'inclusion 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 joker à 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.
Au Lieu de:
var getresult = function (data) {
alert(data.result);
};
Essayez
function getresult(data) {
alert(data.result);
};