Partager via

Spécification du titre, des balises META et d’autres en-têtes HTML dans la page maître (VB)

par Scott Mitchell

Télécharger le PDF

Examine différentes techniques pour définir des éléments de tête> assortis <dans la page maître à partir de la page de contenu.

Introduction

Les nouvelles master pages créées dans Visual Studio 2008 ont, par défaut, deux contrôles ContentPlaceHolder : l’un nommé headet situé dans l’élément <head> ; et l’autre nommé ContentPlaceHolder1, placés dans le formulaire web. L’objectif de est de ContentPlaceHolder1 définir une région dans le formulaire web qui peut être personnalisée page par page. ContentPlaceHolder head permet aux pages d’ajouter du contenu personnalisé à la <head> section. (Bien sûr, ces deux ContentPlaceHolders peuvent être modifiés ou supprimés, et d’autres ContentPlaceHolder peuvent être ajoutés à la page master. Notre page master, Site.master, comporte actuellement quatre contrôles ContentPlaceHolder.)

L’élément HTML <head> sert de référentiel pour les informations sur le document de page web qui ne fait pas partie du document lui-même. Cela inclut des informations telles que le titre de la page web, les méta-informations utilisées par les moteurs de recherche ou les analyseurs internes, ainsi que des liens vers des ressources externes, telles que des flux RSS, des fichiers JavaScript et CSS. Certaines de ces informations peuvent être pertinentes pour toutes les pages du site web. Par exemple, vous pouvez importer globalement les mêmes règles CSS et fichiers JavaScript pour chaque page ASP.NET. Toutefois, certaines parties de l’élément <head> sont spécifiques à la page. Le titre de la page en est un excellent exemple.

Dans ce tutoriel, nous examinons comment définir le balisage de section global et spécifique <head> à la page dans la page master et dans ses pages de contenu.

Examen de la section de la<head>page maître

Le fichier de page de master par défaut créé par Visual Studio 2008 contient le balisage suivant dans sa <head> section :

<head runat="server">
 <title>Untitled Page</title>
 <asp:ContentPlaceHolder id="head" runat="server">
 </asp:ContentPlaceHolder>
</head>

Notez que l’élément <head> contient un runat="server" attribut, ce qui indique qu’il s’agit d’un contrôle serveur (plutôt que d’un code HTML statique). Toutes les pages ASP.NET dérivent de la Page classe, qui se trouve dans l’espace de System.Web.UI noms. Cette classe contient une Header propriété qui fournit l’accès à la région de la <head> page. À l’aide de la Header propriété, nous pouvons définir le titre d’une page ASP.NET ou ajouter du balisage supplémentaire à la section rendue <head> . Il est alors possible de personnaliser l’élément d’une page de <head> contenu en écrivant un peu de code dans le gestionnaire d’événements de la Page_Load page. Nous examinons comment définir par programmation le titre de la page à l’étape 1.

Le balisage indiqué dans l’élément <head> ci-dessus inclut également un contrôle ContentPlaceHolder nommé head. Ce contrôle ContentPlaceHolder n’est pas nécessaire, car les pages de contenu peuvent ajouter du contenu personnalisé à l’élément <head> par programmation. Toutefois, il est utile dans les situations où une page de contenu doit ajouter un balisage statique à l’élément <head> , car le balisage statique peut être ajouté de manière déclarative au contrôle contenu correspondant plutôt que par programmation.

En plus de l’élément <title> et head de ContentPlaceHolder, l’élément de <head> la page master doit contenir tout <head>balisage de niveau commun à toutes les pages. Dans notre site web, toutes les pages utilisent les règles CSS définies dans le Styles.css fichier. Par conséquent, nous avons mis à jour l’élément <head> dans le didacticiel Création d’une disposition Site-Wide avec les pages maîtres pour inclure un élément correspondant <link> . Le balisage actuel <head> de notre Site.master page de master est illustré ci-dessous.

