1. Introduction
Tout site Web composé de plusieurs pages nécessite une sorte d'interface utilisateur de navigation, créée en deux étapes. Tout d'abord, la structure logique du site doit être définie ; ensuite, des éléments d'interface utilisateur sont ajoutés pour permettre aux utilisateurs de se déplacer entre les différentes parties de la structure du site. Avant ASP.NET 2.0, les développeurs devaient résoudre eux-mêmes ces deux problèmes. Cependant, depuis la version 2.0, ASP.NET fournit un moyen simple de définir la structure d'un site et inclut un certain nombre de contrôles Web, spécialement conçus pour afficher l'interface utilisateur de navigation du site.
Dans l'article précédent, nous avons analysé comment créer un fichier de plan de site XML Web.sitemap via les contrôles Web de navigation et comment afficher les informations de navigation du site, qui incluent :
· SiteMapPath, qui affiche un fil d'Ariane (Accueil > Électronique > XBOX)
· TreeView, qui Affiche une arborescence pliable affichée verticalement, utilisée pour afficher l'intégralité de la hiérarchie du plan du site
. Menu, qui affiche un menu aligné horizontalement ou verticalement.
L'article précédent fournissait uniquement une fonction et une capacité pour le fichier de plan du site et le contrôle Web de navigation. . Dans cette section, nous porterons notre attention sur le contrôle par programme des informations sur le plan du site et examinerons en détail le contrôle Web de navigation SiteMapPath.
2. Plan du site
Les exemples de cet article utilisent le plan du site créé dans la première partie. Vous pouvez voir la syntaxe exacte du fichier XML du plan du site dans la partie 1 ou le télécharger à la fin de cet article. Une représentation graphique de la structure du site utilisée dans ces exemples est présentée ci-dessous :
3. Plan de site contrôlé par programme
Un plan de site est une collection de nœuds de plan de site associés. En règle générale, chaque nœud de plan de site contient un titre, une URL et une description. L'image ci-dessus est un exemple de plan de site, où chaque rectangle représente un nœud de plan de site. ASP.NET ne nécessite pas de format spécifique pour spécifier les plans de site, bien qu'il fournisse l'option par défaut d'utiliser un fichier au format XML. (Voir la partie 1 pour plus de détails sur les fichiers XML.)
ASP.NET fournit une classe appelée SiteMap - qui fournit un accès programmatique en lecture seule au plan du site. Cette classe est utilisée en interne par deux contrôles, que nous analyserons plus loin dans cet article :
SiteMapPath - Génère un fil d'Ariane en fonction de l'emplacement de la page visitée et de la structure de son site. Plus précisément, SiteMapPath commence au nœud renvoyé par la propriété SiteMap.CurrentNode et remonte la hiérarchie jusqu'à la racine.
· SiteMapDataSource - Ce contrôle crée une source de données hiérarchique - il mappe la structure du plan du site. Afin d'afficher les informations du plan du site dans un autre contrôle Web, tel qu'un TreeView ou un Menu, le contrôle Web n'interroge pas directement le plan du site, mais se lie à un contrôle SiteMapDataSource - qui est responsable de la lecture de la structure du plan du site ;
La classe SiteMap possède deux propriétés : RootNode et CurrentNode. Les deux propriétés renvoient des instances SiteMapNode. La classe SiteMapNode représente un nœud défini dans le plan du site et possède des propriétés qui décrivent le nœud - Titre, Url et Description, ainsi que des propriétés qui contrôlent la hiérarchie par programme - ParentNode, ChildNodes, NextSibling, PreviousSibling, etc.
Vous pouvez utiliser la classe SiteMap dans vos propres pages ASP.NET. Par exemple, nous pouvons afficher les liens Suivant, Précédent et Haut sur chaque page - simplement en ajoutant trois contrôles HyperLink à la page principale du site, plus un peu de programmation pour vérifier si le CurrentNode a un NextSibling, PreviousSibling ou ParentNode. Plus précisément, vous ajouterez le balisage suivant à votre page principale :
[<asp:HyperLink ID="lnkPrev" runat="server">Prev</asp:HyperLink>] |
[<asp:HyperLink ID="lnkUp" runat="server">Up</asp:HyperLink>] |
[<asp:HyperLink ID="lnkNext" runat="server">Next</asp:HyperLink>]
Le gestionnaire d'événements Page_Load de la page principale se présente comme suit :
Si SiteMap.CurrentNode IsNot Nothing Alors
'Définir le lien suivant/précédent/suivantSi SiteMap.CurrentNode.PreviousSibling IsNot Nothing Then
lnkPrev.NavigateUrl = SiteMap.CurrentNode.PreviousSibling.Url
lnkPrev.Text = "< Précédent (" & SiteMap.CurrentNode.PreviousSibling.Title & ")"
Autre
lnkPrev.NavigateUrl = String.Empty
lnkPrev.Text = "< Précédent"
Fin si
Si SiteMap.CurrentNode.ParentNode n'est rien, alors
lnkUp.NavigateUrl = SiteMap.CurrentNode.ParentNode.Url
lnkUp.Text = "En haut (" & SiteMap.CurrentNode.ParentNode.Title & ")"
Autre
lnkUp.NavigateUrl = String.Empty
lnkUp.Text = "En haut"
Fin si
Si SiteMap.CurrentNode.NextSibling n'est pas rien, alors
lnkNext.NavigateUrl = SiteMap.CurrentNode.NextSibling.Url
lnkNext.Text = "(" & SiteMap.CurrentNode.NextSibling.Title & ") Suivant >"
Autre
lnkNext.NavigateUrl = String.Empty
lnkNext.Text = "Suivant >"
Fin si
Fin si
Cela ajoutera trois hyperliens Suivant, Haut et Précédent à chaque page qui hérite de la page principale, voir l'instantané ci-dessous.
4. Utilisez le contrôle SiteMapPath pour afficher le fil d'Ariane.
Le contrôle SiteMapPath affiche un fil d'Ariane : il est utilisé pour montrer aux utilisateurs où ils se trouvent dans la structure du site. La sortie du contrôle SiteMapPath est déterminée par les trois facteurs suivants :
· la structure du site, telle que définie par le plan du site,
· la page visitée et
· les valeurs des propriétés du contrôle SiteMapPath
lorsqu'une page est créée
. Lors de l'accès à un contrôle SiteMapPath, le contrôle SiteMapPath tente de convertir l'URL de la page en valeur URL d'un nœud de plan de site défini dans le plan du site. Si une correspondance est trouvée, le contrôle parcourra la structure jusqu'à la racine et produira le résultat suivant : RootNode>ParentNode>...>ParentNode>CurrentNode. Le CurrentNode est ici le titre du nœud du plan du site - il est utilisé pour mapper l'URL de la demande de page actuelle ; RootNode et ParentNodes sont générés sous forme d'hyperliens si le nœud du plan du site a une valeur d'URL définie dans le plan du site. Un contrôle SiteMapPath dans la page « Livres d'historique » (Books/History.aspx) générera Accueil>Livres>Historique, et générera également Accueil et Livres sous forme d'hyperliens, pointant respectivement vers Default.aspx et Books/Default.aspx. . Lors de l’accès à Books/Default.aspx, SiteMapPath génère Accueil>Books.
Pour être très clair, le résultat de SiteMapPath dépend à la fois du plan du site lui-même et de la page visitée. La sortie de SiteMapPath peut être personnalisée via les propriétés de ce contrôle. Il existe certaines propriétés dans le format de contrôle Web standard - BackColor, Font, ForeColor, etc. - et certains paramètres sont spécifiques à SiteMapPath, notamment :
u PathDirection - peut prendre l'une des deux valeurs suivantes, RootToCurrent (valeur par défaut) ou CurrentToRoot. Lorsque la valeur est RootToCurrent, le fil d'Ariane sur la page « Livres d'historique » est généré sous la forme Accueil > Livres > Historique ; lorsque la valeur est CurrentToRoot, la sortie sera Historique > Livres > Accueil.
·PathSeparator - spécifie la chaîne utilisée pour séparer chaque nœud dans le fil d'Ariane ; la valeur par défaut est >
·RenderCurrentNodeAsLink - un attribut booléen - il spécifie si le CurrentNode doit être généré en tant que lien ;
·ParentLevelsDisplayed - une valeur entière - elle peut être utilisée pour limiter la hauteur de la structure arborescente affichée par le fil d'Ariane. Par défaut, la valeur de cet attribut est -1, ce qui signifie qu'il n'y a pas de limite ; définir sa valeur sur 1 générera un fil d'Ariane Livres>Historique sur la page "Livres d'histoire". La racine n'est pas incluse car le contrôle SiteMapPath ne traverse qu'un seul parent - de « Historique » à « Livre ».
· ShowToolTips - Si un nœud de plan de site a une valeur de description, la description est affichée sous forme de texte d'info-bulle pour chaque nœud de fil d'Ariane si cette propriété est définie sur True (valeur par défaut).
Il existe également des propriétés de style qui peuvent être utilisées pour définir BackColor, Font, ForeColor, etc. - pour diverses parties du contrôle SiteMapPath. Vous pouvez utiliser la propriété NodeStyle pour personnaliser l'apparence des nœuds dans le fil d'Ariane ; vous pouvez utiliser RootNodeStyle et CurrentNodeStyle pour personnaliser davantage le premier et le dernier nœuds du fil d'Ariane. Généralement, le moyen le plus simple et le plus esthétique de formater le contrôle SiteMapPath consiste à utiliser son assistant « Format automatique » - cela peut être activé via la balise sensible du contrôle.
5. Personnalisez la sortie générée avec des modèles
Le SiteMapPath contient quatre modèles - ils permettent une personnalisation plus poussée de la sortie générée. Les modèles vous permettent de mélanger le balisage HTML statique, les contrôles Web et la syntaxe de liaison de données ; si vous avez déjà utilisé des contrôles DataList ou Repeater, vous êtes déjà familier avec les modèles. Les modèles dans ASP.NET 2.0 sont fondamentalement les mêmes que dans ASP.NET 1.x, sauf qu'ASP.NET 2.0 introduit une nouvelle syntaxe plus concise pour les expressions de liaison de données. Par exemple, dans ASP.NET 1.x, vous devez utiliser la syntaxe <%# DataBinder.Eval(Container.DataItem, PropertyName) %> pour obtenir la valeur d'une colonne. Dans ASP.NET 2.0, cette ancienne syntaxe peut toujours être utilisée, mais vous pouvez éventuellement utiliser la version plus courte <%# Eval(PropertyName) %>.
Par défaut, SiteMapPath génère les nœuds racine et parent sous forme d'hyperliens réguliers afin que lorsque les utilisateurs cliquent sur le lien, ils puissent rapidement remonter dans l'arborescence de la hiérarchie de contrôle. Cependant, vous souhaiterez peut-être effectuer un traitement côté serveur avant de renvoyer les informations à l'utilisateur - vous souhaiterez peut-être enregistrer où va l'utilisateur ou enregistrer automatiquement toutes les modifications qu'il apporte à la page. Cela peut être accompli en utilisant un modèle et en générant le nœud en tant que LinkButton.
Par exemple, si vous souhaitez uniquement générer le nœud racine de SiteMapPath en tant que LinkButton, vous pouvez utiliser la balise suivante pour ajouter un <RootNodeTemplate> au contrôle SiteMapPath :
<asp:SiteMapPath ID="SiteMapPath1" runat="server" ＞
＜Modèle de nœud racine＞
<asp:LinkButton ID="LinkButton1" runat="serveur"
Texte='＜%# Eval("titre") %＞'
CommandArgument='＜%# Eval("url") %＞'
OnCommand="LinkButton1_Command">
＜/asp:LinkButton＞
＜/RootNodeTemplate＞
</asp:SiteMapPath>
Cette balise ajoute un contrôle LinkButton au SiteMapPath - sa propriété Text est affectée à la propriété Title du SiteMapNode correspondant. Lorsque l’utilisateur clique sur LinkButton, une publication est provoquée et l’événement Command du contrôle se déclenche – cela active le gestionnaire d’événements LinkButton1_Command. La propriété Url du SiteMapNode est transmise à ce gestionnaire d'événements via la propriété CommandArgument. Dans ce gestionnaire d'événements, vous pouvez effectuer tout traitement côté serveur requis, puis diriger l'utilisateur vers la page qu'il a demandée via Response.Redirect(e.CommandArgument).
