Si vous avez déjà voyagé vers une destination inconnue, vous connaissez l'importance des cartes : elles peuvent contribuer à rendre votre voyage plus confortable. Le même principe s’applique aux sites Web. Un site Web doit présenter aux visiteurs une structure de navigation simple mais flexible afin qu'ils puissent facilement naviguer vers les différentes parties du site Web. ASP.NET 2.0 fournit une fonctionnalité appelée SiteMap qui vous aide à réaliser cette fonctionnalité. Cet article explique ce que sont les plans de site et décrit comment développer une structure de navigation de site Web qui les utilise.
1. Plan du site
Un plan du site est un fichier XML (avec une extension .sitemap) qui décrit en détail l'ensemble de la présentation de navigation de votre site Web. Vous pouvez utiliser des fichiers de plan de site pour répondre à tous vos besoins.
Un exemple aidera à expliquer les fichiers de plan de site. La figure 1 montre la structure des répertoires d'un exemple de site Web.
 Figure 1 : Structure du site Web |
Dans la figure, la page d'accueil (Default.aspx) et la page Contactez-nous (contact.aspx) se trouvent dans le dossier racine du site Web. Il existe également deux sous-dossiers appelés Produits et Services. Il existe deux formulaires Web sous chaque sous-dossier : correspondant à Product1.aspx et Product2.aspx, ainsi qu'à Service1.aspx et Service2.aspx.
Maintenant, suivez simplement ces étapes et vous pourrez utiliser un plan du site pour décrire la structure de votre site Web :
1. Créez un nouveau site Web à l'aide de VS.NET 2005.
2. Cliquez avec le bouton droit sur le site Web et sélectionnez « Ajouter un nouvel élément... ».
3. Sélectionnez Plan du site dans la boîte de dialogue « Ajouter un nouvel élément... » (voir Figure 2) et nommez-le Web.sitemap.
 Figure 2 : Ajout d'un nouveau plan de site |
Saisissez le balisage XML suivant dans le fichier web.sitemap :
＜?xml version="1.0" encodage="utf-8" ?＞
＜siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" ＞
＜siteMapNode url="default.aspx" title="Accueil" description="Mon site Web"＞
＜siteMapNode url="~/products/default.aspx" title="Produits"＞
＜siteMapNode url="~/products/product1.aspx" title="Premier produit" /＞
＜siteMapNode url="~/products/product2.aspx" title="Deuxième produit" /＞
＜/siteMapNode＞
＜siteMapNode url="~/services/default.aspx" title="Services"＞
＜siteMapNode url="~/services/service1.aspx" title="Premier service" /＞
＜siteMapNode url="~/services/service2.aspx" title="Deuxième service" /＞
＜/siteMapNode＞
＜siteMapNode url="contact.aspx" title="Contactez-nous" /＞
＜/siteMapNode＞
＜/plan du site＞ |
La racine du fichier sitemap est siteMap. Il contient un nœud siteMapNode, et selon la structure de votre site Web, il peut contenir plusieurs nœuds siteMapNode.
Cette balise siteMapNode possède quatre attributs importants (voir tableau 1).
Le titre | de la description | de la propriété |
| affiche | le titre de la page. Cette propriété est souvent utilisée par les contrôles de navigation pour afficher le titre de l'URL. |
| url | affiche l'URL de la page décrite par ce nœud. |
| description | spécifie une description de cette page. Vous pouvez utiliser cette description pour afficher le contenu de l'invite. |
| rôles | En utilisant le découpage de sécurité (discuté plus tard), cet attribut spécifie les rôles qui sont autorisés à accéder à cette page. |
Tableau 1 : Attributs importants de la balise <siteMapNode>
Cela forme votre plan de site. Vous pouvez désormais l'utiliser à des fins de navigation.
2. Comment utiliser SiteMap
Vous pouvez utiliser le fichier de plan du site créé dans la section précédente de trois manières courantes :
· Utilisation du contrôle SiteMapPath
· Utilisation du contrôle de source de données SiteMap
· Utilisation de la classe SiteMap
Le contrôle SiteMapPath permet de générer du fil d'Ariane. La figure 3 montre ce qu'est le fil d'Ariane.
 Figure 3 : Navigation dans le fil d'Ariane |