<head runat="server">
 <title>Untitled Page</title>
 <asp:ContentPlaceHolder id="head" runat="server">
 </asp:ContentPlaceHolder>
 <link href="Styles.css" rel="stylesheet" type="text/css" />
</head>

Étape 1 : Définition du titre d’une page de contenu

Le titre de la page web est spécifié via l’élément <title> . Il est important de définir le titre de chaque page sur une valeur appropriée. Lors de la visite d’une page, son titre s’affiche dans la barre de titre du navigateur. En outre, lors de la création d’un signet d’une page, les navigateurs utilisent le titre de la page comme nom suggéré pour le signet. En outre, de nombreux moteurs de recherche affichent le titre de la page lors de l’affichage des résultats de recherche.

Notes

Par défaut, Visual Studio définit l’élément <title> dans la page master sur « Page sans titre ». De même, les nouvelles pages ASP.NET ont également la <title> valeur « Page sans titre ». Comme il peut être facile d’oublier de définir le titre de la page sur une valeur appropriée, il existe de nombreuses pages sur Internet avec le titre « Page sans titre ». La recherche de pages web avec ce titre dans Google renvoie environ 2 460 000 résultats. Même Microsoft est susceptible de publier des pages web avec le titre « Page sans titre ». Au moment de la rédaction du présent article, une recherche Google a signalé 236 pages web de ce type dans le domaine Microsoft.com.

Une page ASP.NET peut spécifier son titre de l’une des manières suivantes :

  • En plaçant la valeur directement dans l’élément <title>
  • Utilisation de l’attribut Title dans la <%@ Page %> directive
  • Définition programmatique de la propriété de la page à l’aide d’un Title code tel que Page.Title="title" ou Page.Header.Title="title".

Les pages de contenu n’ont pas d’élément<title>, tel qu’il est défini dans la page master. Par conséquent, pour définir le titre d’une page de contenu, vous pouvez utiliser l’attribut de Title la <%@ Page %> directive ou le définir par programmation.

Définition du titre de la page de manière déclarative

Le titre d’une page de contenu peut être défini de manière déclarative via l’attribut Title de la <%@ Page %> directive. Cette propriété peut être définie en modifiant directement la <%@ Page %> directive ou via le Fenêtre Propriétés. Examinons ces deux approches.

Dans la vue Source, recherchez la <%@ Page %> directive, qui se trouve en haut du balisage déclaratif de la page. La <%@ Page %> directive pour Default.aspx est la suivante :

<%@ Page Language="VB" MasterPageFile="~/Site.master" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" Title="Untitled Page" %>

La <%@ Page %> directive spécifie les attributs spécifiques à la page utilisés par le moteur ASP.NET lors de l’analyse et de la compilation de la page. Cela inclut son master fichier de page, l’emplacement de son fichier de code et son titre, entre autres informations.

Par défaut, lors de la création d’une page de contenu, Visual Studio définit l’attribut Title sur « Page sans titre ». Remplacez Default.aspxl’attribut de Title « Page sans titre » par « Tutoriels de page maître », puis affichez la page via un navigateur. La figure 1 montre la barre de titre du navigateur, qui reflète le nouveau titre de page.

La barre de titre du navigateur affiche désormais « Tutoriels de page maître » au lieu de « Page sans titre »

Figure 01 : La barre de titre du navigateur affiche désormais « Tutoriels de page maître » au lieu de « Page sans titre »

Le titre de la page peut également être défini à partir du Fenêtre Propriétés. Dans le Fenêtre Propriétés, sélectionnez DOCUMENT dans la liste déroulante pour charger les propriétés au niveau de la page, qui incluent la Title propriété. La figure 2 montre le Fenêtre Propriétés après Title a été défini sur « Tutoriels de page maître ».

Vous pouvez également configurer le titre à partir de la fenêtre Propriétés.

Figure 02 : Vous pouvez configurer le titre à partir de la fenêtre Propriétés, trop

Définition du titre de la page par programmation

