Mostefai Mohammed Amine's Blog

Say That I Was Here !

Cours CSS3

Enfin, je mets en ligne mon cours CSS3 avec les exemples. Exemples Mode en ligne et mode bloc (Inline-Block.html)  Syntaxe (Syntax.html) Fichier CSS externe (external-css.html) Sélecteurs (selectors.html) Sélecteurs avancés (AdvancedSelectors.html) Styles en cascade (cascade.html) Couleurs (couleurs.html) Polices de Caractères (fontfamily.html) Taille de Caractères (fontsize.html) Polices personnalisées (fontface.html) Texte avec ombr (textshadow.html)  Hauteur et Largeur (WidthHeight.html) Marges intérieure et extérieure (BorderMarginPadding.html) Affichage et visibilité (DisplayVisibility.html) Nouvelles bordures (NewBorders.html) Tableaux (Tableaux.html) Formulaires (Formulaire.html) Positionnements dans CSS (Position.html) éléments flottants (floats.html) Dispositions (dispositions.html) Album (album.html) Disposition flex (flex.html) Images et dégradés (Images.html) Transitions (transitions.html) Transformations (transformations.html) Animations (Animations.html)

Tutoriel 8.3 : Gestion de l’état

L’objectif de ce tutoriel (module 8) est d’apprendre à utiliser trois mécanismes de gestion de l’état : le cache, les cookies et l’état d’application. Etape 1 : Création d’un compteur de visiteurs en utilisant l’état de l’application L’objectif de cette étape est d’utiliser l’état de l’application pour implémenter un compteur de visiteurs. L’objectif est aussi de faire la différence entre l’état d’une application et l’état d’une session. Ouvrez VS2012 Créez une application ASP.NET vide appelée « TestEtat » Ajoutez une forme web appelée « Default.aspx » Glissez deux composants de type « Literal » dans la page et séparez-les par une balise « <br/> » Ajoutez une classe globale d’application appelée « Global.asax » Dans l’évènement de démarrage « Application_Start », ajoutez le code suivant : 1: Application["visiteurs"] = 0; .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } Dans le code de démarrage d’une session « Session_Start », ajoutez le code suivant : 1: int visiteurs = (int)Application["visiteurs"]; 2: ++visiteurs; 3: Application["visiteurs"] = visiteurs; 4: Session["code"] = new Random().Next(); Ouvrez la page « Default.aspx » en mode code behind Ajoutez le code suivant dans l’évènement « Page_Load » : int visiteurs = (int)Application["visiteurs"]; ++visiteurs; Application["visiteurs"] = visiteurs; Session["code"] = new Random().Next(); .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } Exécutez en appuyant sur « F5 » Remarquez le code de la session et le nombre de visiteurs Ouvrez l’application dans un autre navigateur Remarquez le code de la session et le nombre de visiteurs Revenez sur le navigateur où s’est exécutée l’application en premier Rafraîchissez la page en appuyant sur « F5 » Remarquez que le nombre de visiteurs a changé et que le code de la session est resté le même   Etape 2 : Utilisation du cache L’objectif de cette étape est d’utiliser le cache avec expiration pour cacher une date. Une page simple récupère la date d’aujourd’hui qui est cachée pendant 30 secondes. On remarquera que grâce au cache, la date ne change que chaque 30 secondes. Ajoutez une forme web appelée « CachePage.aspx » Glissez un composant « Literal » sur la page Ouvrez la page en mode code behind Dans l’évènement « Page_Load » de la page, ajoutez ceci : 1: Literal1.Text = GetDate().ToString(); .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } Dans la classe « CachePage », ajoutez la méthode suivante : 1: DateTime GetDate() 2: { 3: if (Cache["maintenant"] == null) 4: { 5: Cache.Add("maintenant", DateTime.Now, null, DateTime.Now.AddSeconds(30), System.Web.Caching.Cache.NoSlidingExpiration, System.Web.Caching.CacheItemPriority.Default, null); 6: } 7: return (DateTime)Cache["maintenant"]; 8: } Exécutez en appuyant sur « F5 » Remarquez que la date affichée ne change qu’après 30 secondes en faisant des rafraichissements de la page dans le navigateur Etape 3 : Gestion des cookies L’objectif de cette étape est d’utiliser les cookies pour mémoriser la première visite d’un utilisateur. Ayant une expiration de 30 secondes, cette première visite est réinitialisée chaque 30 secondes. Ajoutez une page appelée « CookiePage.aspx » Glissez un composant de type « Literal » sur la page Ouvrez la page en mode code behind Insérez le code suivant dans l’évènement Page_Load 1: var cookie = Request.Cookies["visite"]; 2: if (cookie != null) 3: { 4: DateTime d = DateTime.Parse(cookie["visite"]); 5: Literal1.Text = string.Format("Heure actuelle : {0}, première visite : {1}", DateTime.Now, d); 6: } 7: else 8: { 9: Literal1.Text = "Bienvenue"; 10: var ck = new HttpCookie("visite"); 11: ck["visite"] = DateTime.Now.ToString(); 12: ck.Expires = DateTime.Now.AddSeconds(30); 13: Response.Cookies.Add(ck); 14: } Dans la première ligne on teste l’existence du cookie. Si il n’existe pas alors il est créé puis rattaché à la réponse. Exécutez en appuyant sur « F5 » Rafraîchissez plusieurs fois en appuyant sur « F5 » dans le navigateur Vérifiez que ça se réinitialise après 30 secondes Pour télécharger le code, cliquez ici

