Mostefai Mohammed Amine's Blog

Say That I Was Here !

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