web-dev-qa-db-fra.com

Exemple simple avec Asp.net + jQuery + JSON

J'essaie d'apprendre à faire un simple appel au serveur à partir de Javascript/jQuery. J'ai essayé d'apprendre et je n'ai pas pu trouver de tutoriel avec ces étapes simples.

Je veux envoyer un message au serveur avec deux paramètres (un DateTime et une String) et récupérer un DateTime. Je veux le faire via JSON.

  • À quoi ressemblerait le code sur le serveur (structure uniquement)?
  • Y a-t-il quelque chose de spécial à faire côté serveur? Et la sécurité?
  • Comment pourrais-je implémenter l'appel dans jQuery?
  • Et comment pourrais-je gérer le résultat?

Je m'intéresse le plus à la structure du code.

Mise à jour

J'ai trouvé la réponse ci-dessous idéale pour commencer. Cependant, je suis récemment tombé sur Full ASP.NET, LINQ, jQuery, JSON, Ajax Tutorial . C'est juste une étape fantastique et très didactique que je veux partager avec quiconque rencontrera cette question à l'avenir.

c#jqueryasp.netajaxjson
29
Adrian Carneiro

Vous pouvez procéder de plusieurs manières; cela servira d'exemple unique.

Vous pouvez écrire quelque chose comme ceci pour votre code jQuery:

urlToHandler = 'handler.ashx';
jsonData = '{ "dateStamp":"2010/01/01", "stringParam": "hello" }';
$.ajax({
                url: urlToHandler,
                data: jsonData,
                dataType: 'json',
                type: 'POST',
                contentType: 'application/json',
                success: function(data) {                        
                    setAutocompleteData(data.responseDateTime);
                },
                error: function(data, status, jqXHR) {                        
                    alert('There was an error.');
                }
            }); // end $.ajax

Ensuite, vous devez créer un "gestionnaire générique" dans votre projet ASP.net. Dans votre gestionnaire générique, utilisez Request.Form pour lire les valeurs passées en json. Le code de votre gestionnaire générique pourrait ressembler à ceci:

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class handler : IHttpHandler , System.Web.SessionState.IReadOnlySessionState
{
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "application/json";

        DateTime dateStamp = DateTime.Parse((string)Request.Form["dateStamp"]);
        string stringParam = (string)Request.Form["stringParam"];

        // Your logic here

        string json = "{ \"responseDateTime\": \"hello hello there!\" }";
        context.Response.Write(json);    
    }

Découvrez comment cela fonctionne. Cela vous aidera à démarrer!

Mise à jour: J'ai publié ce code sur CodeReview StackExchange: https://codereview.stackexchange.com/questions/3208/basic-simple-asp-net-jquery-json-example

25
Daniel Allen Langdon

Ici, un exemple de code utilisant l'appel ajax jquery et sur la méthode Web côté serveur renvoie des données au format jSon. Jquery: 

$(‘#myButton’).on(‘click’,function(){
    var aData= [];
     aData[0] = “2010”; 
     aData[0]=””    
     var jsonData = JSON.stringify({ aData:aData});
       $.ajax({
                type: "POST",
                url: "Ajax_function/myfunction.asmx/getListOfCars",  //getListOfCars is my webmethod 
                data: jsonData,
                contentType: "application/json; charset=utf-8",
                dataType: "json", // dataType is json format
                success: OnSuccess,
                error: OnErrorCall
            });

function OnSuccess(response.d)) {
console.log(response.d)
}
function OnErrorCall(response)) { console.log(error); }
});

Codebehind: Voici une méthode Web qui renvoie des données au format json, c'est-à-dire une liste de voitures

[webmethod]
public List<Cars> getListOfCars(list<string> aData) 
{
    SqlDataReader dr;
    List<Cars> carList = new List<Cars>();

         using (SqlConnection con = new SqlConnection(cn.ConnectionString))
         {
            using (SqlCommand cmd = new SqlCommand())
            {
               cmd.CommandText = "spGetCars";
               cmd.CommandType = CommandType.StoredProcedure;
               cmd.Connection = con;
               cmd.Parameters.AddWithValue("@makeYear", aData[0]);
               con.Open();
               dr = cmd.ExecuteReader(CommandBehavior.CloseConnection);
               if (dr.HasRows)
               {
                  while (dr.Read())
                   {    
                       string carname=dr[“carName”].toString();
           string carrating=dr[“carRating”].toString();
            string makingyear=dr[“carYear”].toString();
           carList .Add(new Cars{carName=carname,carRating=carrating,carYear=makingyear}); 
        }
                }
            }
          }
        return carList 
        }

// Création d'une classe

Public class Cars {
public string carName;
public string carRating;
public string carYear;
}

Article de blog:

1
Satinder singh

Si vous utilisez jQuery, vous pouvez le faire avec un GET ou un POST.

$.get ('<url to the service>',
       { dateParam: date, stringParam: 'teststring' },
       function(data) {
          // your JSON is in data
       }
);

$.post ('<url to the service>',
       { dateParam: date, stringParam: 'teststring' },
       function(data) {
          // your JSON is in data
       }
);

Notez que le nom des paramètres dans (par exemple dateParam, stringParam) doit être le même que le nom des paramètres que votre méthode de service attend. De plus, votre service devra formater le résultat en JSON, le paramètre de données dans le rappel contiendra tout ce que votre service renvoie (par exemple texte, xml, json, etc.).

Voir la documentation jQuery pour $ .ajax, $ .get, $ .post: http://api.jquery.com/jQuery.ajax/ , http: //api.jquery .com/jQuery.get / , http://api.jquery.com/jQuery.post/

1
Scott Lance