Le contrôle SiteMapPath affiche différents niveaux de navigation. Par exemple, vous pouvez cliquer sur le niveau parent ou racine pour revenir en arrière ou accéder au niveau supérieur. Bien entendu, vous pouvez également personnaliser la hiérarchie de navigation.
ASP.NET 2.0 est également livré avec un bon ensemble de contrôles de navigation, notamment TreeView et des menus. Avec le contrôle de source de données SiteMap, vous pouvez lier des fichiers de plan de site à ces contrôles.
Dans certains cas, les commandes de navigation intégrées peuvent ne pas répondre à vos besoins. Dans ce cas, vous pouvez accéder par programme au fichier de plan du site et lire les différents nœuds siteMapNode. Vous pouvez ensuite générer une structure de navigation personnalisée à l'aide des propriétés de titre et d'URL de siteMapNode.
3. Utilisez le contrôle SiteMapPath
Avant d'entrer dans les détails, créons d'abord la structure de répertoires et le formulaire Web dont nous avons besoin. Tout d’abord, ajoutez deux dossiers, Produits et Services, au site Web. Ensuite, ajoutez une nouvelle page maître MasterPage.master. Ajoutez ensuite les formulaires Web présentés dans le tableau 2 et assurez-vous de définir la page maître pour eux lorsque vous les ajoutez.
| Dossier | de nom du formulaire Web |
| Default.aspx | Racine du site Web |
| Contact.aspx | Racine du site Web |
| Default.aspx | Produits |
| Product1.aspx | Produits |
| Product2.aspx | Produits |
| Default.aspx | Services |
| Service1.aspx | Services |
| Service2.aspx | Services |
Tableau 2 : Liste des formulaires Web
Maintenant, ouvrez la page maître que vous avez ajoutée précédemment. Faites glisser un contrôle Label et un contrôle SiteMapPath dessus. Ensuite, définissez la propriété Text du Label sur "Bienvenue!".
La liste suivante affiche toutes les balises de la page MasterPage.master :
＜%@ Langage maître="C#" AutoEventWireup="true"
CodeFile="MasterPage.master.cs" Inherits="MasterPage" %＞
＜html xmlns="http://www.w3.org/1999/xhtml" ＞
＜head runat="serveur"＞
＜titre＞Page sans titre＜/titre＞
＜/tête＞
<corps>
＜form id="form1" runat="serveur"＞
<div>
＜asp:Label ID="Label1" runat="server" Font-Size="XX-Large" ForeColor="Blue" Text="Bienvenue !"＞＜/asp:Label＞＜br /＞
<asp:SiteMapPath ID="SiteMapPath1" runat="serveur"
Font-Names="Verdana" Font-Size="0.8em" PathSeparator=" : "＞
＜PathSeparatorStyle Font-Bold="True" ForeColor="#5D7B9D" /＞
＜CurrentNodeStyle ForeColor="#333333" /＞
＜NodeStyle Font-Bold="True" ForeColor="#7C6F57" /＞
＜RootNodeStyle Font-Bold="True" ForeColor="#5D7B9D" /＞
＜/asp:SiteMapPath＞
＜br /＞
＜br /＞
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
＜/asp:contentplaceholder＞
＜/div＞
＜/formulaire＞
＜/corps＞
＜/html＞ |
Maintenant, ouvrez Default.aspx à partir du dossier racine. Default.aspx devrait ressembler à la figure 4.
 Figure 4 : Exemple d'exécution de Default.aspx |
