Comment puis-je retourner des données via C# AJAX à une variable javascript?

Question

J'utilise jQuizMe, le plugin jQuery pour les quiz, et je veux récupérer les questions du quiz dans une base de données. J'ai donc pensé que je pourrais utiliser un appel ajax pour aller chercher les questions et les traiter pour imiter un tableau de type JSON. Je voudrais alors prendre cette AJAX responseData et le stocker (comme un tableau de type JSON) dans une variable javascript.

Voici le code:

$(document).ready(function() { 
    var quiz = new Array(); 
    $.get("/base/GameList/GetGameQuestions/StatesAndCapitalsGame.aspx", function(data) { 
     quiz = data; 
    }); 

    var options = { 
     intro: "Find out if you know which Capital is for which State.", 
     allRandom: true, 
     title: "State Capitals Quiz", 
     fxType: 1 
    }; 
    var lang = { 
     praise: "Great job, right!" 
    }; 

    $("#quizArea").jQuizMe(quiz, options, lang); 

}); 

Et les données qui vient revient à ceci:

{ 
    multiList: [ 
     { ques: "What is the capital of Alabama?", 
      ans: "Montgomery", 
      ansSel: ["Hamptonville", "Ellenville", "Somerville"] 
     }, 
     { ques: "What is the capital of New Jersey?", 
      ans: "Trenton", 
      ansSel: ["Hamptonville", "Ellenville", "Somerville"] 
     } 
    ] 
}; 

Je pensais ce ne serait probablement pas fonctionner correctement car il est tout simplement assignant cette réponse à la variable quiz comme une chaîne, mais j'espérais que vous pourriez tous me guider dans la bonne direction.

Merci! J'ai résolu cela en utilisant ce que Groo a suggéré (sous une forme modifiée). Merci pour toutes vos suggestions tout le monde!

$(document).ready(function() { 
function runQuiz(quiz) { 
    var options = { 
     quizType: "multiList", 
     intro: "Find out if you know which Capital is for which State.", 
     allRandom: true, 
     title: "State Capitals Quiz", 
     fxType: 1 
    }; 
    var lang = { 
     praise: "Great job, right!" 
    }; 
    var stuff = new Array(); 
    stuff = eval('(' + quiz + ')'); 
    $("#quizArea").jQuizMe(stuff, options, lang); 
} 

    $.get("/base/GameList/GetGameQuestions/StatesAndCapitalsGame.aspx", function(data) { 
     runQuiz(data); 
    }); 
}); 

Answer 1

Vous pouvez ajouter dataFilter et error gestionnaires pour un appel jQuery.ajax, pour vérifier comment vos données JSON ressemble lors de la réception:

var runQuiz = function(quiz) { 
    var options = { 
     intro: "Find out if you know which Capital is for which State.", 
     allRandom: true, 
     title: "State Capitals Quiz", 
     fxType: 1 
    }; 
    var lang = { 
     praise: "Great job, right!" 
    }; 

    $("#quizArea").jQuizMe(quiz, options, lang); 
} 

$.ajax({ 
     type: "POST", 
     url: "/base/GameList/GetGameQuestions/StatesAndCapitalsGame.aspx", 
     data: { }, 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     timeout: 15000, 
     dataFilter: function(data, type) { 
      // alert(data); 
      return data; 
     }, 
     error: function(xhr, textStatus, errorThrown) { 
      // alert(textStatus + ' ' + errorThrown); 
     }, 
     success: runQuiz 
}); 

Pour des fins de débogage, vous pouvez décommenter le gestionnaire pour l'événement dataFilter, pour obtenir le chaîne JSON brute renvoyée par votre service Web.

Answer 2

Sur votre C# AJAX postback, définissez votre variable javascript pour <% = myVariable%> - remplacement myVariable avec toute variable que vous essayez de définir dans le javascript. Assurez-vous simplement que votre javascript est dans le UpdatePanel. Lorsque le javascript est réécrit côté serveur, votre variable sera appliquée au script avant le rendu de la page.

Answer 3

Vous pouvez utiliser PageMethods pour effectuer un appel Webservice & si la réponse est correcte.

Ils sont très facile à installer:

La syntaxe JavaScript pour appeler les méthodes de la page en PageMethods objet et le passage de paramètres:

function onYourEvent() 
{ 
    PageMethods.Somemethod(p1,p1,p3,onSucceed,onError); 
} 

//CallBack method when the page call succeeds 
function onSucceed(results, currentContext, methodName) 
{ 
     alert(results); 
} 

//CallBack method when the page call fails due to interna, server error 
function onError(results, currentContext, methodName) 
{ 
     alert(results); 
} 

Puis dans le code derrière vous devez créer le public static method (Somemethod) et le définir comme [WebMethod]

Answer 4

Puisque vous renvoyez des données JSON, utilisez la fonction $.getJSON() au lieu de $.get().

Les données renvoyées seront automatiquement évaluées dans un objet javascript plutôt qu'une chaîne. À part ça, je dirais que vous êtes sur la bonne voie.