Module : programmation site Web dynamique Naviguer entre les pages via site map

Dimension: px

Commencer à balayer dès la page:

Download "Module : programmation site Web dynamique Naviguer entre les pages via site map"

Noëlle Bourgeois
il y a 10 ans
Total affichages :

1 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

trois nœuds principaux générale NosCoordonnées() Nouscontacté Produits produits

2 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=" > <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

aspx" title="nos coordonnées" description="" /> <sitemapnode url="nouscontacté.aspx" title="nous Contacté" description="nous contacté" /> <sitemapnode url="produits.

3 Puis on ajoute le contrôle SiteMapDataSource non visible sur la page Default.aspx: Puis on insére l objet treeview: 3

4 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

général on doit ajouter deux sous menu (générale et produits) qui on

5 produitenrepture AjouterUnProduit Pour ce faire on doit faire une modification sur le fichier Web.sitemap <?xml version="1.0" encoding="utf-8"?> <sitemap xmlns=" > <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

aspx" title="nos coordonnées" /> <sitemapnode url="nouscontacté.aspx" title="nous Contacté" /> </sitemapnode> <sitemapnode title="produits" description="produits"> <sitemapnode url="produits.

6 Une page MasterPage.master est ajoutée au projet Code source : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <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

org/1999/xhtml"> <head runat="server"> <title>untitled Page</title> <asp:contentplaceholder id="head" runat="server"> </asp:contentplaceholder> </head> <body> <form

7 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

Préparation de la master page On insere un tableau sous la forme suivante : Puis on insere

8 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" " <html xmlns=" <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

org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.

9 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 10

Documents pareils

TP3-2 CONSTRUISEZ VOTRE PREMIER SERVICE AZURE

TP3-2 CONSTRUISEZ VOTRE PREMIER SERVICE AZURE Table des matières TP3-2 Construisez votre premier service Azure... 1 Construisez votre premier service Azure... 2 Mise en place des outils de développement...