Pour concevoir cette page, ajoutez un tableau avec 4 lignes et 1 colonne. Faites glisser un contrôle Label vers la ligne supérieure et définissez sa propriété Text sur "Bienvenue sur notre site Web !". Ensuite, faites glisser les trois contrôles HyperLink sur les lignes restantes et définissez leurs propriétés Text et NavigateUrl, comme indiqué dans le tableau 3.
| Propriété de texte | ID HyperLink | Propriété NavigateUrl |
| Produits | HyperLink1 | ~/products/default.aspx |
| Services | HyperLink2 | ~/Services/default.aspx |
| HyperLink3 | Contactez-nous | ~/contact.aspxTableau |
3 : Définition des propriétés des hyperliens
La liste suivante montre le balisage complet dans Default.aspx :
＜%@ Langage de la page="C#" MasterPageFile="~/MasterPage.master"
AutoEventWireup="true" CodeFile="Default.aspx.cs"
Héritage="_Default" Title="Page sans titre" %＞
<asp:Content ID="Content1"
ContentPlaceHolderID="ContentPlaceHolder1" Runat="Serveur">
＜centre＞
<tableau>
＜tr＞
＜td largeur="60%"＞
<asp:Label ID="Label1" runat="server" Font-Size="X-Large"
Text="Bienvenue sur notre site Web!"＞＜/asp:Label＞＜/td＞
＜/tr＞
＜tr＞
＜td largeur="60%"＞
<asp:HyperLink ID="HyperLink1" runat="serveur"
Font-Size="X-Large" NavigateUrl="~/Products/Default.aspx">Produits
＜/asp:HyperLien＞＜/td＞
＜/tr＞
＜tr＞
＜td largeur="60%"＞
<asp:HyperLink ID="HyperLink2" runat="server" Font-Size="X-Large"
NavigateUrl="~/Services/Default.aspx">Services
＜/asp:HyperLien＞＜/td＞
＜/tr＞
＜tr＞
＜td largeur="60%"＞
<asp:HyperLink ID="HyperLink3" runat="serveur"
Font-Size="X-Large" NavigateUrl="~/Contact.aspx">Contactez-nous
＜/asp:HyperLien＞＜/td＞
＜/tr＞
＜/tableau＞
＜/centre＞
＜/asp:Contenu＞ |
Maintenant, ouvrez Default.aspx à partir du dossier Products et concevez-le comme indiqué dans la figure 5.
 Figure 5 : Page par défaut du dossier Produits |
Le tableau 4 répertorie tous les hyperliens utilisés dans les formulaires Web.
| Propriété de texte | ID HyperLink | Propriété NavigateUrl |
| HyperLink1 | Premier produit | ~/products/product1.aspx |
| HyperLink2 | Deuxième produit | ~/products/product2.aspx |
Tableau 4 : Informations sur les hyperliens dans la page Par défaut sous le dossier Produits
En suivant le même principe, concevez Default.aspx à partir du dossier Services et le résultat est présenté dans la figure 6.
 Figure 6. Page par défaut du dossier Services |
Le tableau 5 répertorie les informations sur les hyperliens utilisées dans les formulaires Web.
| Propriété de texte | ID HyperLink | Propriété NavigateUrl |
| HyperLink1 | First Service | ~/Services/service1.aspx |
| HyperLink2 | Second Service | ~/Services/service2.aspx |
Tableau 5 : Informations sur les hyperliens dans la page Par défaut sous le dossier Produits
Enfin, ajoutez une balise à chaque formulaire Web et définissez sa propriété Text comme indiqué dans le tableau 6.
| Attribut texte du | nom du formulaire Web | Étiquette
| ~/Contact.aspx | Contactez-nous |
| ~/Products/Product1.aspx | Premiers détails du produit |
| ~/Products/Product2.aspx | Deuxième détails du produit |
| ~/Services/Service1.aspx | Premiers détails du service |
| ~/Services/Service2. aspx | Deuxième formulaire de détails du service |
6 : définition de la propriété Texte de l'étiquette à partir du formulaire Web restant
Maintenant, exécutez Default.aspx à partir du dossier racine et accédez à la page Product1.aspx. La figure 7 montre un exemple d'exécution du formulaire Web.
 Figure 7 : Exemple d’exécution de Product1.aspx |