Le balisage de <head runat="server"> la page master est traduit en un HtmlHead instance de classe lorsque la page est rendue par le moteur ASP.NET. La HtmlHead classe a une Title propriété dont la valeur est reflétée dans l’élément rendu <title> . Cette propriété est accessible à partir de la classe code-behind d’une page ASP.NET via Page.Header.Title; cette même propriété est également accessible via Page.Title.

Pour vous entraîner à définir le titre de la page par programmation, accédez à la classe code-behind de la About.aspx page et créez un gestionnaire d’événements pour l’événement de Load la page. Ensuite, définissez le titre de la page sur « Tutoriels de page maître :: À propos de :: date », où date est la date actuelle. Après avoir ajouté ce code, votre Page_Load gestionnaire d’événements doit ressembler à ce qui suit :

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
 Page.Title = String.Format("Master Page Tutorials :: About :: {0:d}", DateTime.Now)
End Sub

La figure 3 montre la barre de titre du navigateur lors de la visite de la About.aspx page.

Le titre de la page est défini par programmation et inclut la date actuelle

Figure 03 : Le titre de la page est défini par programmation et inclut la date actuelle

Étape 2 : Attribution automatique d’un titre de page

Comme nous l’avons vu à l’étape 1, le titre d’une page peut être défini de manière déclarative ou programmatique. Si vous oubliez de modifier explicitement le titre en quelque chose de plus descriptif, toutefois, votre page aura le titre par défaut, « Page sans titre ». Dans l’idéal, le titre de la page est défini automatiquement pour nous dans le cas où nous ne spécifions pas explicitement sa valeur. Par exemple, si, au moment de l’exécution, le titre de la page est « Page sans titre », nous pourrions souhaiter que le titre soit automatiquement mis à jour pour qu’il soit identique au nom de fichier de la page ASP.NET. La bonne nouvelle est qu’avec un peu de travail initial, il est possible d’avoir le titre automatiquement attribué.

Toutes les pages web ASP.NET dérivent de la Page classe dans l’espace de noms System.Web.UI. La Page classe définit les fonctionnalités minimales nécessaires à une page ASP.NET et expose des propriétés essentielles telles que IsPostBack, IsValid, Requestet Response, parmi bien d’autres. Souvent, chaque page d’une application web nécessite des fonctionnalités supplémentaires. Une façon courante de fournir cela consiste à créer une classe de page de base personnalisée. Une classe de page de base personnalisée est une classe que vous créez qui dérive de la Page classe et inclut des fonctionnalités supplémentaires. Une fois cette classe de base créée, vous pouvez faire dériver vos pages ASP.NET (plutôt que la Page classe), offrant ainsi les fonctionnalités étendues à vos pages ASP.NET.

Dans cette étape, nous créons une page de base qui définit automatiquement le titre de la page sur le nom de fichier de la page ASP.NET si le titre n’a pas été défini explicitement. L’étape 3 examine la définition du titre de la page en fonction du plan de site.

Notes

Un examen approfondi de la création et de l’utilisation de classes de page de base personnalisées dépasse la portée de cette série de tutoriels.

Création de la classe de page de base

Notre première tâche consiste à créer une classe de page de base, qui est une classe qui étend la Page classe. Commencez par ajouter un App_Code dossier à votre projet en cliquant avec le bouton droit sur le nom du projet dans le Explorateur de solutions, en choisissant Ajouter ASP.NET dossier, puis en sélectionnant App_Code. Ensuite, cliquez avec le bouton droit sur le App_Code dossier et ajoutez une nouvelle classe nommée BasePage.vb. La figure 4 montre les Explorateur de solutions après l’ajout du dossier et BasePage.vb de la App_Code classe.

Ajouter un dossier App_Code et une classe nommée BasePage

Figure 04 : Ajouter un App_Code dossier et une classe nommée BasePage

Notes

Visual Studio prend en charge deux modes de gestion de projet : les projets de site web et les projets d’application web. Le App_Code dossier est conçu pour être utilisé avec le modèle projet de site web. Si vous utilisez le modèle projet d’application web, placez la BasePage.vb classe dans un dossier nommé autre chose que App_Code, par exemple Classes. Pour plus d’informations sur cette rubrique, consultez Migration d’un projet de site web vers un projet d’application web.

