Comment utiliser Ajax.Aide MVC de BeginForm avec le résultat JSON?
j'essaie d'utiliser le ASP.NET MVC Ajax.Aide BeginForm mais ne veulent pas utiliser les options d'insertion de contenu existantes lorsque l'appel est terminé. Au lieu de cela, je veux utiliser une fonction JavaScript personnalisée comme callback.
cela fonctionne, mais le résultat que je veux devrait être retourné comme JSON. Malheureusement, le framework ne traite les données que comme une chaîne. Ci-dessous est le code client. Le code du serveur renvoie simplement un JsonResult avec un champ, UppercaseName.
<script type='text/javascript'>
function onTestComplete(content) {
var result = content.get_data();
alert(result.UppercaseName);
}
</script>
<% using (Ajax.BeginForm("JsonTest", new AjaxOptions() {OnComplete = "onTestComplete" })) { %>
<%= Html.TextBox("name") %><br />
<input type="submit" />
<%} %>
au lieu d'afficher le résultat en majuscules, il affiche indéfini. contenu.get_data () semble contenir le JSON, mais seulement sous forme de chaîne de caractères. Comment convertir ceci en objet?
tout cela semble un peu alambiqué en réalité. Y a-t-il une meilleure façon d'obtenir le contenu résultant en utilisant Ajax.BeginForm? Si c'est aussi dur, je peux sauter L'Ajax.BeginForm entièrement et il suffit d'utiliser la bibliothèque de formulaires jQuery.
5 réponses
essayez ceci:
var json_data = content.get_response().get_object();
cela vous donnera le résultat dans le format JSON et vous pouvez utiliser json_data[0] pour obtenir le premier enregistrement
vous pouvez utiliser OnFailure et OnSuccess au lieu de OnComplete ; OnSuccess vous donne les données comme un objet JSON approprié. Vous pouvez trouver les signatures de la méthode callback gravées dans ~/Scripts/jquery.unobtrusive-ajax.min.js que vous devriez charger sur votre page.
dans votre Ajax.BeginForm :
new AjaxOptions
{
OnFailure = "onTestFailure",
OnSuccess = "onTestSuccess"
}
bloc de Script:
<script>
//<![CDATA[
function onTestFailure(xhr, status, error) {
console.log("Ajax form submission", "onTestFailure");
console.log("xhr", xhr);
console.log("status", status);
console.log("error", error);
// TODO: make me pretty
alert(error);
}
function onTestSuccess(data, status, xhr) {
console.log("Ajax form submission", "onTestSuccess");
console.log("data", data);
console.log("status", status);
console.log("xhr", xhr);
// Here's where you use the JSON object
//doSomethingUseful(data);
}
//]]>
</script>
ces signatures correspondent aux callbacks success et error en $.Ajax.(..) , ce qui pourrait ne pas être une telle surprise après tout.
ceci a été testé en utilisant asp.net-mvc-3 avec jquery 1.6.3 et 1.7.2.
essayez d'utiliser le code ci-dessous:
<script type='text/javascript'>
function onTestComplete(content) {
var result = eval( '(' + content.get_data() + ')' );
alert(result.UppercaseName);
}
</script>
j'utilise:
function onTestComplete(data, status, xhr) {
var data2 = JSON.parse(data.responseText);
//data2 is your object
}
assurez-vous d'avoir bien inclus MicrosoftAjax.JS et MicrosoftMvcAjax.js. Ensuite, utilisez les appels suivants sur le contexte retourné pour sortir un objet json de la return.
var json = context.get_data();
var data = Sys.Serialization.JavaScriptSerializer.deserialize(json);