web-dev-qa-db-fra.com

Comment utiliser l'assistant Ajax.BeginForm MVC avec un résultat JSON?

J'essaie d'utiliser l'assistant ASP.NET MVC Ajax.BeginForm mais je ne souhaite pas utiliser les options d'insertion de contenu existantes une fois l'appel terminé. Au lieu de cela, je souhaite utiliser une fonction JavaScript personnalisée en tant que rappel.

Cela fonctionne, mais le résultat souhaité doit être renvoyé sous forme de fichier JSON. Malheureusement, la structure ne traite que les données comme une chaîne. Ci-dessous le code client. Le code 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 majuscule, il indique plutôt non défini. content.get_data () semble contenir le code JSON, mais uniquement sous forme de chaîne. Comment puis-je convertir cela en un objet?

Tout cela semble vraiment un peu compliqué. Existe-t-il un meilleur moyen d'obtenir le contenu résultant en utilisant Ajax.BeginForm? Si c'est aussi difficile, je peux ignorer Ajax.BeginForm et utiliser simplement la bibliothèque de formulaires jQuery.

javascriptasp.net-mvcasp.net-ajax
21
Brian Vallelunga

Essaye ça: 

var json_data = content.get_response().get_object();

vous obtiendrez un résultat au format JSON et vous pourrez utiliser json_data[0] pour obtenir le premier enregistrement.

12
Kobi

Vous pouvez utiliser OnFailure et OnSuccess au lieu de OnComplete; OnSuccess vous donne les données sous forme d'objet JSON approprié. Vous pouvez trouver les signatures de la méthode de rappel enterrées dans ~/Scripts/jquery.unobtrusive-ajax.min.js que vous devez 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 rappels _ { success et error__ dans $ .ajax (...) }, ce qui pourrait ne pas être une telle surprise après tout.

Ceci a été testé avec asp.net-mvc-3 avec jquery 1.6.3 et 1.7.2.

23
Joel Purra

Essayez d'utiliser le code ci-dessous:

<script type='text/javascript'>
    function onTestComplete(content) {
        var result = eval( '(' + content.get_data() + ')' );
        alert(result.UppercaseName);
    }
</script>
0
Russel

J'utilise: 

    function onTestComplete(data, status, xhr) {
       var data2 = JSON.parse(data.responseText);
       //data2 is your object
    }
0
Juan Carlos Velez