Étant donné que la page de base personnalisée sert de classe de base pour les classes code-behind de ASP.NET pages, elle doit étendre la Page classe.

Public Class BasePage
 Inherits System.Web.UI.Page

End Class

Chaque fois qu’une page ASP.NET est demandée, elle passe par une série d’étapes, aboutissant au rendu de la page demandée en HTML. Nous pouvons exploiter une étape en remplaçant la méthode de OnEvent la Page classe. Pour notre page de base, nous allons automatiquement définir le titre s’il n’a pas été spécifié explicitement par la LoadComplete phase (qui, comme vous l’avez peut-être deviné, se produit après la Load phase).

Pour ce faire, remplacez la OnLoadComplete méthode et entrez le code suivant :

Protected Overrides Sub OnLoadComplete(ByVal e As EventArgs)
 ' Set the page's title, if necessary
 If String.IsNullOrEmpty(Page.Title) OrElse Page.Title = "Untitled Page" Then
 ' Determine the filename for this page
 Dim fileName As String = System.IO.Path.GetFileNameWithoutExtension(Request.PhysicalPath)

 Page.Title = fileName
 End If

 MyBase.OnLoadComplete(e)
End Sub

La OnLoadComplete méthode commence par déterminer si la Title propriété n’a pas encore été définie explicitement. Si la Title propriété est Nothing, une chaîne vide ou a la valeur « Page sans titre », elle est affectée au nom de fichier de la page ASP.NET demandée. Le chemin d’accès physique à la page de ASP.NET demandée ( C:\MySites\Tutorial03\Login.aspx, par exemple) est accessible via la Request.PhysicalPath propriété . La Path.GetFileNameWithoutExtension méthode est utilisée pour extraire uniquement la partie nom de fichier, et ce nom de fichier est ensuite affecté à la Page.Title propriété .

Notes

Je vous invite à améliorer cette logique pour améliorer le format du titre. Par exemple, si le nom de fichier de la page est Company-Products.aspx, le code ci-dessus génère le titre « Produits de l’entreprise », mais dans l’idéal, le tiret est remplacé par un espace, comme dans « Produits de l’entreprise ». Envisagez également d’ajouter un espace chaque fois qu’il y a un changement de cas. Autrement dit, envisagez d’ajouter du code qui transforme le nom du fichier OurBusinessHours.aspx en un titre « Nos heures d’ouverture ».

Les pages de contenu héritent de la classe de page de base

Nous devons maintenant mettre à jour les pages ASP.NET de notre site pour dériver de la page de base personnalisée (BasePage) au lieu de la Page classe. Pour ce faire, accédez à chaque classe code-behind et modifiez la déclaration de classe à partir de :

Partial Class About
 Inherits System.Web.UI.Page
   ...
End Class

Par :

Partial Class About
 Inherits BasePage
   ...
End Class

Après cela, visitez le site via un navigateur. Si vous visitez une page dont le titre est explicitement défini, tel que Default.aspx ou About.aspx, le titre spécifié explicitement est utilisé. Si, toutefois, vous visitez une page dont le titre n’a pas été modifié par défaut (« Page sans titre »), la classe de page de base définit le titre sur le nom de fichier de la page.

La figure 5 montre la page lorsqu’elle MultipleContentPlaceHolders.aspx est consultée via un navigateur. Notez que le titre est précisément le nom de fichier de la page (moins l’extension), « MultipleContentPlaceHolders ».

Si un titre n’est pas spécifié explicitement, le nom de fichier de la page est automatiquement utilisé

Figure 05 : Si un titre n’est pas spécifié explicitement, le nom de fichier de la page est automatiquement utilisé (cliquer pour afficher l’image en taille réelle)

Étape 3 : Base du titre de la page sur le plan du site

