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 5.1–Validation

L’objectif de ce tutoriel (module 5) est d’utiliser les contrĂŽles de validation afin de valider l’inscription d’un dĂ©veloppeur Ă  un site. Les informations suivantes doivent ĂȘtre validĂ©es : le nom et le prĂ©nom sont obligatoires. L’Age doit ĂȘtre numĂ©rique et compris entre 18 et 50. Les mails et tĂ©lĂ©phones doivent respecter le format nĂ©cessaire et le langage de programmation doit ĂȘtre soit C# soit C++. Etape 1 – Ajouter les contrĂŽles de validation au formulaire Le but du tutoriel est de permettre Ă  des dĂ©veloppeurs de s’inscrire. Le dĂ©veloppeur doit fournir les informations suivantes : Nom (obligatoire), PrĂ©nom (obligatoire), Age (entre 18 et 50), Langage (C# ou C++), Son mail et son numĂ©ro de tĂ©lĂ©phone portable. Lancez VS 2012 Choisir Fichier -> Nouveau -> Application ASP.NET vide Entrez « TestValidation » dans la zone « Nom » Cliquez sur OK Cliquez sur le bouton droit sur le projet « TestValidation » Ajoutez une nouvelle forme appelĂ©e « Default.aspx » Ouvrez « Default.aspx » en mode conception Faites glisser un label dans la page et affectez « Nom : » Ă  la propriĂ©tĂ© « Text » de ce libellĂ© A cĂŽtĂ© du libellĂ©, glissez une zone de texte et affectez « txtNom » Ă  la propriĂ©tĂ© « ID » Faites glisser un « RequiredFieldValidator » Ă  cĂŽtĂ© de « txtNom » avec les propriĂ©tĂ©s suivantes : (ErrorMessage = « Veuillez entrer votre nom », ControlToValidate= « txtNom » et CssClass= « validationError », Display= « Dynamic ») InsĂ©rez un saut de ligne en appuyant sur « EntrĂ©e » ou (<br/>) en mode source Faites glisser un label dans la nouvelle ligne et affectez « PrĂ©nom : » Ă  la propriĂ©tĂ© « Text » de ce libellĂ© A cĂŽtĂ© du libellĂ©, glissez une zone de texte et affectez " txtPrenom " Ă  la propriĂ©tĂ© " ID " Faites glisser un « RequiredFieldValidator » Ă  cĂŽtĂ© de « txtPrenom » avec les propriĂ©tĂ©s suivantes : (ErrorMessage = « Veuillez entrer votre prĂ©nom », ControlToValidate= « txtPrenom » et CssClass= « validationError », Display= « Dynamic ») InsĂ©rez un saut de ligne en appuyant sur « EntrĂ©e » ou (<br/>) en mode source Faites glisser un label dans la nouvelle ligne et affectez « Age : » Ă  la propriĂ©tĂ© « Text » de ce libellĂ© A cĂŽtĂ© du libellĂ©, glissez une zone de texte et affectez « txtAge » Ă  la propriĂ©tĂ© « ID » Faites glisser un « RequiredFieldValidator » Ă  cĂŽtĂ© de « txtAge » avec les propriĂ©tĂ©s suivantes : (ErrorMessage = « Veuillez entrer votre age », ControlToValidate= « txtAge » et CssClass= « validationError », Display= « Dynamic ») Faites glisser un « CompareValidator » Ă  cĂŽtĂ© de « RequiredFieldValidator » que vous venez d’ajouter avec les propriĂ©tĂ©s suivantes : (ErrorMessage = « L’ñge doit ĂȘtre une valeur numĂ©rique», ControlToValidate= « txtAge » et CssClass= « validationError », Display= « Dynamic ») Affectez « DataTypeCheck » Ă  la propriĂ©tĂ© « Operator » du CompareValidator que vous venez d’ajouter Affectez « Integer » Ă  la propriĂ©tĂ© « Type » du CompareValidator que vous venez d’ajouter Faites glisser un « RangeValidayor » Ă  cĂŽtĂ© de « CompareValidator » avec les propriĂ©tĂ©s suivantes : (ErrorMessage = « L’age doit ĂȘtre inclus entre 18 et 50 », ControlToValidate= « txtAge » et CssClass= « validationError », Display= « Dynamic ») Affectez « 18 » et « 50 » respectivement aux propriĂ©tĂ©s « Minimum » et « Maximum » du RangeValidator que vous venez d’ajouter Affectez « Integer » Ă  la propriĂ©tĂ© « Type » du « RangeValidator » que vous venez d’ajouter InsĂ©rez un saut de ligne en appuyant sur « EntrĂ©e » ou (<br/>) en mode source Faites glisser un label dans la nouvelle ligne et affectez « Langage : » Ă  la propriĂ©tĂ© « Text » de ce libellĂ© A cĂŽtĂ© du libellĂ©, glissez une zone de texte et affectez « txtLanguage » Ă  la propriĂ©tĂ© « ID » Faites glisser un « CustomValidator » Ă  cĂŽtĂ© de « txtLanguage » avec les propriĂ©tĂ©s suivantes : (ErrorMessage = « Veuillez entrer un langage correct », ControlToValidate= « txtLanguage » et CssClass= « validationError », Display= « Dynamic ») Double-cliquez sur le « CustomValidator », VS gĂ©nĂšre l’évĂšnement de validation et gĂ©nĂšre automatiquement l’évĂšnement ServerValidate Modifiez le code de l’évĂšnement comme suit : protected void CustomValidator1_ServerValidate1(object source, ServerValidateEventArgs args) { args.IsValid = (args.Value == "C#") || (args.Value == "C++"); } Ouvrez la page « Default.aspx » en mode source Dans la section d’entĂȘte (avant la balise body), insĂ©rez le code JavaScript suivant : <script type="text/javascript"> function ClientValidationHandler(source, args) { args.IsValid = (args.Value == "C#") || (args.Value == "C++"); } </script> Ouvrez « Default.aspx » en mode conception Cliquez sur le « CustomValidator » que vous venez d’ajouter Dans la propriĂ©tĂ© « ClientValidationFunction » entrez « ClientValidationHandler » InsĂ©rez un saut de ligne en appuyant sur « EntrĂ©e » ou (<br/>) en mode source Faites glisser un label dans la nouvelle ligne et affectez « Mail : » Ă  la propriĂ©tĂ© « Text » de ce libellĂ© A cĂŽtĂ© du libellĂ©, glissez une zone de texte et affectez « txtMail » Ă  la propriĂ©tĂ© « ID » 7. Faites glisser un « RequiredFieldValidator » Ă  cĂŽtĂ© de « txtMail » avec les propriĂ©tĂ©s suivantes : (ErrorMessage = « Veuillez entrer votre mail », ControlToValidate= « txtMail » et CssClass= « validationError », Display= « Dynamic ») Faites glisser un « RegularExpressionValidator » Ă  cĂŽtĂ© du dernier « RequiredValidator » avec les propriĂ©tĂ©s suivantes : (ErrorMessage = « Veuillez entrer un mail correct », ControlToValidate= « txtMail » et CssClass= « validationError », Display= « Dynamic ») Dans la fenĂȘtre de propriĂ©tĂ©s, Cliquez sur la propriĂ©tĂ© « ValidationExpression », remarquez le bouton avec les pointillĂ©s Cliquez sur le bouton avec pointillĂ©s, la fenĂȘtre suivante apparaĂźt : SĂ©lectionnez « Adresse Mail » Cliquez sur « OK » InsĂ©rez un saut de ligne en appuyant sur « EntrĂ©e » ou (<br/>) en mode source Faites glisser un label dans la nouvelle ligne et affectez « N° Mobile : » Ă  la propriĂ©tĂ© « Text » de ce libellĂ© A cĂŽtĂ© du libellĂ©, glissez une zone de texte et affectez « txtMobile » Ă  la propriĂ©tĂ© « ID » Faites glisser un " RegularExpressionValidator " Ă  cĂŽtĂ© du dernier " RequiredValidator " avec les propriĂ©tĂ©s suivantes : (ErrorMessage = " Veuillez entrer un numĂ©ro correct ", ControlToValidate= " txtMobile " et CssClass= " validationError ", Display= " Dynamic ") Au dĂ©but de la page, ajoutez un contrĂŽle de type « ValidationSummary » Entrez « validationSummary » dans la propriĂ©tĂ© « CssClass » du « ValidationSummary » Ajoutez un saut de ligne et un bouton Ă  la fin de la page Le code de la page devrait ĂȘtre Ă©quivalent Ă  celui-ci :   <asp:ValidationSummary ID="ValidationSummary1" runat="server" CssClass="validationSummary" /> <br />       <asp:Label ID="Label1" runat="server" Text="Nom : "></asp:Label>   <asp:TextBox ID="txtNom" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtNom" Display="Dynamic" ErrorMessage="Veuillez entre le nom" CssClass="validationError"></asp:RequiredFieldValidator> <br /> <asp:Label ID="Label2" runat="server" Text="PrĂ©nom : "></asp:Label> <asp:TextBox ID="txtPrenom" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtPrenom" Display="Dynamic" ErrorMessage="Veuillez entrer le prĂ©nom" CssClass="validationError"></asp:RequiredFieldValidator> <br /> <asp:Label ID="Label3" runat="server" Text="Age : "></asp:Label> <asp:TextBox ID="txtAge" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="txtAge" Display="Dynamic" ErrorMessage="Veuillez donner votre age" CssClass="validationError"></asp:RequiredFieldValidator> <asp:CompareValidator ID="CompareValidator1" runat="server" ControlToValidate="txtAge" Display="Dynamic" ErrorMessage="L'age doit ĂȘtre une valeur numĂ©rique" Operator="DataTypeCheck" Type="Integer" CssClass="validationError"></asp:CompareValidator> <asp:RangeValidator ID="RangeValidator1" runat="server" ControlToValidate="txtAge" ErrorMessage="L'age doit ĂȘtre 18 et 50" MaximumValue="50" MinimumValue="18" Type="Integer" CssClass="validationError"></asp:RangeValidator> <br /> <asp:Label ID="Label4" runat="server" Text="Langage : "></asp:Label> <asp:TextBox ID="txtLanguage" runat="server"></asp:TextBox>   <asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="CustomValidator" OnServerValidate="CustomValidator1_ServerValidate1" ClientValidationFunction="ClientValidationHandler" ControlToValidate="txtLanguage" CssClass="validationError">Veuillez entrer un langage correct</asp:CustomValidator>   <br /> <asp:Label ID="Label5" runat="server" Text="Mail : "></asp:Label> <asp:TextBox ID="txtMail" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="txtMail" CssClass="validationError" Display="Dynamic" ErrorMessage="RequiredFieldValidator">Veuillez entrer le mail</asp:RequiredFieldValidator> <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="txtMail" CssClass="validationError" Display="Dynamic" ErrorMessage="RegularExpressionValidator" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">Veuillez entrer un mail valide</asp:RegularExpressionValidator> <br /> <asp:Label ID="Label6" runat="server" Text="N° Mobile : "></asp:Label> <asp:TextBox ID="txtMobile" runat="server"></asp:TextBox> <asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" ControlToValidate="txtMobile" CssClass="validationError" ErrorMessage="Veuillez entrer un numĂ©ro correct" ValidationExpression="^0(5|6|7)(\d{8})$"></asp:RegularExpressionValidator>   <br />   <asp:Button ID="Button1" runat="server" Text="Button" /> Etape 2 : Installer les paquets nĂ©cessaires Ă  la validation cĂŽtĂ© client avec JQuery L’objectif de cette Ă©tape est d’installer les paquets « JQuery » et « AspNet.ScriptManager.JQuery » qui sont nĂ©cessaire Ă  mettre en place la validation cĂŽtĂ© client. Dans le menu cliquez sur « Outils –> Gestionnaire de Paquets –> Console du Gestionnaire de Paquets » La fenĂȘtre ci-dessous s’affiche : Dans la console, entrez « Install-Package JQuery » Une fois le paquet JQuery installĂ©, entrez « Install-Package AspNet.ScriptManager.JQuery » Les paquets installĂ©s permettent de gĂ©rer la validation cĂŽtĂ© client avec JQuery Etape 3 : Ajouter du style aux composants de la validation L’objectif de cette Ă©tape est d’ajouter les rĂšgles CSS nĂ©cessaires Ă  afficher les informations de validation en rouge et avec une taille de texte lĂ©gĂšrement plus petite. Dans le projet, crĂ©er une feuille de style appelĂ©e « Site.css » Changez le code du CSS comme suit : body { font-family: 'Segoe UI' , Tahoma, Geneva, Verdana, sans-serif; }   input { margin : 2px; }   .validationError { font-size: 0.8em; color: red; }   .validationSummary { margin : 5px; padding : 5px; background-color : red; color : white; }   .validationSummary ul { list-style : none; }   Appliquez le style « Site.css » Ă  la forme « Default.aspx » ExĂ©cutez l’application en appuyant sur « F5 » Pour tĂ©lĂ©charger le code cliquez ici

