Sauvegarder la nouvelle commande

Dans le fichier principal .aspx, il ne nous reste plus qu'à envoyer le nouvel ordre des images au serveur à chaque fois que les images sont triées; remplace le commentaire dans le mettre à jour callback avec le code suivant:

// create vars var orderArray = [], wrap = ; // réinitialiser le message 'enregistré' $ (". success", $ ("# left")). remove (); // traite chaque image $ ("# images img"). each (fonction (i) // build img objet var imgObj = "id": $ (this) .parent (). attr ("id"). split ("_") [1], "order": i + 1; // ajoute un objet au tableau orderArray.push (imgObj);); // encapsule dans l'objet wrap.d = orderArray; // passe au serveur $ .ajax (type: "POST", url: "WebService.asmx / updateOrder", données: JSON.stringify (wrap), contentType: "application / json; charset = utf-8", succès : fonction (données) if (data.d === "Saved") $ ("
") .text (" Nouvelle commande sauvegardée! ") .addClass (" success "). appendTo (" # left "); else $ ("
") .text (" Save failed ") .addClass (" failure "). appendTo (" # left ");));

Regardons ce que ce code fait; Tout d'abord, nous créons deux variables dont nous aurons besoin plus tard dans le script, la première est un littéral de tableau, la seconde un littéral d'objet. Nous supprimons ensuite les messages de réussite éventuellement présents dans les interactions de tri précédentes. Nous traitons ensuite chacune des images dans la grille d’images en utilisant celle de jQuery. chaque() méthode, qui exécutera la fonction anonyme que nous spécifions une fois pour chaque image de la liste. Cette fonction reçoit automatiquement un numéro d’index pour l’article en cours, que nous devons utiliser..

Dans cette fonction, nous créons un nouveau littéral d'objet et lui attribuons deux propriétés. la identifiant de l'image actuelle et le numéro d'index de l'image actuelle chaque() itération. Nous insérons ensuite cet objet dans le tableau que nous avons créé il y a un instant. Une fois cette opération effectuée pour chaque image de la page, nous insérons le tableau dans un objet d'habillage. Cet objet sera transmis au serveur, ce qui est fait en utilisant le bas niveau de jQuery ajax () méthode.

Nous devons utiliser le ajax () méthode au lieu de, disons, la poster() ou getJSON () méthodes, car nous devons spécifier le contentType afin que le serveur traite les données correctement. Nous avons défini le type de demande sur POSTER, spécifiez le fichier côté serveur avec le nom de la méthode qui gérera la demande en tant que paramètre de chaîne de requête. Nous passons également dans notre objet wrap préparé. Afin de convertir complètement l'objet en syntaxe JSON, nous utilisons le stringify () méthode du json2.js fichier.

Nous spécifions également un gestionnaire de succès qui sera exécuté une fois la demande complétée; nous pouvons voir la chaîne renvoyée par le serveur en accédant aux données renvoyées à ce gestionnaire de succès. La chaîne réelle sera contenue dans une propriété du Les données objet étiqueté ré. Les données renvoyées à une page via AJAX dans .Net sont généralement accessibles via un ré objet de cette façon.

Nous pouvons ajouter un message et un nom de classe différents à la page, selon que le serveur indique que la demande a été un succès ou un échec. Vous pouvez tester cela et voir les différents messages en utilisant Firebug pour changer le identifiant attribuez l'un des conteneurs d'image à une valeur qui n'existe pas dans la base de données, puis triez une image. Voici comment nos messages devraient apparaître:

Le fichier de méthode Active Server

Pour recevoir l'objet JSON transmis au serveur via AJAX à la suite d'une interaction de tri, nous pouvons utiliser un fichier asmx; clic droit sur la racine du site dans le Explorateur de solution et choisir Ajoute un nouvel objet. Dans la boîte de dialogue qui apparaît, choisissez Service Web dans la partie supérieure et Visual C # dans le La langue sélectionnez la case, puis cliquez sur Ajouter.

Cela vous donnera un nouveau WebService.asmx fichier sur votre site, mais le code-behind de ce fichier ira dans un dossier créé automatiquement appelé App_code. Nous n'avons pas du tout besoin de mettre à jour le fichier asmx, tout se fera dans le code-behind WebService.asmx.cs fichier. Ouvrez-le et vous verrez qu'il y a déjà beaucoup de code dans le fichier; changez-le pour que le fichier dans son intégralité apparaisse comme suit:

