Amine Mostefai's Blog

Architecture is my passion :)

Amine

Hi and welcome to my blog. I share in this space a lot of posts related to software architecture, and software development. Content is mainly related to .NET CORE development, Angular, Sharepoint, Azure and Office 365. I hope that my articles are helpful and that you enjoy using them 😉

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

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

Tutoriel 6.3 : Connexion des contrôles aux bases de données

Tutoriel 6.3.zip (2.83 mb) L’objectif de ce tutoriel (troisième du module 6) est d’utiliser les capacités d’ASP.NET afin de connecter directement des contrôles ASP.NET aux bases de données. 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 – Création des sources de données L’objectif de cette étape est de montrer comment créer des sources de données utilisées dans des pages web. Nous nous intéresserons en particulier à EntityDataSource qui se connecte à un contexte EntityFramework. Créer une nouvelle application ASP.NET vide appelée « TestControlesDB » Ajoutez une page appelée « Default.aspx » Ajoutez un nouveau modèle EntityFramework et appelez-le « AdventureWorksModel » Cliquez ensuite sur « Générer à partir d’une base de données » Créez une nouvelle connexion sur « AdventureWorks » ensuite sur « Suivant » Dans l’assistant, cochez les tables « Product » et « ProductCategory » et cochez « Pluraliser et Singulariser les entités générées » Cliquez sur « Terminer » Le modèle est généré comme suit : Compilez le projet en appuyant sur « F6 » Ouvrez la page « Default.aspx » en mode design Faites glisser un composant « EntityDataSource » depuis la barre à outils (onglet données) jusqu’à la page « Default » Dans la propriété « ID » de la source, entrez « categorySource » Sur la page « Default.aspx », cliquez sur la flèche sur « categorySource » puis sur « Configure la source de données » Dans la zone « Connexion Nommées », sélectionnez « AdventureWorksLT2008R2Entities » ou le nom que vous avez choisi pour le contexte Cliquez sur « Suivant » Dans la zone « Nom de l’ensemble », sélectionnez « ProductCategories » Cliquez sur « Terminer » Etape 2 : Création d’une source de données esclave L’objectif de cette étape est de créer une source de données filtrée automatiquement. Le but de cette source de données est de n’afficher que les produits appartenant à une certaine catégorie. La récupération du critère de filtrage (ProductCategoryID) s’effectuera via l’URL en utilisant les chaines de connexion. Ouvrez « Default.aspx » en mode conception Ajoutez un composant « EntityDataSource » à la page et appelez-le « productSource » Cliquez sur la flèche puis « Configurer la source de données » Dans la connexion « Nommée », sélectionnez « AdventureWorksLT2008R2 » ou le nom du contexte que vous avez choisi Cliquez sur « Suivant » Dans la zone « Ensemble d’entités », sélectionnez « Product » Cochez « Activer les suppressions automatiques » et « Activer les modifications automatiques » Cliquez sur « Terminer » Dans la fenêtre de propriétés, cliquez sur la propriété « Where » qui permet le filtrage de la source de données, ensuite dans la propriétés, cliquez sur le bouton en forme de pointillés Dans la zone « Expression du Where », entrez l’expression suivante : it.ProductCategoryID == @categorie Cliquez sur « Ajouter un paramètre » Dans la zone « Nom », entrez « categorie » Dans « Source du paramètres », sélectionnez chaine de requête Cliquez sur « Afficher les options avancées » Dans la propriété « Type », sélectionnez « Int32 » Appuyez sur « OK » Etape 3 : Utilisation du contrôle « ListView » L’objectif de cette étape est d’apprendre à utiliser les templates et de les appliquer au contrôle « ListView ». Le ListView va afficher les enregistrements sous forme de boîtes flottantes avec un maximum de 15 enregistrements par page. Ajoutez une feuille de style appelée « Site.css » Insérez le code suivant dans le fichier CSS : body { font-family: 'Segoe UI' , Tahoma, Geneva, Verdana, sans-serif; padding : 0; margin : 0; }   div.box { background-color: #9595FF; border: thin solid #3333CC; height : 70px; width : 100px; float : left; margin : 2px; padding : 2px;   }   div.clear { clear : both; }   Ouvrez « Default.aspx » en mode design Ajoutez un composant « ListView » à la page Cliquez sur la « flèche » à côté du composant Dans « Choisir la source de données », sélectionnez « categorySource » Ouvrez « Default.aspx » en mode source Entre la balise ouvrante <asp :ListView » et sa balise fermante, insérez la balise « ItemTemplate » Entre les deux balises ItemTemplate, entrez le code suivant : <div class="box"> <strong><% 1: # Eval("Name") %></strong><br /> <a href='Default.aspx?categorie=<%# Eval("ProductCategoryId") %>'>Produits</a> </div> Les balises permettent d’afficher pour chaque enregistrement une « div » dont la classe est « box », une balise « strong » contenant le nom de la catégorie et un lien qui contient une chaîne de requête avec une variable sur le numéro de la catégorie Après la balise fermante « ItemTemplate », ajoutez une balise « LayoutTemplate » Entrez le code suivant : <asp:PlaceHolder runat="server" ID="itemPlaceholder" /> <div class="clear"></div> La balsie <asp :PlaceHolder » va être remplacée par les balises des enregistrements affichés Après la balise fermante « div », faites glisser un « DataPager » à partir de la boîte à outils Entre la balise ouvrante <asp :DataPager » et sa balise fermante, ajoutez la balise « Fields » Ajoutez une balise "asp:NumericPagerField » Cliquez sur la balise « dataPager » Dans la propriété « PageSize », entrez « 15 » Le code sera comme suit : <asp:ListView ID="ListView1" runat="server" DataSourceID="categorySource"> <ItemTemplate> <div class="box"> <strong><% 1: # Eval("Name") %></strong><br /> <a href='Default.aspx?categorie=<%# Eval("ProductCategoryId") %>'>Produits</a> </div> </ItemTemplate> <LayoutTemplate> <asp:PlaceHolder runat="server" ID="itemPlaceholder" /> <div class="clear"></div> <asp:DataPager ID="DataPager1" runat="server" PageSize="15"> <Fields> <asp:NumericPagerField /> </Fields> </asp:DataPager>   </LayoutTemplate> </asp:ListView> Ouvrez « Default.aspx » en mode design Faites glisser « Site.css » sur la page pour appliquer le design Exécutez en appuyant sur « F5 » Etape 4 : Utilisation du contrôle « GridView » L’objectif de cette étape est d’utiliser le composant « GridView »pour afficher les données de manière tabulaire ainsi que de manipuler les différents types de colonnes. Ouvrez « Default.aspx » en mode design Ajoutez un contrôle « GridView » sous le « ListView » Affectez la source « productSource » au « GridView » que vous venez d’ajouter Dans la fenêtre « Propriétés », cliquez sur « Colonnes » puis cliquez sur le bouton en forme de pointillés La fenêtre ci-dessous s’affiche,, cliquez sur « Rafraîchir le schéma » Cliquez sur « BoundField » puis sur le champ « ProductID » ensuite sur « Ajouter » De la même façon, ajoutez le champ « Name » enfant de « BoundField » Sélectionnez « TemplateField » puis cliquez sur « Ajouter » Dans la propriété « HeaderText », entrez « Numéro, Couleur » Sélectionnez « Modifier, Mettre à jour, Annuler », enfant de « CommandField » puis sur « Ajouter » Dans la propriété « HeaderText », entrez « Modifier » Sélectionnez « Supprimer » enfant de « CommandField » puis sur « Ajouter » Entrez « Supprimer » dans la propriété « HeaderText » Ouvrez « Default.aspx » en mode source Insérez le code suivant entre la balise ouvrante <asp :TemplateField » et sa balise fermante <ItemTemplate> <% 1: # Eval("ProductNumber") %>, <% 1: # Eval("Color") %> </ItemTemplate> <EditItemTemplate> Couleur : <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Color") %>'></asp:TextBox> </EditItemTemplate> Ouvrez « Default.aspx » en mode conception Changez la propriété « AllowPaging » à true Développez la propriété « AlternateRowStyle » Dans BackColor, « 9DBDFF » Appuyez sur « F5 » pour exécuter Le code est joint à cet article.

Tutoriel 3.1–Intégration de traitements

L’objectif de ce tutoriel du module 3 est de voir comment intégrer les traitements dans les applications ASP.NET. Etape 1 – Créer une application ASP.NET vide Lancez VS 2012 Choisir Fichier -> Nouveau -> Application ASP.NET vide Entrez « ProgrammationWeb » dans la zone « Nom » Cliquez sur OK Dans l’explorateur de solutions, cliquez sur le bouton droit sur le projet puis sélectionnez : Ajout à Forme Web Dans la zone nom, entrez « Default » Cliquez sur OK La forme web est affichée en mode source Appuyez sur « F7 » pour accéder au code behind Constatez le code généré comme suit : public partial class Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) {   } } Dans l’explorateur de solutions, développer Default.aspx Remarquez la présence des fichiers : « Default.aspx.cs » et « Defaut.aspx.designer.cs » Ouvrez « Default.aspx.designer.cs » et examinez son contenu Revenez sur « Default.aspx » et ajoutez un « Label » Re-Vérifiez le contenu du fichier « Default.aspx.designer.cs » Remarquez que la classe « Default » est partielle et qu’elle est étalée sur deux fichier (code behind et designer). public partial class Default {   /// <summary> /// form1 control. /// </summary> /// <remarks> /// Auto-generated field. /// To modify move field declaration from designer file to code-behind file. /// </remarks> protected global::System.Web.UI.HtmlControls.HtmlForm form1;   /// <summary> /// Label1 control. /// </summary> /// <remarks> /// Auto-generated field. /// To modify move field declaration from designer file to code-behind file. /// </remarks> protected global::System.Web.UI.WebControls.Label Label1; } Supprimez le « label » qui vient d’être ajouté Etape 2 : Ajout d’une bibliothèque de classes L’objectif de cette étape est de créer une bibliothèque de classe contenant plusieurs classes métier dont « Film » et « FilmService ». En utilisant « FilmService », l’utilisateur pourra accéder et chercher des films. Dans l’explorateur de solutions, cliquez sur la solution (pas le projet) avec le bouton droit Sélectionnez Ajout –> Nouveau Projet Dans le modèle, choisissez « Bibliothèque de classes » Dans la zone « Nom » entrez « Bibliotheque » Cliquez sur « OK » La solution est maintenant composée de deux projets au lieu d’un seul Remarquez la présence de la classe « Class1 » créée par défaut Depuis l’explorateur de solutions, supprimez le fichiers Class1 Dans l’explorateur de solutions, cliquez sur « Bibliotheque » avec le bouton droit puis cliquez « Ajout » à « Classe » Dans la zone « Nom » entrez « Film » Cliquez sur OK Dans le fichier Film.cs, remplacez la classe « Film » comme suit : public class Film {   public Film() { }   public Film(int numero, string titre, int annee) { this.Numero = numero; this.Annee = annee; this.Titre = titre; }   public int Numero { get; set; }   public int Annee { get; set; }   public string Titre { get; set; }   } Compilez en appuyant sur « F6 », vérifiez qu’il n’y a pas d’erreurs Dans l’explorateur de solutions, cliquez sur le bouton droite sur « Bibliotheque » Cliquez sur « Ajouter »à « Nouvel Elément » Choisissez le modèle « Interface » Dans la zone « Nom », entrez « IFilmService » Cliquez sur « OK » Remplacez le code de « IFilmService » comme suit :   public interface IFilmService { /// <summary> /// renvoie un film à partir de son numéro /// </summary> /// <param name="numero"></param> /// <returns></returns> Film GetFilm(int numero);   /// <summary> /// renvoie tous les films /// </summary> /// <returns></returns> IEnumerable<Film> GetAll(); } Ajoutez une classe au projet « Bibliotheque » appelée « FilmService » Modifiez cette classe de façon à ce qu’elle hérite de l’interface « IFilmService » Remarquez le SmartTag bleu s’affichant en dessous de « IFilmService » Cliquez sur le « SmartTag » puis sélectionnez « Implémenter IFilmService» Modifiez la classe « FilmService » comme suit : public class FilmService : IFilmService { private List<Film> _liste = new List<Film>();   public FilmService() { // ajout d'exemple AjouterFilm(1, "Avatar", 2011); AjouterFilm(2, "Salt", 2011); AjouterFilm(3, "The Dark Knight Rises", 2012); AjouterFilm(4, "Alien", 1979); }   private void AjouterFilm(int numero, string titre, int annee) { var film = new Film(numero, titre, annee); _liste.Add(film); }   public Film GetFilm(int numero) { return _liste.FirstOrDefault(e => e.Numero == numero); }   public IEnumerable<Film> GetAll() { return _liste; } } Vérifiez que le code compile en appuyant sur le bouton « F6 ». Etape 3 : Ajout du « Global.asax » et utilisation de la bibliothèque de classes L’objectif de cette étape est de configurer le service de films dans l’initialisation de l’application en utilisant « Global.asax ». Dans le projet « Bibliotheque », ajoutez une classe appelée « ServicesDonnees » Modifiez la classe ServiceDonnees comme suit : Vérifiez que le code compile en appuyant sur « F6 » public static class ServicesDonnees { public static void SetFilmService(IFilmService instance) { FilmService = instance; }   public static IFilmService FilmService { get; private set; } } Dans l’explorateur de solutions, cliquez sur le bouton droit sur le projet « ProgramationWeb » Sélection Ajouter à Nouvel Elément Choisissez le modèle « Classe Globale d’Application » Cliquez sur « OK » Dans l’explorateur de solutions, cliquez sur le bouton droit sur le noeau « Références » se trouvant dans le projet « ProgrammationWeb » Sélectionnez « Ajouter une référence » Dans le panneau à gauche, cliquez sur « Solution » Cochez le projet « Bibliotheque » Appuyez sur « OK » Les classes de « Bibliotheque » sont désormais utilisables dans l’application web Dans l’explorateur, double-cliquez sur « Global.asax » Placez le curseur dans la méthode « Application_Start » Tapez « ServicesDonnees » Remarquez le SmartTag qui apparaît, cliquez sur le SmartTag Sélectionnez « using Bibliotheque » Remarquez que « Bibliotheque » a été ajouté à la liste des « using » au début du fichier Modifiez le fichier comme suit : Vérifiez que le code compile en appuyant sur « F6 » public class Global : System.Web.HttpApplication {   protected void Application_Start(object sender, EventArgs e) { ServicesDonnees.SetFilmService(new FilmService()); }   protected void Session_Start(object sender, EventArgs e) {   }   protected void Application_BeginRequest(object sender, EventArgs e) {   }   protected void Application_AuthenticateRequest(object sender, EventArgs e) {   }   protected void Application_Error(object sender, EventArgs e) {   }   protected void Session_End(object sender, EventArgs e) {   }   protected void Application_End(object sender, EventArgs e) {   } } Etape 4 : Cycle de vie d’une page L’objectif de cette étape est d’utiliser l’évènement « Page_Load » dans les deux situations : en mode normal pour initialiser la page et en mode « Postback » pour chercher le numéro entré dans la zone de texte. Ouvrez Default.aspx en mode conception Faites glisser une zone de texte, un bouton, un label et un autre bouton et arrangez-les comme suit : <form id="form1" runat="server"> <div>   <asp:Label ID="Label1" runat="server" Text="Numéro :"></asp:Label> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:Button ID="btnChercher" runat="server" Text="Chercher" /> <br /> <asp:Label ID="lblMessage" runat="server" ForeColor="Red" Text="LabelMessage"></asp:Label> <br /> <asp:Button ID="btnDetails" runat="server" OnClick="btnDetails_Click" Text="Détails" UseSubmitBehavior="False" Visible="False" /> <br />   </div> </form>   Modifiez Page_Load comme suit : lblMessage.Visible = false; btnDetails.Visible = false; if (IsPostBack) { int numero; if (int.TryParse(TextBox1.Text, out numero)) { var film = ServicesDonnees.FilmService.GetFilm(numero); if (film != null) { btnDetails.Text = "Détails sur le film " + numero.ToString(); btnDetails.Visible = true; } else ShowMessage("film non trouvé"); } else ShowMessage("Veuillez entrer une valeur numérique correcte"); } Ajoutez la méthode ShowMessage comme suit : private void ShowMessage(string message) { lblMessage.Text = message; lblMessage.Visible = true; } Exécutez en appuyant sur « F5 » Etape 5 : Contrôles Orientés Serveur L’objectif de cette étape est de gérer les actions des utilisateurs de l’application en implémentant des évènements des contrôles orientés serveur. Ajouter un panneau à la fin de la forme « Default.aspx » Ajoutez des labels de la façon suivante : <asp:Panel ID="PanelInfo" runat="server"> <asp:Label ID="Label3" runat="server" Text="Numéro : "></asp:Label> <asp:Label ID="lblNumero" runat="server" Text="Label"></asp:Label> <br /> <asp:Label ID="Label4" runat="server" Text="Titre : "></asp:Label> <asp:Label ID="lblTitre" runat="server" Text="Label"></asp:Label> <br /> Année : <asp:Label ID="lblAnnee" runat="server" Text="Label"></asp:Label> </asp:Panel> Changez la méthode Page_Load comme suit : protected void Page_Load(object sender, EventArgs e) { lblMessage.Visible = false; btnDetails.Visible = false; PanelInfo.Visible = false; if (IsPostBack) { int numero; if (int.TryParse(TextBox1.Text, out numero)) { var film = ServicesDonnees.FilmService.GetFilm(numero); if (film != null) { btnDetails.Text = "Détails sur le film " + numero.ToString(); btnDetails.Visible = true; lblNumero.Text = numero.ToString(); lblAnnee.Text = film.Annee.ToString(); lblTitre.Text = film.Titre.ToString(); } else ShowMessage("film non trouvé"); } else ShowMessage("Veuillez entrer une valeur numérique correcte"); } } Doublez-cliquez sur le bouton « détails » Dans l’évènement généré, entrez le code suivant : protected void btnDetails_Click(object sender, EventArgs e) { PanelInfo.Visible = true; } Exécutez en appuyant sur F5 Pour télécharger le code source : cliquez ici

Création d’un site web statique avec Visual Studio 2012 (Tutoriel 1.1)

L’objectif de ce tutoriel est de crĂ©er un site web statique avec Visual Studio. Le site sera composĂ© d’une page HTML, une feuille de style CSS et d’un fichier Javascript. Ce tutoriel est relatif au module “introduction Ă  ASP.NET et Visual Studio 2012” Etape 1 – Lancer Visual Studio L’objectif de cette Ă©tape est de se familiariser avec la crĂ©ation de site web sous VS 2012. Lancer VS 2012 Choisir Fichier -> Nouveau -> Site Web Choisir le modĂšle « site web ASP.NET vide » Choisir l’emplacement du site (rĂ©pertoire) Cliquez sur OK Etape 2 – CrĂ©ation d’une page web L’objectif de cette Ă©tape est de crĂ©er des pages HTML avec Visual Studio et d’y ajouter des balises HTML. Cliquez sur le menu « FichierĂ  Nouveau Ă  Fichier » Dans les modĂšles, choisissez « Page HTML » Dans le nom entrez « index.html » Cliquez sur OK Dans l’éditeur, tapez le code suivant entre <body> et </body> <p>Bienvenue Ă  la <span id="mot">formation</span> ASP.NET et de dĂ©veloppement web</p> .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; } En utilisant la barre d’outils, glissez un « div » juste aprĂšs la balise fermante </p> Dans la fenĂȘtre de propriĂ©tĂ©s, entrez « footer» dans la zone « ID » <div id="footer"></div>   Etape 3 : Modification de la page en mode « Conception » L’objectif de cette Ă©tape est d’apprendre Ă  modifier les pages HTML en utilisant le designer de Visual Studio. Basculez en mode conception de « Index.html » en appuyant sur le bouton « Conception » de l’éditeur Ajoutez les mots suivants : « et de dĂ©veloppement web » Ă  la fin du paragraphe   Etape 4 – CrĂ©ation de fichiers CSS et Javascript Cliquez sur FichierĂ  Nouveau Ă  Fichier Dans les modĂšles, choisissez feuille de style Dans la zone nom, entrez « Site.css » Cliquez sur le bouton OK Entrez le code suivant dans le fichier CSS : body { }   span#mot { color : red; }   div#footer { margin 5; min-height : 40px; background-color : green; } Enregistrez le fichier Par un glisser-dĂ©poser, faites glisser le fichier CSS Ă  partir de l’explorateur de solutions sur le fichier HTML et remarquez comment le style a Ă©tĂ© appliquĂ© sur la page   Cliquez sur Fichier Ă  Nouveau Ă  Fichier Dans le modĂšle, choissez « Javascript » Dans la zone nom, entrez « MyScript.JS » Dans l’éditeur tapez le code suivant : function sayHello(me) { alert('hello ' + me); } Ouvrez le fichier « Index.html » en mode source Faites un glisser dĂ©poser du fichier « MyScript.js » vers « index.html » (entre les balises HEAD » Modifiez le code HTML comme suit : <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link href="Site.css" rel="stylesheet" type="text/css" /> <script src="MyScript.js"></script> </head> <body> <p> Bienvenue Ă  la <span id="mot" onclick="sayHello(‘Votre nom);">formation</span> ASP.NET et de dĂ©veloppement web </p> <div id="footer"></div> </body> </html> Cliquez sur le bouton « ExĂ©cuter » Etape 5 : DĂ©bogage L’objecif de cette Ă©tape est d’utiliser les fonctions de dĂ©bogage de Visual Studio afin de crĂ©er un point d’arrĂȘt sur un script JavaScript et d’évaluer une variable dans une fonction JavaScript. Fermez la fenĂȘtre du site Ouvrez MyScript.js InsĂ©rez un point d’arrĂȘt sur l’instruction « alert » en double-cliquant sur la barre latĂ©rale   ExĂ©cutez le site en appuyant sur « F5 » Appuyez sur le texte « formation » Remarquez VS qui se met en mode « debogage » et renvoie sur le fichier « MyScript.js »   Faites passer la sourir sur la variable « me » VĂ©rifiez que cette variable correspond Ă  la valeur passĂ©e lors de l’appel Appuyez sur F5 pour continuer l’exĂ©cution Fermez la fenĂȘtre du site Pour tĂ©lĂ©charger le code source, cliquez ici.

Développement d’applications de bases de données avec ASP.NET, Module 6

Un module bien important qui montre l’utilisation des différentes technologies .NET permettant de connecter des applications .NET à une application ASP.NET. à noter que la base de données AdventureWorks est nécessaire pour les tutoriaux. Tutoriaux associés : Tutoriel 6.1 : Connexion aux bases de données en utilisant ADO.NET Tutoriel 6.2 : Connexion à une base de données en utilisant Entity Framework Tutoriel 6.3 : Connexion des contrôles aux bases de données