Tutoriel 4.2–Utilisation des pages maitre.

L’objectif de ce tutoriel (module 4) est d’apprendre Ă  utiliser les pages maitres pour uniformiser les pages d’une application web. Pour ce, nous crĂ©erons trois pages web dont la page d’accueil avec une structure Ă  deux niveaux en utilisant les pages maitre imbriquĂ©es. Etape 1 – CrĂ©er une page maĂźtre Lancez VS 2012 Choisir Fichier -> Nouveau -> Application ASP.NET vide Entrez « TestMaster » dans la zone « Nom » Cliquez sur OK Cliquez sur le bouton droit sur « TestMaster » dans l’explorateur de solutions SĂ©lectionnez « Ajouter un nouvel Ă©lĂ©ment » Dans le modĂšle sĂ©lectionnez « Page MaĂźtre » Dans la zone « Nom », entrez « Main » Appuyez sur OK Ouvrez la page maĂźtre en mode source VĂ©rifiez que VS l’a crĂ©Ă©e avec la directive « Master » au lieu de « Page » <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Main.master.cs" Inherits="TestMaster.Main" %> VĂ©rifiez que VS a insĂ©rĂ© deux conteneurs (ContentPlaceHolder) dans la page maĂźtre InsĂ©rez une balise de type entĂȘte (Header) juste avant le second conteneur avec la classe CSS «header » Entourez le deuxiĂšme conteneur dans une div avec la classe « content » <form id="form1" runat="server"> <header class="header"> </header> <div class="content"> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> </form> Ouvrez la page maĂźtre en mode conception Ajoutez un menu dans l’entĂȘte en glissant un menu Ă  partir de la boĂźte Ă  outils Dans la zone de propriĂ©tĂ©s du menu, cliquez sur « Items » Ajoutez deux Ă©lĂ©ments « Page 1 » et « Page 2 » Dans l’élĂ©ment « Page 2 », ajoutez deux sous-Ă©lĂ©ments, « Page 2.1 » et « Page 2.2 » Cliquez sur OK Modifiez la page maĂźtre en mode source comme suit : <form id="form1" runat="server"> <header class="header"> <asp:Menu ID="Menu1" runat="server" CssClass="siteMenu" ForeColor="White" Orientation="Horizontal"> <DynamicHoverStyle BackColor="#FFFFB0" ForeColor="#666666" /> <Items> <asp:MenuItem Text="Page 1" Value="Page 1" NavigateUrl="~/Default.aspx"></asp:MenuItem> <asp:MenuItem Text="Page 2" Value="Page 2"> <asp:MenuItem Text="Page 2.1" Value="Page 2.1" NavigateUrl="~/Page21.aspx"></asp:MenuItem> <asp:MenuItem Text="Page 2.2" Value="Page 2.2" NavigateUrl="~/Page22.aspx"></asp:MenuItem> </asp:MenuItem> </Items> <LevelMenuItemStyles> <asp:MenuItemStyle BackColor="#990000" Font-Underline="False" HorizontalPadding="10px" ItemSpacing="20px" VerticalPadding="10px" /> <asp:MenuItemStyle BackColor="#990000" Font-Underline="False" HorizontalPadding="10px" ItemSpacing="20px" VerticalPadding="10px" /> </LevelMenuItemStyles> <LevelSelectedStyles> <asp:MenuItemStyle BackColor="#FFFFB0" Font-Underline="False" ForeColor="Gray" /> <asp:MenuItemStyle BackColor="#FFFFB0" Font-Underline="False" ForeColor="#666666" /> </LevelSelectedStyles> <StaticHoverStyle BackColor="#FFFFB0" ForeColor="#666666" /> </asp:Menu> </header> <div class="content"> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> </form> Dans le projet, ajoutez une feuille de style appelĂ©e « Site.css » Modifiez le CSS comme suit : body { padding: 0; margin: 0; font-family: 'Gill Sans' , 'Gill Sans MT' , Calibri, 'Trebuchet MS' , sans-serif; background-color: #808080; }   .header { min-height: 75px; background-color: #115E66; }   .siteMenu { margin-top : 65px; }   div.content { padding : 15px; }   div.lateralBar { background-color: #99CCFF; margin : 5px; width : 160px; height : 140px; float : left; }   div.innerContent { padding : 15px; float : left; }   div.clear { clear : both; } Ouvrez la page maĂźtre en mode conception Faites glisser la feuille de style sur la page maĂźtre afin d’appliquer les styles Dans l’explorateur de solutions, cliquez pour ajouter un nouvel Ă©lĂ©ment au projet « TestMaster » Dans le modĂšle, choisissez « Forme Web » utilisant une page maĂźtre Entrez default dans la zone « Nom » ApparaĂźt ensuite une boĂźte de sĂ©lection de la page maĂźtre Ă  appliquer. SĂ©lectionnez « Main » Cliquez ensuite sur « OK » Ouvrez Default.aspx en mode source VĂ©rifiez que la directive « Page » contient une autre propriĂ©tĂ© appelĂ©e « MasterPageFile » <%@ Page Title="" Language="C#" MasterPageFile="~/Main.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TestMaster.Default" %> Ouvrez « Default.aspx » en mode conception Entrez « Bienvenue dans la page 1 dans la page principale ExĂ©cutez pour voir Etape 2 : CrĂ©ation de pages maĂźtres imbriquĂ©es L’objectif de cette Ă©tape est de crĂ©er un deuxiĂšme niveau de navigation en utilisant les pages maĂźtre imbriquĂ©es. Dans l’explorateur de solutions, ajoutez un nouvel Ă©lĂ©ment au projet « TestMaster » SĂ©lectionnez « Page MaĂźtre ImbriquĂ©e » dans le modĂšle Dans la zone « Nom » entrez « Child » Cliquez sur OK Ouvrez la page « Child » en mode source VĂ©rifiez que la directive est « Master » et que cette directive possĂšde une propriĂ©tĂ© « MasterPageFile » <%@ Master Language="C#" MasterPageFile="~/Main.Master" AutoEventWireup="true" CodeBehind="Child.master.cs" Inherits="TestMaster.Child" %> Dans le deuxiĂšme composant « Content » ajoutez trois « div » avec les classes « lateralBar », « innerContent » et « clear » respectivement Modifiez le code comme suit : <div class="lateralBar"> <ul> <li> Sous-Menu 1 </li> <li> Sous-Menu 2 </li> </ul> </div> <div class="innerContent"> </div> <div class="clear"></div> Ouvrez la page maĂźtre Child en mode conception A partir de la boĂźte Ă  outils, faites glisser un composant « ContentPlaceHolder » Ă  l’intĂ©rieur de la div « innerContent » CrĂ©ez une forme web de contenu « Page21 » avec pour page maĂźtre « Child » InsĂ©rez « Bienvenue dans la page 2.1 » dans cette page De la mĂȘme façon, crĂ©er une forme web de contenu « Page22 » avec le message « Bienvenue dans la page 2.2 » ExĂ©cutez en appuyant sur « F5 » Pour tĂ©lĂ©charger le code, cliquez ici