Algerian web tops and flop : May2013

Starting from this month, I will publish a monthly blog post about the Algerian web, the best experience of the month… and the worst ! This month, the top is the Algeria web awards website. In addition to the very interesting initiative of the team, the web design is clean, elastic and very attractive. The concept is based on the principle of SPA (Single Page Application) and the simplicity of the layout is a great addition to this kind of websites. Congratulations for the AWA teams and I hope a better event next year inchallah. In the other side of taste, the AADL website is located ! Not only this site is a concentrate ugliness, it is working half a time. Based on some prehistoric design principles (tables, animated gifs,…), this website should be a website course to the things not to do if you want that you web project design succeed. I hope very strongly that our public structures pay more attention to the esthetic and functional aspects of their websites. See you next month with more tops and flops !

Tutoriel 8.2: Gestionnaires et Modules HTTP

L’objectif de ce tutoriel (deuxième du module 8) est d’apprendre comment créer des handlers et des modules http personnalisés. Etape 1 : Création d’un handler personnalisé L’objectif de cette étape est de créer un handler qui gère des extensions spéciales : « datx » et « timx ». Dès que l’utilisateur de l’application tape une url dont l’extension est « datx », l’application lui descend la date d’aujourd’hui. Dès que l’utilisateur tape une url contenant l’extension « timx », l’application lui descend l’heure en cours. Ouvrez VS2012 Créez une application ASP.NET vide appelée « TestExtensionsHTTP » Ajoutez un nouvel élément au projet Dans la liste des modèles, choisissez « Handler ASP.NET » Dans le nom, entrez « DateTimeHandler »   Cliquez sur « Ajouter » La classé générée sera comme suit : public class DateTimeHandler : IHttpHandler { /// <summary> /// You will need to configure this handler in the Web.config file of your /// web and register it with IIS before being able to use it. For more information /// see the following link: http://go.microsoft.com/?linkid=8101007 /// </summary> #region IHttpHandler Members   public bool IsReusable { // Return false in case your Managed Handler cannot be reused for another request. // Usually this would be false in case you have some state information preserved per request. get { return true; } }   public void ProcessRequest(HttpContext context) { //write your handler implementation here. }   #endregion } La propriété « IsReusable » indique si le handler peut être réutilisé par plusieurs requêtes La méthode « ProcessRequest » doit contenir le code permettant de traiter la requête http Dans le corps de la méthode « ProcessRequest », entrez les instructions suivantes var auth = context.Request.Url.GetLeftPart(UriPartial.Path); var tab = auth.Split('.'); var extension = tab[tab.Length - 1]; if (extension == "datx") context.Response.Write(DateTime.Now.Date.ToLongDateString()); else if (extension == "timx") context.Response.Write(DateTime.Now.ToLongTimeString()); Ouvrez le fichier « web.config » Ajoutez une section « system.webServer » Nous allons configurer l’application de façon à ce que tous les documents dans la requête dont l’extension est « datx » ou « timx » soit traitée par « DateTimeHandler » Dans « system.webServer », ajoutez les éléments suivants : <handlers> <add type="TestExtensionsHTTP.DateTimeHandler" path="*.datx" verb="*" name="datxHandler"/> <add type="TestExtensionsHTTP.DateTimeHandler" path="*.timx" verb="*" name="timxHandler"/> </handlers> Exécutez en appuyant sur « F5 » Remarquez que parce qu’il n’y a aucune forme web dans notre application, un message d’erreur apparaît (code 403) Dans la barre d’adresse du navigateur, tapez « Home.datx », par exemple http://localhost:numport/Home.datx Remarquez que la date d’aujourd’hui est affichée Dans la barre d’adresse du navigateur, remplacez « Home.datx » par « Hom.timx » Remarquez que c’est l’heure en cours qui est affichée Etape 2 : Création d’un module HTTP Le but de ce tutoriel est de créer un module refusant toutes les URLs contenant le mot « Test » malgré que la page existe. Le module génère alors une erreur 404. Ajoutez deux formes web à l’application, l’une appelée « Default.aspx » et l’autre « Test.aspx » Dans « Default.aspx », ajoutez un lien hypertexte pointant sur la page « Test.aspx » Ajoutez un nouvel élémént Dans le modèle, sélectionnez « module ASP.NET » Dans le nom, entrez « TestRefuseModule » Cliquez sur « Ajouter » Remarquez le code généré par VS 2012 : public class TestRefuseModule : IHttpModule { /// <summary> /// You will need to configure this module in the Web.config file of your /// web and register it with IIS before being able to use it. For more information /// see the following link: http://go.microsoft.com/?linkid=8101007 /// </summary> #region IHttpModule Members   public void Dispose() { //clean-up code here. }   public void Init(HttpApplication context) { // Below is an example of how you can handle LogRequest event and provide // custom logging implementation for it context.LogRequest += new EventHandler(OnLogRequest); }   #endregion   public void OnLogRequest(Object source, EventArgs e) { //custom logging logic can go here } } La méthode « Init » est la méthode permettant d’initialiser les évènements qu’on veut ajouter au cycle de vite de traitement de la requête Dans la méthode « Init », ajoutez le code suivant permettant d’affecter un gestionnaire d’évènement à l’évènement « BeginRequest » qui se déclenche au début de traitement de la requête http : context.BeginRequest += new EventHandler(context_BeginRequest); Ajoutez le gestionnaire d’évènements « context_BeginRequest » comme suit : void context_BeginRequest(object sender, EventArgs e) { var ctx = (HttpApplication)sender; if (ctx.Request.RawUrl.Contains("Test")) throw new HttpException(404, "Non !"); } Le principe du gestionnaire est que dès que l’URL contient le mot « Test », une exception est générée déclenchant l’erreur 404 http malgré l’existence de la ressource Appuyez sur « F5 » pour exécuter Dans la page d’accueil, cliquez sur le lien et remarquez que l’application s’exécute normalement. Ceci est dû au fait que bien que le module soit finalisé, il fallait le déclarer dans le fichier de configuration pour être intégré par IIS Ouvrez le fichier « web.config » Dans la section « system.webServer » ajoutez les éléments suivants : <modules> <add type="TestExtensionsHTTP.TestRefuseModule" name="testModule"/> </modules> Ré-exécutez l’application et ré-essayer d’appuyer sur le lien dans la page principale Pour télécharger le code, cliquez ici

Tutoriel 8.1: Configuration d’Applications ASP.NET

L’objectif de ce tutoriel (programmation avancée) est d’affecter des paramètres de configuration à une application web et notamment les paramètres de localisation (« globalization »). A travers l’utilisation de la balise « location » ou d’un sous-répertoire avec le fichier « web.config », vous allez trouver comment le même message est affiché en plusieurs langues dans des portions différentes de l’application. Etape 1 : Préparation L’objectif de cette étape est de créer une arborescence de dossiers de notre application web. Il s’agit aussi de créer un texte traduit en plusieurs langues (français, anglais et arabe) qui va être affiché dans plusieurs zones selon la configuration en cours. Ouvrez VS2012 Créez une application ASP.NET vide appelée « TestConfiguration » Ajoutez une forme web appelée « Default.aspx » Ajoutez deux répertoires, l’un appelé « Rep1 » et l’autre appelé « Rep2 » Ajoutez une forme web dans le répertoire « Rep1 » et appelez-la « Page1 » Ajoutez une forme web dans le répertoire « Rep2 » et appelez-la « Page2 » L’arborescence de la solution devrait ressembler à ceci :   Ouvrez la page « Default.aspx » et ajoutez-y deux liens hypertexte, l’un pour « Page1 » et l’autre pour « Page2 » Ajoutez un nouvel élément au projet « TestConfiguration » A gauche, sélectionnez « Général » Dans le modèle, choisissez fichiez de ressources. Appelez-le, « MyStrings.resx » Dans la colonne « Nom » entrez « Bienvenue » Dans la colonne « Valeur », entrez « Bienvenue au tutoriel de Mr Mostefai Mohammed Amine » Maintenant, il s’agit d’ajouter le texte traduit en anglais et en arabe Ajoutez un autre fichier de ressources appelé « MyStrings.en.resx » Dans le nouveau fichier de ressources, tapez « Bienvenue » dans la colonne « Nom » Tapez « Welcome to Mostefai Mohammed Amine's tutorial » dans la colonne « valeur » Ajoutez un fichier de ressources appelé « MyStrings.ar.resx » Dans la zone « Nom » entrez « Bienvenue » Dans la zone « Valeur » entre « مرحبا بكم في البرنامج التعليمي لمصطفاي محمد الأمين » Ouvrez la page « Default.aspx » en mode « code behind » Entrez le code suivant dans l’évènement « Page_Load » de la page Response.Write(MyStrings.Bienvenue); Tapez le même code dans l’évènement « Page_Load » de « Page1.aspx » et « Page2.aspx » Etape 2 : Configuration L’objectif de cette étape est de changer la configuration de façon à ce que la langue par défaut soit le français pour l’application, l’anglais pour « Rep1 » et l’arabe pour « Rep2 ». L’objectif est de découvrir les deux moyens d’appliquer une configuration à un répertoire : la balise « location » et les fichier de configuration additionnels. Dans l’explorateur de solutions, ouvrez « web.config » Examinez la structure de ce fichier configuration> <system.web> <compilation debug="true" targetFramework="4.5" /> <httpRuntime targetFramework="4.5" /> </system.web> </configuration> Dans la section « system.web », ajoutez l’élément suivant : <globalization culture="fr-FR" uiCulture="fr-FR"/> Après la section « system.web » et avant l’élément fermant de configuration, ajoutez une balise location comme suit : <location path="Rep1"> <system.web> <globalization culture="en-US" uiCulture="en-US"/> </system.web> </location> La balise location définit une localisation (langue) différente qui est l’anglais pour toutes les pages se trouvant dans le répertoire « Rep1 ». Sur le répertoire « Rep2 » cliquez sur le bouton droit de la souris Cliquez sur « Ajouter un nouvel élément » Dans le modèle, choisissez « Fichier de configuration web » et laissez le nom à « Web.config »     Ouvrez le nouveau fichier de configuration Dans la section « system.web », ajoutez l’élément « globalization » comme suit : <globalization culture="ar-DZ" uiCulture="ar-DZ"/> Appuyez sur « F5 » pour exécuter Remarquez le changement de la langue du texte en parcourant les différentes pages Pour télécharger le code source, cliquez ici

Tutoriel 7.1: Intégration d’AJAX dans les applications web

L’objectif de ce tutoriel (associé au module 7) est de montrer comment intégrer les technologies AJAX dans les applications ASP.NET. La première partie, utilise les dates pour montrer comment UpdatePanel permet uniquement à des portions de page d’être actualisées. La deuxième partie consiste en la création d’un service web et son invocation depuis le client en utilisant JavaScript et JQuery. Prérequis : Ce tutoriel requiert que la base de données « AdventureWorks » soit installée dans la machine. Cette base peut être téléchargée sur http://sqlserversamples.codeplex.com/ . Etape 1 – Préparation L’objectif de cette étape est de préparer l’application. Créer une nouvelle application ASP.NET vide appelée « TestAJAX » Créez trois pages dans la nouvelle application « Default.aspx », « Partiel.aspx » et « Service.aspx » Dans la page web « Default.aspx » ajoutez deux liens pointant respectivement sur « Partiel.aspx » et « Service.aspx » avec la propriété « Text » égale à : « Chargement Partiel » et « Service Web » respectivement. Ajoutez un modèle EntityFramework appelé « AdventureModel » pointant sur la base de données « AdventureWorks ». Le nom du contexte doit être « AdventureContext ». Pour plus de détails voir « Module 6 ». N’oubliez pas de cochez « Mettre au plusieurs ou au singulier les entités générées ». Le modèle inclut une seule table « Product » et génère une seule entité « Product » Ajoutez une feuille de style appelée « Site.css » Ajoutez les règles suivantes à la feuille de style : body { font-family: 'Gill Sans' , 'Gill Sans MT' , Calibri, 'Trebuchet MS' , sans-serif; } .asideBar { border: thin solid #919191; float: left; margin: 5px; background-color: #F8E9AD; padding : 5px; min-width : 200px; min-height : 400px; }   div.content { border: thin solid #0D86FF; float: left; margin: 5px; padding: 5px; }   div.clear { float : left; }   .loading { text-align: center; background-color: #C24B4B; color: #FFFFFF; margin-top: 2px; padding: 3px; } Ouvrez la page « Partiel.aspx » en mode source Insérez les balises suivantes après la balise « div » du formulaire (« form ») : <div> <aside class="asideBar"> </aside> <div class="content"> </div> <div class="clear" /> </div> Ouvrez la page « Partiel.aspx » en mode design Faites glisser le fichier « Site.css » sur la page afin d’appliquer le style. Ouvrez la console du gestionnaire de paquets « Nuget » Installez « JQuery » en entrant « Install-Package JQuery » Etape 2 : Implémentation de chargement partiel L’objectif de cette étape de permettre au développeur de voir l’effet du chargement partiel en comparant entre le contenu de deux libellés. Elle montre aussi l’utilisation de l’UpdatePanel en conjonction avec l’UpdateProgress. Ouvrez la page « Partiel.aspx » en mode design Cliquez sur la barre latérale « aside » puis insérer un « Label » dedans A partir de la barre à outils, ajoutez un « ScriptManager » (onglet extensions AJAX) en début de page Ajoutez une source de données « EntityDataSource » et pointez-la sur l’ensemble « Products » du contexte « AdventureContext ». Si vous n’arrivez pas à voir le contexte, compilez la solution en appuyant sur « F6 » Ajoutez un « UpdatePanel » dans la « div » dont la classe est « content » Insérez un deuxième « Label » à l’intérieur de l’UpdatePanel que vous venez d’ajouter Ajoutez un « GridView » à l’intérieur du composant « UpdatePanel » que vous venez d’ajouter. Configurez la source de données pour pointer sur la source de données « EntityDataSource » ajoutée précédemment. Configurez le « GridView » de façon à ce qu’il ne contienne que les colonnes « ProductID », « Name » et « Color » Configurez la pagination du GridView en affectant « True » à la propriété « AllowPaging » Ajoutez un composant « UpdateProgress » en dessous du « UpdatePanel » Dans la propriété « DisplayAfter », entrez 50 Dans la propriété « AssociatedUpdatepanelID » entrez « UpdatePanel1 » Affichez la page « Partiel.aspx » en mode source Dans la propriété « ProgressTemplate » de l’UpdateProgress insérez un div et du texte comme suit : <asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="50" AssociatedUpdatePanelID="UpdatePanel1"> <ProgressTemplate> <div class="loading">Chargement en cours...</div> </ProgressTemplate> </asp:UpdateProgress> La page en mode design doit être comme suit :   Le code ASPX généré doit être comme celui-ci : <form id="form1" runat="server"> <div>   <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:EntityDataSource ID="EntityDataSource1" runat="server" ConnectionString="name=AdventureContext" DefaultContainerName="AdventureContext" EnableFlattening="False" EntitySetName="Products"> </asp:EntityDataSource> <aside class="asideBar"> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> </aside> <div class="content"> <asp:UpdatePanel ID="UpdatePanel1" runat="server" AssociatedUpdatePanelID="UpdatePanel1" UpdateMode="Conditional"> <ContentTemplate> <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label> <br /> <asp:GridView ID="GridView1" runat="server" BackColor="LightGoldenrodYellow" BorderColor="Tan" BorderWidth="1px" CellPadding="2" ForeColor="Black" GridLines="None" AllowPaging="True" AutoGenerateColumns="False" DataKeyNames="ProductID" DataSourceID="EntityDataSource1"> <AlternatingRowStyle BackColor="PaleGoldenrod" /> <Columns> <asp:BoundField DataField="ProductID" HeaderText="ProductID" ReadOnly="True" SortExpression="ProductID" /> <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" /> <asp:BoundField DataField="Color" HeaderText="Color" SortExpression="Color" /> </Columns> <FooterStyle BackColor="Tan" /> <HeaderStyle BackColor="Tan" Font-Bold="True" /> <PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" /> <SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" /> <SortedAscendingCellStyle BackColor="#FAFAE7" /> <SortedAscendingHeaderStyle BackColor="#DAC09E" /> <SortedDescendingCellStyle BackColor="#E1DB9C" /> <SortedDescendingHeaderStyle BackColor="#C2A47B" /> </asp:GridView> </ContentTemplate> </asp:UpdatePanel>   <asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="50" AssociatedUpdatePanelID="UpdatePanel1"> <ProgressTemplate> <div class="loading">Chargement en cours...</div> </ProgressTemplate> </asp:UpdateProgress>   </div> <div class="clear" />   </div> </form> Passez en mode « Code Behind » en appuyant sur « F7 » Dans la méthode « Page_Load », affectez la date en cours aux deux libellés comme suit : protected void Page_Load(object sender, EventArgs e) { Label1.Text = DateTime.Now.ToString(); Label2.Text = DateTime.Now.ToString(); } Exécutez en appuyant sur « F5 » et naviguez jusqu’à la page « Partiel.aspx » Remarquez qu’en changeant la page en cours dans la grille, la date ne change que pour un seul libellé alors que la page devait changer les deux Remarquez que le « UpdateProgress » s’affiche à chaque fois qu’un lien de pagination est cliqué Etape 3 : Création d’un service web WCF Dans le projet « TestAJAX », cliquez sur « Ajouter un Nouvel Elément » Dans le modèle sélectionnez « Service WCF AJAX » Dans la zone « Nom », entrez « ProductService » Appuyez sur « OK » Remarquez que VS génère une classe de service avec une seule méthode « DoWork » comme suit : [ServiceContract(Namespace = "")] [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)] public class ProductService { // To use HTTP GET, add [WebGet] attribute. (Default ResponseFormat is WebMessageFormat.Json) // To create an operation that returns XML, // add [WebGet(ResponseFormat=WebMessageFormat.Xml)], // and include the following line in the operation body: // WebOperationContext.Current.OutgoingResponse.ContentType = "text/xml"; [OperationContract] public void DoWork() { // Add your operation implementation here return; }   // Add more operations here and mark them with [OperationContract] } Supprimez la méthode « DoWork » de la classe Ajoutez une méthode « GetProduct » décorée par l’attribut « OperationContract » L’attribut « OperationContract » stipule que la méthode peut être appelée comme service Changez le code de la méthode comme suit :   [OperationContract] public Product GetProduct(int id) { using (var context = new AdventureContext()) { return context.Products.FirstOrDefault(e => e.ProductID == id); } } Compilez en appuyant sur « F6 » et vérifiez qu’il n’y a pas d’erreur Ouvrez la page « Default.aspx » Exécutez en appuyant sur « F5 » Dans la barre d’adresse du navigateur, remplacez « Default.aspx » par « ProductService.svc » Remarquez les informations données sur le service permettant aux clients de l’invoquer. Etape 4 : Invocation du service web depuis JavaScript Le but de cette étape est d’utiliser le composant « ScriptManager » afin qu’il génère les proxies nécessaires à l’invocation du service « ProductService ». Pour invoquer le services, des évènements JQuery seront utilisés. Ouvrez la page « Service.aspx » en mode design Glissez un « ScriptManager » sur la page Cliquez sur la propriété « Services » du « ScriptManager » puis sur le bouton en pointillés qui apparaît Cliquez sur le bouton « Ajouter » A droite, dans la propriété « Path », entrez « ~/ProductService.svc » Cliquez sur « OK » Ouvrez la page « Service.aspx » en mode source Ajoutez trois paragraphes (« <p> ») dont les deux derniers ont l’attribut « class » à « info » Dans le premier paragraphe, ajoutez une balise « label » contenant le texte « Numéro : » Dans le premier paragraphe, ajoutez un contrôle HTML (pas ASP.NET) de type bouton avec la propriété « ID » pour « btnChercher » et l’attribut « value » à « Trouver Produit » Dans le deuxième paragraphe, ajoutez une balise « label » avec le texte « Nom : » Dans le deuxième paragraphe, ajoutez un contrôle HTML « input (Text ») avec la propriété « ID » à « txtNom » Dans le troisième paragraphe ajoutez une balise « label » avec le texte « Couleur : » Dans le deuxième paragraphe, ajoutez un contrôle HTML « input (Text ») avec la propriété « ID » à « txtNom » Le code devra ressembler au code qui suit : <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> <Services> <asp:ServiceReference Path="~/ProductService.svc" /> </Services> </asp:ScriptManager> <p> <label> Trouver : <input id="txtNumero" type="text" /></label> <input id="btnChercher" type="button" value="Trouver Produit" /> </p> <p class="info"> <label> Nom : </label> <input id="txtNom" type="text" />   </p> <p class="info"> <label> Couleur : </label> <input id="txtCouleur" type="text" /> </p> </div> En mode source toujours, faites glisser le fichier « JQuey-x.y.z.js » dans la page juste avant la balise «/head » fermante où x.y.z est la version installée de JQuery En mode source, ajoutez le script « JavaScript » suivant : <script type="text/javascript"> $(function () { $(".info").hide(); $("#btnChercher").click(function () { var numero = $("#txtNumero").val(); ProductService.GetProduct(numero, function (data) { if (data == null) { alert('non trouvé !'); $(".info").hide(); } else { $("#txtNom").val(data.Name); $("#txtCouleur").val(data.Color); $(".info").show(); } }); }); }); </script> La ligne suivante permet d’invoquer l’opération « GetService » du service « GetProduct » avec comme paramètre la variable « numero ». Le deuxième paramètre est la fonction à appeler lorsque l’appel réussit. AJAX est bâti sur ce genre d’appel car le services s’exécutent d’une manière asynchrone, la fonction passée en paramètre est appelée « callback ». ProductService.GetProduct(numero, function (data) { if (data == null) { alert('non trouvé !'); $(".info").hide(); } else { $("#txtNom").val(data.Name); $("#txtCouleur").val(data.Color); $(".info").show(); } }); Exécutez l’application en appuyant sur « F5 » Pour télécharger le code du tutoriel, cliquez ici