Module : programmation site Web dynamique Naviguer entre les pages via site map Soit le site web suivant qui est constitué de six pages web : On veut créer un menu constitué de trois nœuds principaux générale NosCoordonnées() Nouscontacté Produits produits produitenrepture AjouterUnProduit Pour ce faire if faut ajouter a notre projet un nouvel élément Web.sitemap 1
C est un fichier XML qui nous permet de définir le plan de notre site web Maintenant on ajoute les pages qu on veut afficher sur un menu : <?xml version="1.0" encoding="utf-8"?> <sitemap xmlns="http://schemas.microsoft.com/aspnet/sitemap-file-1.0" > <sitemapnode url="default.aspx" title="accueil" description="accueil"> <sitemapnode url="noscoordonnees.aspx" title="nos coordonnées" description="" /> <sitemapnode url="nouscontacté.aspx" title="nous Contacté" description="nous contacté" /> <sitemapnode url="produits.aspx" title=" produits " description="produits" /> <sitemapnode url="ajouterunproduit.aspx" title="ajouter Un Produit" description="ajouter Un Produit" /> <sitemapnode url="produitenrepture.aspx" title="produit en repture " description="produit en repture" /> </sitemapnode> </sitemap> Préparation de la page default.aspx On insère un tableau a deux colonnes 2
Puis on ajoute le contrôle SiteMapDataSource non visible sur la page Default.aspx: Puis on insére l objet treeview: 3
On renseigne la source de données SiteMapDataSource1 Affichage sur le navigateur : Dans le nœud Accueil on a cinq éléments de menu, en général on doit ajouter deux sous menu (générale et produits) qui on le niveau 2 : générale NosCoordonnées Nouscontacté Produits produits 4
produitenrepture AjouterUnProduit Pour ce faire on doit faire une modification sur le fichier Web.sitemap <?xml version="1.0" encoding="utf-8"?> <sitemap xmlns="http://schemas.microsoft.com/aspnet/sitemap-file-1.0" > <sitemapnode url="default.aspx" title="accueil" description="accueil"> <sitemapnode title="générale" > <sitemapnode url="noscoordonnees.aspx" title="nos coordonnées" /> <sitemapnode url="nouscontacté.aspx" title="nous Contacté" /> </sitemapnode> <sitemapnode title="produits" description="produits"> <sitemapnode url="produits.aspx" title=" produits " description="produits" /> <sitemapnode url="ajouterunproduit.aspx" title="ajouter Un Produit" /> <sitemapnode url="produitenrepture.aspx" title="produit en repture " /> </sitemapnode> </sitemapnode> </sitemap> Il suffit d inserer chaque groupe dans une balise <sitemapnode title="générale" >.. </sitemapnode> Utilisation d une Masterpage La page master Page est une page qui contient un modèle conteneur qui peut contenir d autres pages. Entre autre le master page nous permet d avoir une structure unique pour tous les pages du projet Pour ajouter une master page : Ajouter nouvelle élément puis 5
Une page MasterPage.master est ajoutée au projet Code source : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>untitled Page</title> <asp:contentplaceholder id="head" runat="server"> </asp:contentplaceholder> </head> <body> <form id="form1" runat="server"> <div> <asp:scriptmanager ID="ScriptManager1" runat="server" /> <asp:contentplaceholder id="contentplaceholder1" runat="server"> </asp:contentplaceholder> </div> </form> </body> </html> La balise <asp:contentplaceholder id="contentplaceholder1" runat="server"> </asp:contentplaceholder> 6
On utilise la balise ContentPlaceHolder pour definir la section du master page qui va être remplacé par le contenu des pages filles. Préparation de la master page On insere un tableau sous la forme suivante : Puis on insere le contentplaceholder1 dans la table Préparation d une web pour qu elle soit une page fille d une master page : Soit la page produits.asp 7
Pour quelle soit une page fille il faut ajouter la directive suivante <%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="produits.aspx.cs" Inherits="produits" %> Puis on supprime les balises suivante car il se trouvent dans la page Master <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> <div> Ne pas oublier de supprimer les fermetures des balises Puis on ajoute la balise <asp:content ID="content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">.. </asp:content> 8
Puis on renseigne ID et le ContentPlaceHolderID qui fait reference a la <asp:contentplaceholder id="contentplaceholder1" runat="server"> </asp:contentplaceholder> De la masterpage MasterPage.Master Produits.aspx 9
10