ASP.NET offre une infrastructure de plan de site robuste qui permet aux développeurs de pages de définir une carte de site hiérarchique dans une ressource externe (comme un fichier XML ou une table de base de données) ainsi que des contrôles Web permettant d’afficher des informations sur le plan de site (tels que les contrôles SiteMapPath, Menu et TreeView).

La structure de plan de site est également accessible par programmation à partir de la classe code-behind d’une page de ASP.NET. De cette façon, nous pouvons définir automatiquement le titre d’une page sur le titre de son nœud correspondant dans le plan de site. Nous allons améliorer la BasePage classe créée à l’étape 2 afin qu’elle offre cette fonctionnalité. Mais nous devons d’abord créer un plan de site pour notre site.

Notes

Ce tutoriel part du principe que le lecteur est déjà familiarisé avec ASP. Fonctionnalités de plan de site de NET. Pour plus d’informations sur l’utilisation du plan de site, consultez ma série d’articles en plusieurs parties, Examen d’ASP. Navigation du site net.

Création de la carte de site

Le système de plan de site est créé sur le modèle du fournisseur, qui dissocie l’API de plan de site de la logique qui sérialise les informations de plan de site entre la mémoire et un magasin persistant. Le .NET Framework est fourni avec la XmlSiteMapProvider classe, qui est le fournisseur de plan de site par défaut. Comme son nom l’indique, XmlSiteMapProvider utilise un fichier XML comme magasin de plan de site. Nous allons utiliser ce fournisseur pour définir notre plan de site.

Commencez par créer un fichier de plan de site dans le dossier racine du site web nommé Web.sitemap. Pour ce faire, cliquez avec le bouton droit sur le nom du site web dans Explorateur de solutions, choisissez Ajouter un nouvel élément, puis sélectionnez le modèle Plan de site. Vérifiez que le fichier est nommé Web.sitemap , puis cliquez sur Ajouter.

Ajouter un fichier nommé Web.sitemap au dossier racine du site web

Figure 06 : Ajouter un fichier nommé Web.sitemap au dossier racine du site web (cliquez pour afficher l’image en taille réelle)

Ajoutez le code XML suivant au Web.sitemap fichier :

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
 <siteMapNode url="~/Default.aspx" title="Home">
 <siteMapNode url="~/About.aspx" title="About the Author" />
 <siteMapNode url="~/MultipleContentPlaceHolders.aspx" title="Using Multiple ContentPlaceHolder Controls" />
 </siteMapNode>
</siteMap>

Ce code XML définit la structure de plan de site hiérarchique illustrée à la figure 7.

Le plan de site est actuellement composé de trois nœuds de plan de site

Figure 07 : Le plan de site est actuellement composé de trois nœuds de plan de site

Nous allons mettre à jour la structure du plan de site dans les prochains tutoriels à mesure que nous ajouterons de nouveaux exemples.

Mise à jour de la page maître pour inclure des contrôles web de navigation

Maintenant que nous avons défini un plan de site, nous allons mettre à jour la page master pour inclure des contrôles Web de navigation. Plus précisément, ajoutons un contrôle ListView à la colonne de gauche de la section Leçons qui affiche une liste non triée avec un élément de liste pour chaque nœud défini dans le plan de site.

Notes

Le contrôle ListView est nouveau pour ASP.NET version 3.5. Si vous utilisez une version antérieure de ASP.NET, utilisez plutôt le contrôle Repeater.

Commencez par supprimer le balisage de liste non ordonnée existant de la section Leçons. Ensuite, faites glisser un contrôle ListView à partir de la boîte à outils et déposez-le sous le titre Leçons. ListView se trouve dans la section Données de la boîte à outils, à côté des autres contrôles d’affichage : GridView, DetailsView et FormView. Définissez la propriété de ID ListView sur LessonsList.

À partir de l’Assistant Configuration de source de données, choisissez de lier listView à un nouveau contrôle SiteMapDataSource nommé LessonsDataSource. Le contrôle SiteMapDataSource retourne la structure hiérarchique à partir du système de plan de site.