Remarquez comment les attributs de titre et d'URL du fichier web.sitemap sont utilisés pour générer un « fil d'Ariane ». Notez également comment le parent est affiché avec le titre de la page actuelle. Essayez de naviguer vers différentes pages et d'observer le contrôle SiteMapPath.
4. Utilisez le contrôle de source de données SiteMap
L'utilisation de plans de site n'est pas limitée au contrôle SiteMapPath. Vous pouvez également joindre un plan du site à un contrôle navigable (tel qu'un TreeView). Dans l'exemple suivant, vous utiliserez le même fichier de plan de site pour implémenter la liaison à un contrôle TreeView.
Ajoutez un nouveau formulaire Web SiteMapDataSourceDemo.aspx au site Web. Ensuite, faites glisser un contrôle de source de données SiteMap (SiteMapDataSource1) et un contrôle TreeView (TreeView1) sur le formulaire. Définissez la propriété DataSourceID de ce contrôle TreeView sur SiteMapDataSource1. De plus, définissez la propriété ShowLines du contrôle TreeView sur true. Voici le balisage complet de la page SiteMapDataSourceDemo.aspx :
＜%@ Langage de la page="C#" AutoEventWireup="true"
CodeFile="SiteMapDataSourceDemo.aspx.cs"
Héritage="SiteMapDataSourceDemo" %＞
＜html xmlns="http://www.w3.org/1999/xhtml" ＞
＜head runat="serveur"＞
＜titre＞Page sans titre＜/titre＞
＜/tête＞
<corps>
＜form id="form1" runat="serveur"＞
<asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1"
ShowLines="Vrai"＞
＜/asp:TreeView＞
＜asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" /＞
＜/formulaire＞
＜/corps＞
＜/html＞ |
Maintenant, exécutez le formulaire Web pour voir comment la même structure de navigation est automatiquement générée dans TreeView (voir Figure 8).
 Figure 8 : Liaison du fichier de plan du site à un contrôle TreeView |
5. Utilisez la classe SiteMap
L'affichage des données du plan du site dans un contrôle SiteMapPath ou TreeView fonctionne très bien. Cependant, vous devrez parfois concevoir une logique de génération personnalisée. Par exemple, vous souhaiterez peut-être développer un contrôle de navigation personnalisé qui affiche son parent uniquement verticalement. Dans ce cas, vous devez accéder au fichier de plan du site par programme. La classe SiteMap vous permet de réaliser exactement cela.
Ce chemin SiteMap possède deux propriétés importantes : RootNode et CurrentNode. Leurs types sont tous SiteMapNode, et ils vous permettent tous deux de faire référence respectivement au nœud racine et au nœud actuel du plan du site. Le tableau 7 répertorie certaines propriétés importantes de la classe SiteMapNode.
| Description | de la propriété |
| ChildNodes | représente la collection de tous les nœuds enfants du nœud actuel. |
| HasChildNodes | indique si le nœud du plan du site a des nœuds enfants (vrai/faux). |
| Title | renvoie la valeur de l'attribut title spécifié dans le fichier de plan du site. |
| L'URL | renvoie dans le fichier de plan du site. La valeur de l'attribut url spécifié |
| Description | renvoie la valeur de l'attribut description spécifié dans le fichier de plan du site |
| ParentNode | indique la référence du nœud de plan de site parent du nœud actuel |
Tableau 7 : Quelques attributs importants de la classe SiteMapNode
L'exemple suivant utilise un chemin SiteMap pour accéder à un seul nœud d'un fichier de plan de site. Ensuite, ajoutez-les par programme à un contrôle TreeView.
Ajoutez un formulaire Web appelé SiteMapCustom.aspx. Ensuite, faites glisser un contrôle TreeView dessus. Ajoutez le code de liste à l'événement Page_Load de ce formulaire Web :
protected void Page_Load (expéditeur de l'objet, EventArgs e)
{
int count = SiteMap.RootNode.ChildNodes.Count;
pour (int i = 0; i < nombre; i++)
{
SiteMapNode smNode=SiteMap.RootNode.ChildNodes[i];
TreeNode tvNode = new TreeNode(smNode.Title, "", "", smNode.Url, "");
TreeView1.Nodes.Add(tvNode);
si (smNode.HasChildNodes)
{
int childCount=smNode.ChildNodes.Count;
pour (int j = 0; j < childCount; j++)
{
SiteMapNode smChildNode = smNode.ChildNodes[j];
TreeNode tvChildNode = nouveau TreeNode(smChildNode.Title,
"", "",
smChildNode.Url, "");
tvNode.ChildNodes.Add(tvChildNode);
}
}
}
} |
Ici, vous obtenez d’abord le nombre total de nœuds enfants dans le nœud racine. Ensuite, vous parcourez la collection ChildNodes du nœud racine. A chaque itération, vous créez une nouvelle instance de la classe TreeNode et spécifiez son titre et son URL dans son constructeur. Ensuite, vous ajoutez ce TreeNode à la collection Nodes de TreeView. Ensuite, vous vérifiez si le SiteMapNode actuel a des nœuds enfants. Si tel est le cas, vous le parcourez et répétez le processus de création de TreeNode. Notez que cette fois, vous ajoutez les nouveaux TreeNodes à la collection ChildNodes de l'objet TreeNode actuel.
Notez que vous utilisez 2 dans la boucle car vous savez qu'il n'y a que deux niveaux d'imbrication. Pour rendre votre logique plus générale, vous pouvez utiliser la récursivité pour remplir le TreeView.
Exécutez le formulaire Web et vous verrez à nouveau quelque chose de similaire à la figure 8.
6. Utilisez la maintenance de sécurité
Souvent, les sites Web mettent en œuvre un modèle de sécurité basé sur les rôles. Par exemple, vous pouvez avoir différents rôles dans votre application, tels qu'administrateur système, testeur de produits et testeur de services. Dans des situations comme celle-ci, vous devez souvent contrôler les liens de navigation du site qui sont affichés aux utilisateurs. Par exemple, si l'utilisateur actuellement connecté a le rôle de testeur de produit, vous souhaiterez peut-être afficher uniquement les liens liés au produit et masquer tous les autres liens. Une façon de gérer les rôles consiste à utiliser le codage manuel, mais cela nécessite la mise en œuvre de toute la logique d'autorisation par programme. Heureusement, les fichiers de plan de site et le contrôle de source de données SiteMap fournissent ensemble une fonctionnalité appelée ajustement de sécurité pour vous aider.
Afin de tester la refonte de la sécurité, vous devez activer les fonctionnalités d'adhésion et de rôle de votre site. Ouvrez le fichier web.config et ajoutez les balises suivantes :
＜mode d'authentification="Formulaires" /＞
＜autorisation＞
＜deny utilisateurs="?"＞＜/deny＞
＜/autorisation＞ |
Ici, vous avez défini le mode d'authentification sur Forms. Vous pouvez également définir des règles d'autorisation afin que les utilisateurs anonymes ne puissent pas accéder au site. Ensuite, vous devez activer la fonctionnalité de gestion des rôles - en ajoutant les indicateurs suivants au fichier web.config :
| ＜roleManager activé="true" /＞ |
Ensuite, sélectionnez "Site Web> Configuration ASP.NET" dans le menu VS.NET pour ouvrir l'outil de gestion de site Web. Utilisez cet outil pour ajouter deux rôles : ProductTesters et ServiceTesters (voir Figure 9). Lorsqu'un utilisateur appartenant au rôle ProductTesters se connecte, vous souhaitez uniquement afficher les liens liés au produit dans le contrôle TreeView de navigation. De même, lorsqu'un utilisateur appartenant au rôle ServiceTesters s'enregistre, seuls les liens liés au service doivent être affichés dans l'arborescence.
 Figure 9 : Ajout de rôles à l'aide des outils de gestion de site Web |
Utilisez l'outil de gestion de site Web pour créer deux utilisateurs, nommés user1 et user2. Ajoutez user1 au rôle ProductTesters et user2 au rôle ServiceTesters (voir Figure 10).
 Figure 10 : Création d'utilisateurs à l'aide des outils de gestion de sites Web |
Remarque : Par défaut, les informations sur les utilisateurs et les rôles sont stockées dans la base de données ASPNETDB sous le dossier App_Data de votre site Web. Cette base de données est automatiquement créée par ASP.NET si elle n'existe pas.
Maintenant, ajoutez un nouveau fichier de plan de site SecurityTrimming.sitemap au site Web et entrez les balises suivantes :
＜?xml version="1.0" encodage="utf-8" ?＞
＜siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" ＞
＜siteMapNode url="default.aspx" title="Accueil" description="Mon site Web"＞
＜siteMapNode title="Produits" rôles="ProductTesters"＞
＜siteMapNode url="~/products/product1.aspx" title="Premier produit" /＞
＜siteMapNode url="~/products/product2.aspx" title="Deuxième produit" /＞
＜/siteMapNode＞
＜siteMapNode title="Services" rôles="ServiceTesters"＞
＜siteMapNode url="~/services/service1.aspx" title="Premier service" /＞
＜siteMapNode url="~/services/service2.aspx" title="Deuxième service" /＞
＜/siteMapNode＞
＜siteMapNode url="contact.aspx" title="Contactez-nous" /＞
＜/siteMapNode＞
＜/plan du site＞ |
La plupart du balisage ici est le même que dans le fichier web.sitemap. Cependant, un attribut important est ajouté aux produits et services : siteMapNodes:roles. L'attribut rôles spécifie les rôles qui peuvent accéder à ce nœud et à ses nœuds enfants. Étant donné que les liens associés aux produits ne sont affichés qu'aux utilisateurs appartenant au rôle ProductTesters, vous définirez l'attribut de rôles du siteMapNode Produits sur ProductTesters. En suivant la même logique, vous définiriez l'attribut de rôles de Services siteMapNode sur ServiceTesters. Les SiteMapNodes sans l'attribut de rôles spécifié sont accessibles à tous les utilisateurs. Notez également que les nœuds Produits et Services n'ont plus d'attributs d'URL spécifiés.
Vous devez maintenant configurer le fournisseur de plan de site et activer la rénovation de la sécurité afin que le contrôle de source de données SiteMap puisse se comporter selon vos besoins. Ajoutez les balises suivantes au fichier web.config :
<siteMap defaultProvider="myprovider" activé="true">
＜prestataires＞
＜ajouter un nom="monfournisseur"
type="System.Web.XmlSiteMapProvider"
siteMapFile="SecurityTrimming.sitemap"
securityTrimmingEnabled="true" />
＜/prestataires＞ |
Ici, vous ajoutez la section <siteMap> et spécifiez un fournisseur qui pointe vers le fichier SecurityTrimming.sitemap. Notez que l'attribut securityTrimmingEnabled ici est défini sur true pour prendre en charge le découpage de sécurité. Après avoir configuré la section <siteMap>, le contrôle de source de données SiteMap « récupère » automatiquement ces paramètres de cette section.
Ajoutez un nouveau formulaire Web appelé Login.aspx au site Web. Ensuite, faites glisser un contrôle de connexion dessus et définissez sa propriété DestinationPageUrl sur « ~/SiteMapDataSourceDemo.aspx ». Notez que vous avez déjà développé SiteMapDataSourceDemo.aspx.
Exécutez Login.aspx (voir Figure 11) et entrez les informations d'identification de l'utilisateur 1.
 Figure 11 : Page de connexion |
Une fois connecté avec succès, vous devriez voir le TreeView illustré à la figure 12. Étant donné que user1 appartient au rôle ProductTesters, le lien vers le service est masqué.
 Figure 12 : Utiliser la remise à neuf de sécurité |
7. Résumé
Un plan de site est un fichier XML : il contient tous les détails de la structure de votre site Web. Vous pouvez utiliser des fichiers de plan de site pour générer des structures de navigation. Il existe trois manières courantes d'utiliser les fichiers de plan de site : utiliser le contrôle SiteMapPath, utiliser le contrôle de source de données SiteMap ou utiliser la classe SiteMap. Vous pouvez également utiliser une fonctionnalité appelée ajustement de la sécurité pour prendre en charge la sécurité basée sur les rôles pour les liens de navigation générés. Ensemble, ces contrôles et classes contribuent à créer une structure de navigation professionnelle pour votre site Web.