Tutoriel 4.1 - Navigation et Passage d’information

L’objectif de ce tutoriel, premier du module 4, est de voir les diffĂ©rents mĂ©canismes permettant de naviguer entre des pages et de passer des informations entre ces pages. Les diffĂ©rents mĂ©canismes serviront Ă  afficher une liste de film, Ă  modifier des films, Ă  mettre Ă  jour et Ă  supprimer des films. Etape 1 – CrĂ©er une application ASP.NET vide et faire un lien entre deux pages L’objectif de cette Ă©tape est de montrer comment naviguer entre deux pages en utilisant le composant « HyperLink ». Lancez VS 2012 Choisir Fichier -> Nouveau -> Application ASP.NET vide Entrez « Navigation » 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 » Ajoutez une autre forme appelĂ©e « Liste » Ouvrez « Default.aspx » en mode conception Ajoutez un contrĂŽle « HyperLink » dans la page Dans la propriĂ©tĂ© « Text » entrez « Liste » Cliquez sur la propriĂ©tĂ© « NavigateUrl » puis sur le bouton « Parcourir » SĂ©lectionnez la page « List.aspx » Cliquez sur « OK » ExĂ©cutez l’application Examinez comment le lien permet de rediriger vers une autre page   Etape 2 : Ajout de traitements de modification et de suppression dans le service de films L’ancienne version de la bibliothĂšque ne disposait pas de fonctions d’ajout ou de suppression de films. L’objectif de cette Ă©tape est d’intĂ©grer ces fonctions. Dans l’explorateur de solutions, cliquez sur le bouton droit sur la solution (pas le projet) Cliquez avec le bouton droit puis sĂ©lectionnez, « Ajouter un Projet Existant » Parcourir afin de trouver le projet « Bibliotheque » utilisĂ© prĂ©cĂ©demment Cliquez sur le projet « Navigation » puis ajouter une classe globale d’application « Global.asax » Dans le projet « Navigation », ajoutez une rĂ©fĂ©rence vers le projet « Bibliotheque » Modifiez « Global.asax » comme suit : protected void Application_Start(object sender, EventArgs e) { ServicesDonnees.SetFilmService(new FilmService()); } Ouvrez le fichier « IFilmService.cs » dans le projet « Bibliotheque » et modifiez le comme suit : public interface IFilmService { /// <summary> /// ajoute un film /// </summary> /// <param name="f"></param> void Add(Film f);   /// <summary> /// supprimer un film /// </summary> /// <param name="f"></param> void Delete(Film f);   /// <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(); } Ouvrez la classe « FilmService » et modifiez-la 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; }   public void Add(Film f) { _liste.Add(f); }     public void Delete(Film f) { _liste.Remove(f); } } Appuyez sur « F6 » pour vĂ©rifier que le code compile correctement. Etape 3 : Affichage de la liste des films L’objectif de cette Ă©tape est d’afficher la liste des films existants sous forme de tableau. Ça permettra entre autre de manipuler le composant « Table ». Ouvrez la forme « List.aspx » en mode conception et ajoutez un label avec l’id « lblMessage » et une table comme suit : <form id="form1" runat="server">   <asp:Label ID="lblMessage" runat="server" Text="Label"></asp:Label> <asp:Table ID="Table1" runat="server"> </asp:Table>   </form> Modifiez l’évĂšnement « PageLoad » de la page « List » comme suit : Appuyez ensuite sur « F5 » pour vĂ©rifier que ça exĂ©cute correctement protected void Page_Load(object sender, EventArgs e) { lblMessage.Visible = false; var row = new TableRow(); var cell = new TableCell(); cell.Text = "Num"; row.Cells.Add(cell); cell = new TableCell(); cell.Text = "Titre"; row.Cells.Add(cell); cell = new TableCell(); cell.Text = "AnnĂ©e"; row.Cells.Add(cell); cell = new TableCell(); row.Cells.Add(cell); cell.Text = "DĂ©tails"; Table1.Rows.Add(row); foreach (Film f in ServicesDonnees.FilmService.GetAll()) { row = new TableRow(); cell = new TableCell(); cell.Text = f.Numero.ToString(); row.Cells.Add(cell); cell = new TableCell(); cell.Text = f.Titre; row.Cells.Add(cell); cell = new TableCell(); cell.Text = f.Annee.ToString(); row.Cells.Add(cell); cell = new TableCell(); var link = string.Format("Edit.aspx?mode=edit&numero={0}", f.Numero); cell.Text = string.Format("<a href=\"{0}\">Modifier", link); row.Cells.Add(cell); Table1.Rows.Add(row); } }   Etape 4 : CrĂ©ation de la page d’édition de films L’objectif de cette Ă©tape est de crĂ©er une page permettant de modifier ou d’ajouter des films. Pour connaĂźtre le mode en cours (insertion ou modification), on utilise la variable « mode » qui est transmise sous forme de chaine de requĂȘte avec l’URL. En mode modification, le film Ă  modifier est connu en utilisant la chaĂźne de requĂȘte « numero ». Les diffĂ©rents messages seront transmis Ă  la page d’accueil en utilisant les variables de session. Dans le projet « Navigation » ajoutez une page qui s’appelle « Edit.aspx » InsĂ©rez des contrĂŽles dans Edit.aspx de façon Ă  pouvoir ajouter ou modifier un film comme suit : <form id="form1" runat="server"> <div>   <asp:Label ID="lblMessage" runat="server" Text="Label" ForeColor="#FF3300"></asp:Label><br />   <asp:Label ID="Label1" runat="server" Text="NumĂ©ro :"></asp:Label> <asp:TextBox ID="txtNumero" runat="server"></asp:TextBox> <br /> <asp:Label ID="Label2" runat="server" Text="Titre : "></asp:Label> <asp:TextBox ID="txtTitre" runat="server"></asp:TextBox> <br /> <asp:Label ID="Label3" runat="server" Text="Annee :"></asp:Label> <asp:TextBox ID="txtAnnee" runat="server"></asp:TextBox> <br /> <asp:Button ID="Button1" runat="server" Text="Enregistrer" /> </div>   </form>     Modifiez l’évĂšnement « Page_Load » de la page « Edit.aspx » comme suit : protected void Page_Load(object sender, EventArgs e) { lblMessage.Visible = false; var editMode = Request.QueryString["mode"]; Session["message"] = null; Film film = null; if (editMode == "edit") { var numero = int.Parse(Request.QueryString["numero"]); film = ServicesDonnees.FilmService.GetFilm(numero); } if (!IsPostBack) { if (editMode == "edit") { // afficher le fim txtNumero.Text = film.Numero.ToString(); txtTitre.Text = film.Titre; txtAnnee.Text = film.Annee.ToString(); } } else { try { if (editMode == "add") film = new Film(); film.Numero = int.Parse(txtNumero.Text); film.Titre = txtTitre.Text; film.Annee = int.Parse(txtAnnee.Text); if (editMode == "add") { ServicesDonnees.FilmService.Add(film); Session["message"] = "Film ajoute avec succes"; } else Session["message"] = "Film modifiĂ© avec succes"; Response.Redirect("List.aspx");   } catch { lblMessage.Text = "Veuillez vĂ©rifiez vos donnĂ©es"; lblMessage.Visible = true; } } La page vĂ©rifie qu’elle est en mode Ă©dition ou ajout en examinant la variable de requĂȘte « mode » Si elle est en mode « modification », elle rĂ©cupĂšre l’id du film Ă  modifiez en examinant la chaĂźne de requĂȘte « numero » puis affiche les informations de ce film En mode postback, selon on est en mode ajout ou modification, la page ajoute ou modifie la film puis redirige vers la page « List » Si l’opĂ©ration s’est bien dĂ©roulĂ©e, la page « Edit » communique un message vers la page « List » en utilisant la propriĂ©tĂ© « Session » Appuyez sur « F6 » pour vĂ©rifier que le code compile Ouvrez la page « List.aspx » comme suit : <form id="form1" runat="server">   <asp:Label ID="lblMessage" runat="server" Text="Label"></asp:Label> <asp:Table ID="Table1" runat="server"> </asp:Table> <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Edit.aspx?mode=add">Ajout</asp:HyperLink> <br /> <asp:TextBox ID="txtEdit" runat="server"></asp:TextBox> <asp:Button ID="btnSupprimer" runat="server" PostBackUrl="~/Delete.aspx" Text="Supprimer" /> </form> Ouvrez le fichier code behind « List.aspx.cs » InsĂ©rez le code suivant juste aprĂšs la premiĂšre instruction de la mĂ©thode if (Session["message"] != null) { lblMessage.Text = Session["message"].ToString(); lblMessage.Visible = true; Session["message"] = null; } ExĂ©cutez l’application en appuyant sur F5 et vĂ©rifiez que l’application peut ajouter et supprimer des films et que les messages de succĂšs s’affichent correctement. Etape 5 : Communication entre pages en utilisant « PostbackUrl » L’objectif de cette Ă©tape est d’implĂ©menter la suppression qui est gĂ©rĂ©e par une autre page. On utilise la propriĂ©tĂ© « PostbackUrl » et « PreviousPage » pour passer Ă  la page de suppression les informations concernant le film Ă  supprimer. Ouvrez la page « List.aspx » en mode source VĂ©rifiez la propriĂ©tĂ© « PostBackUrl » du bouton « supprimer » <asp:Button ID="btnSupprimer" runat="server" PostBackUrl="~/Delete.aspx" Text="Supprimer" /> Dans le projet « Navigation », ajoutez une forme web appelĂ©e « Delete.aspx » Changez l’évĂšnement Page_Load de cette page comme suit : protected void Page_Load(object sender, EventArgs e) { var page = PreviousPage as List; if (page == null) { Session["message"] = "erreur"; Response.Redirect("List.aspx"); return; } var textBox = page.FindControl("txtEdit") as TextBox; int numero; if (!int.TryParse(textBox.Text, out numero)) { Session["message"] = "entrez une valeur numĂ©rique"; Response.Redirect("List.aspx"); } else { var film = ServicesDonnees.FilmService.GetFilm(numero); if (film == null) { Session["message"] = "Film non trouvĂ©"; Response.Redirect("List.aspx"); } else { ServicesDonnees.FilmService.Delete(film); Session["message"] = "Film supprimĂ© avec succĂšs"; Response.Redirect("List.aspx"); } } } VĂ©rifiez l’utilisation de la propriĂ©tĂ© « PreviousPage » La valeur du numĂ©ro du film est rĂ©cupĂ©rĂ©e en utilisant la mĂ©thode « FindControl » ExĂ©cutez l’application en appuyant sur « F5 » VĂ©rifiez que la suppression d’un film se dĂ©roule bien et qu’un message apparait. Etape 6 : IntĂ©gration des contrĂŽles utilisateur L’objectif de cette Ă©tape est de rĂ©utiliser un contrĂŽle utilisateur dans le but d’éviter la redondance du code. Comme exemple, chacune des pages du site contiendra un contrĂŽle permettant Ă  l’utilisateur d’ajouter un commentaire. Dans l’explorateur de solutions, ajoutez un nouvel Ă©lĂ©ment Dans le modĂšle, choisissez « ContrĂŽle Utilisateur Web » Dans la zone « Nom », entrez « CommentsControl »   Ouvrez le contrĂŽle en mode source VĂ©rifiez qu’il y a une directive « Control » Ă  la place de la directive « Page » Ajoutez un label et une zone de texte multiligne dans le contrĂŽle comme suit : <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="CommentControl.ascx.cs" Inherits="Navigation.CommentControl" %> <asp:Label ID="Label1" runat="server" Text="Votre commentaire :"></asp:Label> <br /> <asp:TextBox ID="TextBox1" runat="server" Rows="4" TextMode="MultiLine" Width="338px"></asp:TextBox> Ouvrez « List.aspx » en mode conception Par un glisser dĂ©poser, glissez « CommentsControl » Ă  la fin de la page VĂ©rifiez que Visual Studio a ajoutĂ© la directive « Register » au dĂ©but du fichier, en dessous de la directive « Control » <%@ Register src="CommentControl.ascx" tagname="CommentControl" tagprefix="uc1" %> VĂ©rifiez dans le code, qu’un composant CommentsControl a Ă©tĂ© ajoutĂ© comme suit : <uc1:CommentControl ID="CommentControl1" runat="server" /> VĂ©rifiez que la page « List.aspx » ressemble Ă  ceci :   De la mĂȘme façon, ajoutez un contrĂŽle « CommentsControl » dans la page « Edit.aspx » VĂ©rifiez l’exĂ©cution et l’intĂ©gration du contrĂŽle en cliquant sur « F5 »   Pour tĂ©lĂ©charger le source, cliquez ici

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

Tutoriel 2.2 : Création d’une application ASP.NET vide

L’objectif de ce deuxième tutoriel du module 2 est de découvrir la structure d’une application ASP.NET à partir d’un modèle vide. Il s’agit aussi de voir la différence entre les contrôles ASP.NET serveur et les contrôles HTML serveur. Etape 1 – Créer une application ASP.NET vide L’objectif de cette étape est de découvrir la création d’applications avec un modèle vierge. Il s’agit aussi de découvrir les propriétés « Request » et « Response » permettant de lier la page aux requêtes et réponses http. Lancez VS 2012 Choisir Fichier -> Nouveau -> Application ASP.NET vide Entrez « DeuxiemeApp » dans la zone « Nom » Cliquez sur OK Examinez le contenu du projet   Dans l’explorateur de solution, cliquez sur le projet « DeuxiemeApp » avec le bouton droit puis sélectionnez « Ajouter un nouvel élément » Sélectionnez « Forme web » dans le modèle Entrez « Default.aspx » dans la zone nom Cliquez sur le bouton « Ajouter » Ouvrez « Default.aspx » en mode conception En utilisant la boîte à outils, Insérez une zone de texte dans la « div » inclue dans la page En utilisant la boîte à outils, insérez un bouton après la zone de texte Double-cliquez sur le bouton Insérez le code suivant dans l’évènement de clic : protected void Button1_Click(object sender, EventArgs e) { TextBox1.Text = "Formation"; } Modifiez la méthode Page_Load comme suit : protected void Page_Load(object sender, EventArgs e) { var url = Request.RawUrl; if (IsPostBack) Response.Write(url + " en mode postback"); else Response.Write(url + " en mode normal"); } Etape 2 : Comparaison entre les balises HTML et les contrôles serveur L’objectif de cette étape est de comparer le code HTML généré avec les balises contenues dans la forme web. Relancez l’application Examinez le code source de la page Etape 3 : Ajout de contrôles HTML Serveur L’objectif de cette étape est de découvrir les contrôles HTML et d’y accéder à partir du code en changeant l’attribut « runat ». Fermez la fenêtre du navigateur Ouvrez « Default.aspx » en mode conception Faites glisser un contrôle de type « Input (Button) » juste après le bouton qui existe Changez la propriété « id » en « monBouton » Basculez en mode code Changer le code du nouveau bouton comme suit en mettant à jour son attribut « runat » : <input id="monBouton" type="button" value="button" runat="server" /> Basculez vers le code behind en appuyant sur F7 Modifiez « Page_Load » comme suit : protected void Page_Load(object sender, EventArgs e) { var url = Request.RawUrl; monBouton.Value = "Test"; if (IsPostBack) Response.Write(url + " en mode postback"); else Response.Write(url + " en mode normal"); } Exécutez l’application en appuyant sur « F5 »  Pour télécharger le code : Tutoriel 2.2.zip (28,72 kb)

Tutoriel 2.1 : Création d’une application ASP.NET à partir d’un modèle

Ceci est le premier des deux tutoriaux du module 2. Son objectif est de créer une application ASP.NET à partir du modèle fourni par Visual Studio 2012. Etape 1 – Créer une application ASP.NET L’objectif de cette étape est de créer une application ASP.NET à partir du modèle fourni avec Visual Studio. Lancez VS 2012 Choisir Fichier -> Nouveau -> Application ASP.NET Entrez « PremiereApp » dans la zone « Nom » Cliquez sur OK Examinez le contenu du projet Etape 2 : Exécution L’objectif de cette étape est de découvrir le comportement de l’application en exécution sur le navigateur. Exécutez l’application en appuyant sur « F5 »  Etape 3 : Découverte des Contrôles ASP.NET L’objectif de cette étape est de découvrir les contrôles ASP.NET dans la boîte à outils de Visual Studio. Fermez la fenêtre du navigateur Ouvrez le fichier « Default.aspx » en mode conception Examinez les différents contrôles dans la boîte à outils Etape 4 : Utilisation d’un contrôle serveur L’objectif de cette étape est d’ajouter un contrôle ASP.NET à une page existante, d’affecter des propriétés et de coder un évènement. Ouvrez la page « Contact.aspx » en mode conception Pointez le curseur à la fin puis appuyez sur « entrée » Remarquez la création d’un nouveau paragraphe « <p> » Par un glisser-déposer, insérez un composant « Libellé » dans le nouveau paragraphe Entrez votre nom dans la propriété « Text » Ajoutez un bouton après le libellé Entrez le texte « Changer » dans la propriété « Text » du bouton Double-cliquez le bouton Entrez le code suivant dans l’évènement généré ensuite exécutez l’application protected void Button1_Click(object sender, EventArgs e) { Label1.Text = DateTime.Now.ToString(); } Etape 5 : Examination des répertoires du projet L’objectif de cette étape est d’examiner la structure des répertoires d’un projet ASP.NET. Dans l’explorateur de solutions cliquez sur le bouton droit sur le projet Sélectionnez « Ouvrir dans l’explorateur de fichiers » Examinez l’arborescence des répertoires dans l’explorateur Windows Pour télécharger le code :  Tutoriel 2.1.zip (1,97 mb)

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