Lier un contrôle SiteMapDataSource au contrôle ListView LessonsList

Figure 08 : Lier un contrôle SiteMapDataSource au contrôle ListView LessonsList (cliquer pour afficher une image en taille réelle)

Après avoir créé le contrôle SiteMapDataSource, nous devons définir les modèles de ListView afin qu’il affiche une liste non triée avec un élément de liste pour chaque nœud retourné par le contrôle SiteMapDataSource. Pour ce faire, utilisez le balisage de modèle suivant :

<asp:ListView ID="LessonsList" runat="server" DataSourceID="LessonsDataSource">
 <LayoutTemplate>
 <ul>
 <asp:PlaceHolder runat="server" ID="itemPlaceholder" />
 </ul>
 </LayoutTemplate>
 
 <ItemTemplate>
 <li><asp:HyperLink runat="server" ID="lnkLesson" NavigateUrl='<%# Eval("Url") %>'
 Text='<%# Eval("Title") %>' /></li>
 </ItemTemplate>
</asp:ListView>

génère LayoutTemplate le balisage d’une liste non triée (<ul>...</ul>) tandis que le ItemTemplate affiche chaque élément retourné par SiteMapDataSource en tant qu’élément de liste (<li>) qui contient un lien vers la leçon particulière.

Après avoir configuré les modèles de ListView, visitez le site web. Comme le montre la figure 9, la section Leçons contient un seul élément à puces, Accueil. Où sont les leçons À propos et Utilisation de plusieurs contrôles ContentPlaceHolder ? SiteMapDataSource est conçu pour retourner un ensemble hiérarchique de données, mais le contrôle ListView ne peut afficher qu’un seul niveau de la hiérarchie. Par conséquent, seul le premier niveau de nœuds de plan de site retourné par SiteMapDataSource est affiché.

La section Leçons contient un seul élément de liste

Figure 09 : La section Leçons contient un élément de liste unique (cliquer pour afficher l’image en taille réelle)

Pour afficher plusieurs niveaux, nous pouvons imbriquer plusieurs ListViews dans le ItemTemplate. Cette technique a été examinée dans le tutoriel Pages maîtres et navigation sur le site de ma série de tutoriels Utilisation des données. Toutefois, pour cette série de tutoriels, notre plan de site contiendra seulement deux niveaux : Accueil (le niveau supérieur) ; et chaque leçon en tant qu’enfant de Home. Au lieu de créer un Contrôle ListView imbriqué, nous pouvons plutôt demander à SiteMapDataSource de ne pas retourner le nœud de départ en définissant sa ShowStartingNode propriété sur False. L’effet net est que SiteMapDataSource commence par retourner le deuxième niveau de nœuds de plan de site.

Avec cette modification, listView affiche des éléments à puces pour les leçons À propos de et Utilisation de plusieurs contrôles ContentPlaceHolder, mais omet un élément à puces pour Accueil. Pour y remédier, nous pouvons ajouter explicitement un élément à puces pour Accueil dans :LayoutTemplate

<LayoutTemplate>
 <ul>
 <li><asp:HyperLink runat="server" ID="lnkLesson"
 NavigateUrl="~/Default.aspx" Text="Home" /></li>
 <asp:PlaceHolder runat="server" ID="itemPlaceholder" />
 </ul>
</LayoutTemplate>

En configurant SiteMapDataSource pour omettre le nœud de départ et en ajoutant explicitement un élément de puce Accueil, la section Leçons affiche désormais la sortie prévue.

La section Leçons contient un élément à puce pour accueil et chaque nœud enfant

Figure 10 : La section Leçons contient un élément à puces pour accueil et chaque nœud enfant (cliquer pour afficher l’image en taille réelle)

Définition du titre en fonction du plan de site