en utilisant le système; using System.Collections.Generic; using System.Data; using System.Data.SqlClient; using System.Linq; using System.Web; using System.Web.Services; using System.Web.Script.Services; /// 
 /// Reçoit et enregistre un nouvel ordre d'images /// 
 [WebServiceBinding (ConformsTo = WsiProfiles.BasicProfile1_1)] // Pour autoriser l'appel de ce service Web à partir d'un script, à l'aide d'ASP.NET AJAX, décommentez la ligne suivante. [System.Web.Script.Services.ScriptService] Classe publique WebService: System.Web.Services.WebService Classe publique ImageDTO Chaîne publique id get; ensemble;  public int order get; ensemble;  [WebMethod] chaîne publique updateOrdre (Liste d) // définition de la connexion SqlConnection dbCon = new SqlConnection ("Serveur = BUREAU \\ SQLEXPRESS; UID = sa; PWD = motdepasse; Base de données = image_organiser"); // traite l'objet JSON pour chaque image (ImageDTO img in d) // définit la chaîne de procédure sSQL = "Met à jour les images [order] =" + img.order + "où id =" + img.id; try // open connection dbCon.Open (); // met à jour les données cmd.ExecuteNonQuery (); // ferme la connexion dbCon.Close ();  catch (SqlException ex) return "failed";   //Succès! retour "enregistré"; 

Nous devons ajouter plusieurs espaces de noms à la section using en haut du fichier pour pouvoir utiliser notre base de données SQL. Nous devrons également nous assurer que nous décommentons la ligne permettant à notre service Web d'être appelée à partir du script situé dans la page aspx principale (il est clairement indiqué par un commentaire dans la version par défaut du fichier)..

Dans le Service Web classe, nous devons ajouter une nouvelle classe représentant chacun des objets internes du tableau transmis au service Web. Nous faisons cela avec le ImageDTO classe et donne chaque objet identifiant et ordre propriétés et assigner des méthodes getter et setter pour travailler avec les valeurs de ces propriétés.

Vient ensuite la méthode appelée à partir de notre script; la mise à jour de la commande méthode web. Cette méthode reçoit le ré objet que nous jetons comme une liste de ImageDTO objets; nous pourrons alors utiliser les méthodes définies dans notre classe pour accéder à chaque propriété.

Nous définissons les informations de connexion nécessaires à la connexion à notre base de données, puis traitons chaque objet de notre Liste ImageDTO. Nous extrayons le nouvel ordre et le identifiant de l'image et l'utiliser pour mettre à jour le ordre colonne pour la ligne correspondante dans la table MSSQL.

Ce code est relativement similaire au code que nous avons utilisé pour extraire les informations de la base de données lors du chargement de la page. Nous utilisons simplement une chaîne de connexion différente et utilisons ExecuteNonQuery () méthode au lieu de ExecuteReader () parce que nous mettons à jour la base de données au lieu de simplement la lire. Nous emballons également notre exécution de la connexion dans un essayer… attraper déclaration et soit sortir la chaîne échoué ou enregistré en fonction de la réussite de la mise à jour.

Résumé

Nous avons utilisé la saveur c # de .Net associée à l'interface utilisateur de jQuery dans ce didacticiel pour créer une page qui mémorise l'ordre des images et permet de réorganiser les images en fonction des caprices et des désirs du visiteur. Dans cet exemple, il s’agit d’une page simple, mais n’oubliez pas que, dans une implémentation appropriée, elle ne serait probablement accessible que par l’utilisateur authentifié; chaque utilisateur aurait accès à ses propres images et serait capable de les trier, tandis que les images seraient fixées sur la version accessible au public de la page.

Nous n'avons pas effectué de nettoyage des données transmises dans le fichier côté serveur qui met à jour la base de données. Bien que l'utilisateur n'entre pas les données dans un champ de texte, la requête sortante de la page peut facilement être manipulée afin d'envoyer un code malveillant au serveur. Le danger de ce type d'attaque serait limité car nous ne permettions probablement que le tri en premier lieu aux utilisateurs enregistrés et authentifiés. Bien que la sécurité dépasse le cadre de ce didacticiel, elle doit toujours être une préoccupation majeure lorsqu’il s’agit de code live..