Une fois le plan de site en place, nous pouvons mettre à jour notre BasePage classe pour utiliser le titre spécifié dans le plan de site. Comme nous l’avons fait à l’étape 2, nous voulons utiliser le titre du nœud de plan de site uniquement si le titre de la page n’a pas été défini explicitement par le développeur de page. Si la page demandée n’a pas de titre de page défini explicitement et qu’elle est introuvable dans le plan du site, nous allons revenir à l’utilisation du nom de fichier de la page demandée (moins l’extension), comme nous l’avons fait à l’étape 2. La figure 11 illustre ce processus de décision.

En l’absence d’un titre de page défini explicitement, le titre du nœud plan de site correspondant est utilisé

Figure 11 : En l’absence d’un titre de page défini explicitement, le titre du nœud de plan de site correspondant est utilisé

Mettez à jour la BasePage méthode de la OnLoadComplete classe pour inclure le code suivant :

Protected Overrides Sub OnLoadComplete(ByVal e As EventArgs)
 ' Set the page's title, if necessary
 If String.IsNullOrEmpty(Page.Title) OrElse Page.Title = "Untitled Page" Then
 ' Is this page defined in the site map?
 Dim newTitle As String = Nothing

 Dim current As SiteMapNode = SiteMap.CurrentNode
 If current IsNot Nothing Then
 newTitle = current.Title
 Else
 ' Determine the filename for this page
 newTitle = System.IO.Path.GetFileNameWithoutExtension(Request.PhysicalPath)
 End If

 Page.Title = newTitle
 End If

 MyBase.OnLoadComplete(e)
End Sub

Comme précédemment, la OnLoadComplete méthode commence par déterminer si le titre de la page a été défini explicitement. Si Page.Title a la valeur Nothing, une chaîne vide ou est affecté à la valeur « Page sans titre », le code affecte automatiquement une valeur à Page.Title.

Pour déterminer le titre à utiliser, le code commence par référencer la propriété de CurrentNodela SiteMap classe. CurrentNoderetourne le SiteMapNode instance dans le plan de site qui correspond à la page actuellement demandée. En supposant que la page actuellement demandée se trouve dans le plan du site, la SiteMapNodepropriété de Title est affectée au titre de la page. Si la page actuellement demandée n’est pas dans le plan de site, CurrentNode retourne Nothing et que le nom de fichier de la page demandée est utilisé comme titre (comme cela a été fait à l’étape 2).

La figure 12 montre la page lorsqu’elle MultipleContentPlaceHolders.aspx est consultée via un navigateur. Étant donné que le titre de cette page n’est pas défini explicitement, le titre de son nœud de plan de site correspondant est utilisé à la place.

Le titre de la page MultipleContentPlaceHolders.aspx est extrait de la carte du site

Figure 12 : Le titre de la page MultipleContentPlaceHolders.aspx est extrait de la carte du site

Étape 4 : Ajout d’autres marques Page-Specific à la<head>section

Les étapes 1, 2 et 3 ont examiné la personnalisation de l’élément <title> page par page. En plus de <title>, la <head> section peut contenir des éléments et <link> des <meta> éléments. Comme indiqué précédemment dans ce tutoriel, Site.masterla section inclut <head> un <link> élément à Styles.css. Étant donné que cet <link> élément est défini dans la page master, il est inclus dans la <head> section pour toutes les pages de contenu. Mais comment procéder pour ajouter <meta> des éléments et <link> sur une base page par page ?

Le moyen le plus simple d’ajouter du contenu spécifique à la page à la <head> section consiste à créer un contrôle ContentPlaceHolder dans la page master. Nous avons déjà un tel ContentPlaceHolder (nommé head). Par conséquent, pour ajouter un balisage personnalisé <head> , créez un contrôle Contenu correspondant dans la page et placez-y le balisage.

Pour illustrer l’ajout de balisage personnalisé <head> à une page, incluons un <meta> élément de description à notre ensemble actuel de pages de contenu. L’élément <meta> description fournit une brève description de la page web ; la plupart des moteurs de recherche incorporent ces informations sous une forme quelconque lors de l’affichage des résultats de recherche.

Un <meta> élément description a la forme suivante :

<meta name="description" content="description of the web page" />

Pour ajouter ce balisage à une page de contenu, ajoutez le texte ci-dessus au contrôle Contenu qui correspond au ContentPlaceHolder de head la page master. Par exemple, pour définir un <meta> élément de description pour Default.aspx, ajoutez le balisage suivant :

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
 <meta name="description" content="Welcome to Scott Mitchell's Master Page Tutorials series." />
</asp:Content>

Étant donné que le head ContentPlaceHolder ne se trouve pas dans le corps de la page HTML, le balisage ajouté au contrôle Contenu n’est pas affiché en mode Création. Pour voir l’élément <meta> description, visitez Default.aspx via un navigateur. Une fois la page chargée, affichez la source et notez que la <head> section inclut le balisage spécifié dans le contrôle Contenu.

Prenez un moment pour ajouter <meta> des éléments de description à About.aspx, MultipleContentPlaceHolders.aspxet Login.aspx.

Ajout par programmation de balisage à la<head>région

Le head ContentPlaceHolder nous permet d’ajouter de manière déclarative du balisage personnalisé à la région de <head> la page master. Le balisage personnalisé peut également être ajouté par programmation. Rappelez-vous que la propriété de la Page classe retourne le HtmlHead instance défini dans la page master (le <head runat="server">).Header

La possibilité d’ajouter par programmation du contenu à la <head> région est utile lorsque le contenu à ajouter est dynamique. Peut-être est-il basé sur la visite de l’utilisateur sur la page ; Peut-être qu’il est extrait d’une base de données. Quelle que soit la raison, vous pouvez ajouter du contenu au HtmlHead en ajoutant des contrôles à sa Controls collection comme suit :

' Programmatically add a <meta> element to the Header
Dim keywords As New HtmlMeta()
keywords.Name = "keywords"
keywords.Content = "master page,asp.net,tutorial"

Page.Header.Controls.Add(keywords)

Le code ci-dessus ajoute l’élément <meta> keywords à la <head> région, qui fournit une liste délimitée par des virgules de mots clés qui décrivent la page. Notez que pour ajouter une <meta> balise, vous créez un HtmlMeta instance, définissez ses Name propriétés etContent, puis ajoutez-le à la Headercollection de Controls . De même, pour ajouter un <link> élément par programmation, créez un HtmlLink objet, définissez ses propriétés, puis ajoutez-le à la Headercollection .Controls

Notes

Pour ajouter un balisage arbitraire, créez un LiteralControl instance, définissez sa Text propriété, puis ajoutez-la à la Headercollection de Controls .

Résumé

Dans ce tutoriel, nous avons examiné différentes façons d’ajouter <head> du balisage de région page par page. Une page de master doit inclure un HtmlHead instance (<head runat="server">) avec un ContentPlaceHolder. Le HtmlHead instance permet aux pages de contenu d’accéder par programmation à la <head> région et de définir de manière déclarative et programmatique le titre de la page ; le contrôle ContentPlaceHolder permet d’ajouter du balisage personnalisé à la <head> section de manière déclarative via un contrôle Content.

Bonne programmation !

En savoir plus

Pour plus d’informations sur les sujets abordés dans ce tutoriel, reportez-vous aux ressources suivantes :

À propos de l’auteur

Scott Mitchell, auteur de plusieurs livres ASP/ASP.NET et fondateur de 4GuysFromRolla.com, travaille avec les technologies Web Microsoft depuis 1998. Scott travaille comme consultant indépendant, formateur et écrivain. Son dernier livre est Sams Teach Yourself ASP.NET 3.5 in 24 Heures. Scott peut être contacté à mitchell@4GuysFromRolla.com ou via son blog à l’adresse http://ScottOnWriting.NET.

Un merci spécial à

Cette série de tutoriels a été examinée par de nombreux réviseurs utiles. Les principaux réviseurs de ce tutoriel étaient Zack Jones et Suchi Banerjee. Vous souhaitez consulter mes prochains articles MSDN ? Si c’est le cas, déposez-moi une ligne à mitchell@4GuysFromRolla.com.

PrécédentSuivant