Pages maîtres et navigation de site (C#)

2025-05-04

L’une des caractéristiques courantes des sites web conviviaux est qu’ils disposent d’un schéma cohérent de mise en page et de navigation à l’échelle du site. Ce tutoriel explique comment vous pouvez créer une apparence cohérente sur toutes les pages qui peuvent facilement être mises à jour.

Présentation

L’une des caractéristiques courantes des sites web conviviaux est qu’ils disposent d’un schéma cohérent de mise en page et de navigation à l’échelle du site. ASP.NET 2.0 introduit deux nouvelles fonctionnalités qui simplifient considérablement l’implémentation d’une mise en page à l’échelle du site et d’un schéma de navigation : pages maîtres et navigation de site. Les pages maîtres permettent aux développeurs de créer un modèle à l’échelle du site avec des régions modifiables désignées. Ce modèle peut ensuite être appliqué à ASP.NET pages du site. Ces ASP.NET pages doivent uniquement fournir du contenu pour les régions modifiables spécifiées par la page maître, toutes les autres marques de balisage de la page maître sont identiques dans toutes les pages ASP.NET qui utilisent la page maître. Ce modèle permet aux développeurs de définir et de centraliser une mise en page à l’échelle du site, ce qui facilite la création d’une apparence cohérente sur toutes les pages qui peuvent facilement être mises à jour.

Le système de navigation de site fournit à la fois un mécanisme permettant aux développeurs de pages de définir une carte de site et une API pour cette carte de site à interroger par programmation. Le nouveau site web de navigation contrôle le menu, TreeView et SiteMapPath facilite le rendu de tout ou partie de la carte de site dans un élément d’interface utilisateur de navigation commun. Nous allons utiliser le fournisseur de navigation de site par défaut, ce qui signifie que notre carte de site sera définie dans un fichier au format XML.

Pour illustrer ces concepts et rendre nos tutoriels plus utilisables, nous allons passer cette leçon à définir une mise en page à l’échelle du site, implémenter une carte de site et ajouter l’interface utilisateur de navigation. À la fin de ce tutoriel, nous aurons une conception de site web polie pour la création de nos pages web de didacticiel.

Figure 1 : Résultat final de ce didacticiel (cliquez pour afficher l’image de taille complète)

Étape 1 : Création de la page maître

La première étape consiste à créer la page maître du site. Northwind.xsd À l'heure actuelle, notre site web se compose uniquement du Jeu de données Typé (dans le App_Code dossier), des classes BLL (ProductsBLL.cs, CategoriesBLL.cs, et ainsi de suite, toutes dans le App_Code dossier), de la base de données (NORTHWND.MDF, dans le App_Data dossier), du fichier de configuration (Web.config) et d'un fichier feuille de style CSS (Styles.css). J’ai nettoyé ces pages et fichiers illustrant l’utilisation de dal et BLL dans les deux premiers tutoriels, car nous allons réexaminer ces exemples plus en détail dans les prochains didacticiels.

Fichiers dans notre projet

Figure 2 : Fichiers dans notre projet

Pour créer une page maître, cliquez avec le bouton droit sur le nom du projet dans l’Explorateur de solutions et choisissez Ajouter un nouvel élément. Sélectionnez ensuite le type de page maître dans la liste des modèles et nommez-le Site.master.

Figure 3 : Ajouter une nouvelle page maître au site web (cliquez pour afficher l’image de taille complète)

Définissez la mise en page à l’échelle du site ici dans la page maître. Vous pouvez utiliser l’affichage Création et ajouter les contrôles Disposition ou Web dont vous avez besoin, ou ajouter manuellement le balisage à la main dans la vue Source. Dans ma page maître, j’utilise des feuilles de style en cascade pour le positionnement et les styles avec les paramètres CSS définis dans le fichier Style.cssexterne. Bien que vous ne puissiez pas indiquer à partir du balisage indiqué ci-dessous, les règles CSS sont définies de sorte que le contenu de la navigation <div>soit absolument positionné afin qu’il apparaisse à gauche et qu’il ait une largeur fixe de 200 pixels.

Site.master

<%@ Master Language="C#" AutoEventWireup="true"
    CodeFile="Site.master.cs" Inherits="Site" %>

<!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>Working with Data Tutorials</title>
    <link href="Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="wrapper">

        <form id="form1" runat="server">

            <div id="header">
                <span class="title">Working with Data Tutorials</span>
                <span class="breadcrumb">
                 TODO: Breadcrumb will go here...</span>
            </div>

            <div id="content">
                <asp:contentplaceholder id="MainContent"
                 runat="server">
                  <!-- Page-specific content will go here... -->
                </asp:contentplaceholder>
            </div>

            <div id="navigation">
                TODO: Menu will go here...
            </div>
        </form>
    </div>
</body>
</html>

Une page maître définit à la fois la mise en page statique et les régions qui peuvent être modifiées par les pages ASP.NET qui utilisent la page maître. Ces régions modifiables de contenu sont indiquées par le contrôle ContentPlaceHolder, qui peut être vu dans le contenu <div>. Notre page maître a un seul ContentPlaceHolder (MainContent), mais la page maître peut avoir plusieurs ContentPlaceHolders.

Une fois le balisage entré ci-dessus, en passant à la vue Création, on affiche la disposition de la page maître. Toute ASP.NET pages qui utilisent cette page maître aura cette disposition uniforme, avec la possibilité de spécifier le balisage pour la MainContent région.

Figure 4 : Page maître, lorsqu’elle est consultée dans le mode Création (cliquez pour afficher l’image de taille complète)

Étape 2 : Ajout d’une page d’accueil au site web

Une fois la page maître définie, nous sommes prêts à ajouter les pages ASP.NET pour le site web. Commençons par ajouter Default.aspx, la page d’accueil de notre site web. Cliquez avec le bouton droit sur le nom du projet dans l’Explorateur de solutions, puis choisissez Ajouter un nouvel élément. Sélectionnez l’option Formulaire web dans la liste de modèles et nommez le fichier Default.aspx. Cochez également la case « Sélectionner la page maître ».

Figure 5 : Ajouter un nouveau formulaire web, cochez la case Sélectionner la page maître (cliquez pour afficher l’image de taille complète)

Après avoir cliqué sur le bouton OK, nous sommes invités à choisir la page maître que cette nouvelle page ASP.NET doit utiliser. Bien que vous puissiez avoir plusieurs pages maîtres dans votre projet, nous n’en avons qu’une seule.

Figure 6 : Choisissez la page maître que cette page ASP.NET doit utiliser (cliquez pour afficher l’image de taille complète)

Après avoir choisi la page maître, les nouvelles pages ASP.NET contiennent le balisage suivant :

Default.aspx

<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent"
  Runat="Server">
</asp:Content>

Dans la directive @Page, il existe une référence au fichier de page maître utilisé (MasterPageFile="~/Site.master"), et le balisage de la page ASP.NET contient un contrôle de contenu pour chacun des contrôles ContentPlaceHolder définis dans la page maître, avec le mappage du contrôle de contenu ContentPlaceHolderID à un ContentPlaceHolder spécifique. Le contrôle De contenu est l’emplacement où vous placez le balisage que vous souhaitez afficher dans l’espace réservé ContentPlaceHolder correspondant. Définissez l’attribut @Page de la directive Title sur Home et ajoutez du contenu accueillant au contrôle de contenu :

Default.aspx

<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" Title="Home" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent"
    Runat="Server">
    <h1>Welcome to the Working with Data Tutorial Site</h1>

    <p>This site is being built as part of a set of tutorials that
illustrate some of the new data access and databinding features in
ASP.NET 2.0 and Visual Web Developer.</p>

    <p>Over time, it will include a host of samples that
demonstrate:</p>

    <ul>
        <li>Building a DAL (data access layer),</li>
        <li>Using strongly typed TableAdapters and DataTables</li>
        <li>Master-Detail reports</li>
        <li>Filtering</li>
        <li>Paging,</li>
        <li>Two-way databinding,</li>
        <li>Editing,</li>
        <li>Deleting,</li>
        <li>Inserting,</li>
        <li>Hierarchical data browsing,</li>
        <li>Hierarchical drill-down,</li>
        <li>Optimistic concurrency,</li>
        <li>And more!</li>
    </ul>
</asp:Content>

L’attribut Title de la @Page directive nous permet de définir le titre de la page à partir de la page ASP.NET, même si l’élément <title> est défini dans la page maître. Nous pouvons également définir le titre par programmation, à l’aide Page.Titlede . Notez également que les références de la page maître aux feuilles de style (par exemple Style.css) sont automatiquement mises à jour afin qu’elles fonctionnent dans n’importe quelle page ASP.NET, quel que soit le répertoire dans lequel se trouve la page ASP.NET par rapport à la page maître.

En passant à l'affichage Création, nous pouvons voir à quoi notre page ressemblera dans un navigateur. Notez que dans le mode Création de la page ASP.NET, seules les régions modifiables de contenu sont éditables. Le balisage qui n'est pas "ContentPlaceHolder", défini dans la page maître, est grisé.

Figure 7 : Le mode Création de la page ASP.NET affiche les régions modifiables et non modifiables (cliquez pour afficher l’image de taille complète)

Lorsque la Default.aspx page est visitée par un navigateur, le moteur ASP.NET fusionne automatiquement le contenu de la page maître et celui de la page ASP.NET, et génère le contenu fusionné dans le code HTML final envoyé au navigateur demandeur. Lorsque le contenu de la page maître est mis à jour, toutes les pages ASP.NET qui utilisent cette page maître auront leur contenu fusionné avec le nouveau contenu de la page maître la prochaine fois qu’elles sont demandées. En bref, le modèle de page maître permet de définir un modèle de mise en page unique (la page maître) dont les modifications sont immédiatement reflétées sur l’ensemble du site.

Ajout de pages de ASP.NET supplémentaires au site web

Prenons un moment pour ajouter au site des modèles de page supplémentaires ASP.NET qui abriteront à terme les différentes démonstrations de création de rapports. Il y aura plus de 35 démonstrations au total, donc plutôt que de créer toutes les pages stub, nous allons simplement créer les premières. Étant donné qu’il y aura également de nombreuses catégories de démonstrations, pour mieux gérer les démonstrations, ajoutez un dossier pour les catégories. Ajoutez les trois dossiers suivants pour l’instant :

BasicReporting
Filtering
CustomFormatting

Enfin, ajoutez de nouveaux fichiers, comme indiqué dans l’Explorateur de solutions dans la figure 8. Lors de l’ajout de chaque fichier, n’oubliez pas de cocher la case à cocher « Sélectionner la page maître ».

Ajouter les fichiers suivants

Figure 8 : Ajouter les fichiers suivants

Étape 2 : Création d’une carte de site

L’un des défis de la gestion d’un site web composé de plus d’une poignée de pages offre un moyen simple aux visiteurs de parcourir le site. Pour commencer, la structure de navigation du site doit être définie. Ensuite, cette structure doit être traduite en éléments d’interface utilisateur navigable, tels que des menus ou des barres de navigation. Enfin, ce processus doit être conservé et mis à jour à mesure que de nouvelles pages sont ajoutées au site et à celles existantes supprimées. Avant ASP.NET 2.0, les développeurs se trouvaient eux-mêmes pour créer la structure de navigation du site, la maintenir et la traduire en éléments d’interface utilisateur navigable. Avec ASP.NET 2.0, toutefois, les développeurs peuvent utiliser le système de navigation de site intégré très flexible.

Le système de navigation de site ASP.NET 2.0 permet à un développeur de définir une carte de site, puis d’accéder à ces informations via une API programmatique. ASP.NET est fourni avec un fournisseur de cartes de site qui s’attend à ce que les données de carte de site soient stockées dans un fichier XML mis en forme de manière particulière. Toutefois, étant donné que le système de navigation de site est basé sur le modèle fournisseur , il peut être étendu pour prendre en charge d’autres façons de sérialiser les informations de carte de site. L’article de Jeff Prosise, The SQL Site Map Provider You’ve Been Waiting For montre comment créer un fournisseur de cartes de site qui stocke la carte de site dans une base de données SQL Server ; Une autre option consiste à créer un fournisseur de cartes de site en fonction de la structure du système de fichiers.

Pour ce didacticiel, nous allons toutefois utiliser le fournisseur de carte de site par défaut fourni avec ASP.NET 2.0. Pour créer la carte de site, cliquez simplement avec le bouton droit sur le nom du projet dans l’Explorateur de solutions, choisissez Ajouter un nouvel élément, puis choisissez l’option Carte de site. Laissez le nom comme Web.sitemap et cliquez sur le bouton Ajouter.

Figure 9 : Ajouter une carte de site à votre projet (cliquez pour afficher l’image de taille complète)

Le fichier de carte de site est un fichier XML. Notez que Visual Studio fournit IntelliSense pour la structure de la carte de site. Le fichier de carte de site doit avoir le <siteMap> nœud comme nœud racine, qui doit contenir précisément un <siteMapNode> élément enfant. Ce premier <siteMapNode> élément peut ensuite contenir un nombre arbitraire d’éléments décroissants <siteMapNode> .

Définissez la carte de site pour imiter la structure du système de fichiers. Autrement dit, ajoutez un <siteMapNode> élément pour chacun des trois dossiers et les éléments enfants <siteMapNode> pour chacune des pages ASP.NET de ces dossiers, comme suit :

Web.plan du site

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >

  <siteMapNode url="~/Default.aspx" title="Home" description="Home">
      <siteMapNode title="Basic Reporting"
        url="~/BasicReporting/Default.aspx"
        description="Basic Reporting Samples">
        <siteMapNode url="~/BasicReporting/SimpleDisplay.aspx"
         title="Simple Display"
         description="Displays the complete contents
          of a database table." />
        <siteMapNode url="~/BasicReporting/DeclarativeParams.aspx"
          title="Declarative Parameters"
          description="Displays a subset of the contents
            of a database table using parameters." />
        <siteMapNode url="~/BasicReporting/ProgrammaticParams.aspx"
         title="Setting Parameter Values"
         description="Shows how to set parameter values
          programmatically." />
      </siteMapNode>

      <siteMapNode title="Filtering Reports"
       url="~/Filtering/Default.aspx"
       description="Samples of Reports that Support Filtering">
        <siteMapNode url="~/Filtering/FilterByDropDownList.aspx"
          title="Filter by Drop-Down List"
          description="Filter results using a drop-down list." />
        <siteMapNode url="~/Filtering/MasterDetailsDetails.aspx"
         title="Master-Details-Details"
         description="Filter results two levels down." />
        <siteMapNode url="~/Filtering/DetailsBySelecting.aspx"
          title="Details of Selected Row"
          description="Show detail results for a selected item in a GridView." />
      </siteMapNode>

      <siteMapNode title="Customized Formatting"
         url="~/CustomFormatting/Default.aspx"
         description="Samples of Reports Whose Formats are Customized">
        <siteMapNode url="~/CustomFormatting/CustomColors.aspx"
         title="Format Colors"
         description="Format the grid s colors based
           on the underlying data." />
        <siteMapNode
          url="~/CustomFormatting/GridViewTemplateField.aspx"
          title="Custom Content in a GridView"
          description="Shows using the TemplateField to
          customize the contents of a field in a GridView." />
        <siteMapNode
          url="~/CustomFormatting/DetailsViewTemplateField.aspx"
          title="Custom Content in a DetailsView"
          description="Shows using the TemplateField to customize
           the contents of a field in a DetailsView." />
        <siteMapNode url="~/CustomFormatting/FormView.aspx"
          title="Custom Content in a FormView"
          description="Illustrates using a FormView for a
           highly customized view." />
        <siteMapNode url="~/CustomFormatting/SummaryDataInFooter.aspx"
          title="Summary Data in Footer"
          description="Display summary data in the grids footer." />
      </siteMapNode>

  </siteMapNode>

</siteMap>

La carte de site définit la structure de navigation du site web, qui est une hiérarchie qui décrit les différentes sections du site. Chaque élément <siteMapNode> de Web.sitemap représente une section de la structure de navigation du site.

Figure 10 : La carte de site représente une structure de navigation hiérarchique (cliquez pour afficher l’image de taille complète)

ASP.NET expose la structure de la carte de site via la classe SiteMap du .NET Framework. Cette classe a une CurrentNode propriété, qui retourne des informations sur la section que l’utilisateur visite actuellement ; la RootNode propriété retourne la racine de la carte de site (Accueil, dans notre carte de site). Les propriétés CurrentNode et RootNode retournent des instances SiteMapNode, qui ont des propriétés telles que ParentNode, ChildNodes, NextSibling, PreviousSibling et ainsi de suite, qui permettent à la hiérarchie de la carte de site d’être parcourue.

L’accès aux données dans ASP.NET 2.0 peut être effectué par programmation, comme dans ASP.NET 1.x ou de manière déclarative, via les nouveaux contrôles de source de données. Il existe plusieurs contrôles de source de données intégrés tels que le contrôle SqlDataSource, pour accéder aux données de base de données relationnelles, le contrôle ObjectDataSource, pour accéder aux données à partir de classes et d’autres. Vous pouvez même créer vos propres contrôles de source de données personnalisés.

Les contrôles de source de données servent de proxy entre votre page ASP.NET et les données sous-jacentes. Pour afficher les données récupérées d’un contrôle de source de données, nous allons généralement ajouter un autre contrôle Web à la page et le lier au contrôle de source de données. Pour lier un contrôle Web à un contrôle de source de données, définissez simplement la propriété du DataSourceID contrôle Web sur la valeur de la propriété du contrôle de source de ID données.

Pour faciliter l’utilisation des données de la carte de site, ASP.NET inclut le contrôle SiteMapDataSource, ce qui nous permet de lier un contrôle Web à la carte de site de notre site web. Deux contrôles Web de TreeView et de menu sont couramment utilisés pour fournir une interface utilisateur de navigation. Pour lier les données de carte de site à l’un de ces deux contrôles, ajoutez simplement un SiteMapDataSource à la page, ainsi qu’un contrôle TreeView ou Menu dont DataSourceID la propriété est définie en conséquence. Par exemple, nous pourrions ajouter un contrôle Menu à la page maître à l’aide du balisage suivant :

<div id="navigation">
    <asp:Menu ID="Menu1" runat="server"
      DataSourceID="SiteMapDataSource1">
    </asp:Menu>

    <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
</div>

Pour un degré de contrôle plus fin sur le code HTML émis, nous pouvons lier le contrôle SiteMapDataSource au contrôle Repeater, comme suit :

<div id="navigation">
    <ul>
        <li><asp:HyperLink runat="server" ID="lnkHome"
         NavigateUrl="~/Default.aspx">Home</asp:HyperLink></li>

        <asp:Repeater runat="server" ID="menu"
          DataSourceID="SiteMapDataSource1">
            <ItemTemplate>
                <li>
                    <asp:HyperLink runat="server"
                    NavigateUrl='<%# Eval("Url") %>'>
                    <%# Eval("Title") %></asp:HyperLink>
                </li>
            </ItemTemplate>
        </asp:Repeater>
    </ul>

    <asp:SiteMapDataSource ID="SiteMapDataSource1"
      runat="server" ShowStartingNode="false" />
</div>

Le contrôle SiteMapDataSource retourne la hiérarchie de carte de site un niveau à la fois, en commençant par le nœud de carte de site racine (accueil, dans notre carte de site), puis au niveau suivant (Rapports de base, Filtrage de rapports et mise en forme personnalisée), et ainsi de suite. Lors de la liaison de SiteMapDataSource à un répéteur, il énumère le premier niveau retourné et instancie l’instance ItemTemplate pour chaque SiteMapNode instance de ce premier niveau. Pour accéder à une propriété particulière de SiteMapNode, nous pouvons utiliser Eval(propertyName), ce qui nous permet d'obtenir les propriétés SiteMapNode et Url pour chaque contrôle HyperLink Title.

L’exemple répéteur ci-dessus affiche le balisage suivant :

<li>
    <a href="/Code/BasicReporting/Default.aspx">Basic Reporting</a>
</li>

<li>
    <a href="/Code/Filtering/Default.aspx">Filtering Reports</a>
</li>

<li>
    <a href="/Code/CustomFormatting/Default.aspx">
     Customized Formatting</a>
</li>

Ces nœuds de carte de site (rapports de base, rapports de filtrage et mise en forme personnalisée) comprennent le deuxième niveau de la carte de site affichée, et non la première. Cela est dû au fait que la propriété de ShowStartingNode SiteMapDataSource est définie sur False, ce qui fait que le SiteMapDataSource ignore le nœud racine de la carte de site et commence à retourner le deuxième niveau de la hiérarchie de la carte de site.

Pour afficher les enfants pour le rapport de base, le filtrage des rapports, et le formatage personnalisé SiteMapNode, nous pouvons ajouter un autre Répéteur au Répéteur ItemTemplate initial. Ce deuxième répéteur sera lié à la propriété de l’instance SiteMapNodeChildNodes , comme suit :

<asp:Repeater runat="server" ID="menu" DataSourceID="SiteMapDataSource1">
    <ItemTemplate>
        <li>
            <asp:HyperLink runat="server"
             NavigateUrl='<%# Eval("Url") %>'>
             <%# Eval("Title") %></asp:HyperLink>

            <asp:Repeater runat="server"
                DataSource='<%# ((SiteMapNode) Container.DataItem).ChildNodes %>'>
                <HeaderTemplate>
                    <ul>
                </HeaderTemplate>

                <ItemTemplate>
                    <li>
                        <asp:HyperLink runat="server"
                         NavigateUrl='<%# Eval("Url") %>'>
                         <%# Eval("Title") %></asp:HyperLink>
                    </li>
                </ItemTemplate>

                <FooterTemplate>
                    </ul>
                </FooterTemplate>
            </asp:Repeater>
        </li>
    </ItemTemplate>
</asp:Repeater>

Ces deux répéteurs entraînent le balisage suivant (certaines balises ont été supprimées pour des raisons de concision) :

<li>
    <a href="/Code/BasicReporting/Default.aspx">Basic Reporting</a>
    <ul>
       <li>
          <a href="/Code/BasicReporting/SimpleDisplay.aspx">
            Simple Display</a>
       </li>
       <li>
          <a href="/Code/BasicReporting/DeclarativeParams.aspx">
            Declarative Parameters</a>
       </li>
       <li>
          <a href="/Code/BasicReporting/ProgrammaticParams.aspx">
            Setting Parameter Values</a>
       </li>
    </ul>
</li>

<li>
    <a href="/Code/Filtering/Default.aspx">Filtering Reports</a>
    ...
</li>

<li>
    <a href="/Code/CustomFormatting/Default.aspx">
      Customized Formatting</a>
    ...
</li>

À l’aide de styles CSS choisis dans le livre de Rachel Andrew The CSS Anthology : 101 Essential Tips, Tricks, & Hacks, les éléments et sont stylisés de manière à ce que le balisage produise la sortie visuelle suivante :

Menu composé de deux répéteurs et d’un css

Figure 11 : Menu composé de deux répéteurs et d’un fichier CSS

Ce menu se trouve dans la page maître et lié à la carte de site définie dans Web.sitemap, ce qui signifie que toute modification apportée à la carte de site sera immédiatement reflétée sur toutes les pages qui utilisent la Site.master page maître.

Désactivation de ViewState

Tous les contrôles ASP.NET peuvent éventuellement conserver leur état à l’état d’affichage, qui est sérialisé en tant que champ de formulaire masqué dans le code HTML rendu. L'état de vue est utilisé par les contrôles pour mémoriser leur état modifié programmatiquement dans les postbacks, comme les données liées à un contrôle Web de données. Bien que l’état d’affichage permette la mémorisation des informations d'un postback à l'autre, il augmente la taille du balisage qui doit être envoyé au client et peut entraîner un gonflement excessif de la page s’il n’est pas étroitement surveillé. Les contrôles Web de données en particulier GridView sont particulièrement connus pour ajouter des dizaines de kilo-octets supplémentaires de balisage à une page. Bien qu’une telle augmentation puisse être négligeable pour les utilisateurs haut débit ou intranet, l’état de vue peut ajouter plusieurs secondes au temps de réponse pour les utilisateurs de connexion commutée.

Pour afficher l’impact de l’état d’affichage, visitez une page dans un navigateur, puis affichez la source envoyée par la page web (dans Internet Explorer, accédez au menu Affichage et choisissez l’option Source). Vous pouvez également activer le suivi de page pour afficher l’allocation d’état d’affichage utilisée par chacun des contrôles de la page. Les informations d’état d’affichage sont sérialisées dans un champ de formulaire masqué nommé __VIEWSTATE, situé dans un <div> élément immédiatement après la balise d’ouverture <form> . L’état d’affichage est conservé uniquement lorsqu’un formulaire web est utilisé ; si votre page ASP.NET n’inclut pas de <form runat="server"> syntaxe déclarative, il n’y aura pas de __VIEWSTATE champ de formulaire masqué dans le balisage rendu.

Le __VIEWSTATE champ de formulaire généré par la page maître ajoute environ 1 800 octets au balisage généré par la page. Ce ballonnement supplémentaire est principalement dû au contrôle Repeater, car le contenu du contrôle SiteMapDataSource est conservé pour afficher l’état. Bien qu'un supplément de 1 800 octets ne semble pas très important, lorsqu'on utilise un GridView avec de nombreux champs et enregistrements, l'état de vue peut facilement gonfler par un facteur de 10 ou plus.

L’état d’affichage peut être désactivé au niveau de la page ou du contrôle en définissant la propriété EnableViewState à false, réduisant ainsi la taille du balisage rendu. Étant donné que l'état de vue d'un contrôle Web de données conserve les données liées au contrôle Web de données entre les retours de publication, lors de la désactivation de l'état de vue d'un contrôle Web de données, les données doivent être liées à chaque retour de publication. Dans ASP.NET version 1.x, cette responsabilité était la responsabilité du développeur de pages ; avec ASP.NET 2.0, toutefois, les contrôles Web de données vont se réassocier à leur source de données lors de chaque rafraîchissement de page si nécessaire.

Pour réduire l’état d’affichage de la page, nous allons définir la propriété EnableViewStatedu contrôle Repeater sur false . Vous pouvez effectuer cette opération via la fenêtre Propriétés du Concepteur ou de manière déclarative dans la vue Source. Après avoir apporté cette modification, le balisage déclaratif du répéteur doit ressembler à ceci :

<asp:Repeater runat="server" ID="menu" DataSourceID="SiteMapDataSource1"
    EnableViewState="False">
    <ItemTemplate>
        ... <i>ItemTemplate contents omitted for brevity</i> ...
    </ItemTemplate>
</asp:Repeater>

Après cette modification, la taille de l’état d’affichage rendu de la page s’est réduite à 52 octets seulement, une réduction de 97% économies dans la taille de l’état d’affichage ! Dans les didacticiels de cette série, nous allons désactiver l’état d’affichage des contrôles Web de données par défaut afin de réduire la taille du balisage rendu. Dans la majorité des exemples, la propriété EnableViewState sera définie sur false et cela se fera sans mention. Le seul état d’affichage temporel sera abordé dans les scénarios où il doit être activé pour que le contrôle Web de données fournisse ses fonctionnalités attendues.

Pour terminer la page maîtresse, nous allons ajouter un élément d’interface utilisateur de fil d'Ariane à chaque page. Le fil d'Ariane indique rapidement aux utilisateurs leur emplacement actuel dans la hiérarchie du site. L’ajout d’une barre de navigation dans ASP.NET 2.0 est facile d’ajouter un contrôle SiteMapPath à la page ; aucun code n’est nécessaire.

Pour notre site, ajoutez ce contrôle à l’en-tête <div>:

<span class="breadcrumb">
    <asp:SiteMapPath ID="SiteMapPath1" runat="server">
    </asp:SiteMapPath>
</span>

Le fil d'Ariane montre la page actuelle que l'utilisateur visite dans la hiérarchie de la carte du site, ainsi que les ancêtres de ce nœud de carte de site, jusqu'à la page racine (Accueil, dans notre carte de site).

Le fil d’Ariane affiche la page actuelle et ses ancêtres dans la hiérarchie du plan du site

Figure 12 : Le fil d'Ariane affiche la page actuelle et ses ancêtres dans la hiérarchie du plan du site

Étape 5 : Ajout de la page par défaut pour chaque section

Les didacticiels de notre site sont divisés en différentes catégories : Rapports de base, Filtrage, Mise en forme personnalisée, et ainsi de suite avec un dossier pour chaque catégorie et les didacticiels correspondants sous forme de pages ASP.NET dans ce dossier. En outre, chaque dossier contient une Default.aspx page. Pour cette page par défaut, affichons tous les didacticiels de la section active. Autrement dit, pour le dossier Default.aspx du BasicReporting, nous aurions des liens vers SimpleDisplay.aspx, DeclarativeParams.aspx, et ProgrammaticParams.aspx. Ici encore, nous pouvons utiliser la SiteMap classe et un contrôle Web de données pour afficher ces informations en fonction de la carte de site définie dans Web.sitemap.

Nous allons afficher une liste non triée à l’aide d’un répéteur, mais cette fois, nous allons afficher le titre et la description des didacticiels. Étant donné que le balisage et le code à accomplir doivent être répétés pour chaque Default.aspx page, nous pouvons encapsuler cette logique d’interface utilisateur dans un contrôle utilisateur. Créez un dossier dans le site web appelé UserControls et ajoutez-y un nouvel élément de type Contrôle utilisateur web nommé SectionLevelTutorialListing.ascx, puis ajoutez le balisage suivant :

Figure 13 : Ajouter un nouveau contrôle utilisateur web au UserControls dossier (cliquez pour afficher l’image de taille complète)

SectionLevelTutorialListing.ascx

<%@ Control Language="CS" AutoEventWireup="true"
    CodeFile="SectionLevelTutorialListing.ascx.cs"
    Inherits="UserControls_SectionLevelTutorialListing" %>
<asp:Repeater ID="TutorialList" runat="server" EnableViewState="False">
    <HeaderTemplate><ul></HeaderTemplate>
    <ItemTemplate>
        <li><asp:HyperLink runat="server"
         NavigateUrl='<%# Eval("Url") %>'
         Text='<%# Eval("Title") %>'></asp:HyperLink>
                - <%# Eval("Description") %></li>
    </ItemTemplate>
    <FooterTemplate></ul></FooterTemplate>
</asp:Repeater>

SectionLevelTutorialListing.ascx.cs

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class UserControls_SectionLevelTutorialListing : UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {
        // If SiteMap.CurrentNode is not null,
        // bind CurrentNode ChildNodes to the GridView
        if (SiteMap.CurrentNode != null)
        {
            TutorialList.DataSource = SiteMap.CurrentNode.ChildNodes;
            TutorialList.DataBind();
        }
    }
}

Dans l’exemple précédent de répéteur, nous avons lié les SiteMap données au répéteur de manière déclarative ; toutefois, le SectionLevelTutorialListing contrôle utilisateur le fait par programmation. Dans le Page_Load gestionnaire d’événements, une vérification est effectuée pour s’assurer que l’URL de cette page est mappée à un nœud dans la carte de site. Si ce contrôle utilisateur est utilisé dans une page qui n’a pas d’entrée correspondante <siteMapNode> , SiteMap.CurrentNode retourne null et aucune donnée n’est liée au répéteur. En supposant que nous avons un CurrentNode, nous liaisons sa ChildNodes collection au Repeater. Étant donné que notre carte de site est configurée de telle sorte que la Default.aspx page de chaque section soit le nœud parent de tous les didacticiels de cette section, ce code affiche des liens vers et des descriptions de tous les didacticiels de la section, comme illustré dans la capture d’écran ci-dessous.

Une fois que ce Répéteur a été créé, ouvrez les pages Default.aspx dans chacun des dossiers, accédez à la vue Création, puis faites simplement glisser le contrôle utilisateur depuis l’Explorateur de solutions sur la surface de conception à l’endroit où vous souhaitez que la liste de didacticiels apparaisse.

Figure 14 : Le contrôle utilisateur a été ajouté à Default.aspx (cliquez pour afficher l’image de taille complète)

Figure 15 : Les didacticiels de création de rapports de base sont répertoriés (cliquez pour afficher l’image de taille complète)

Résumé

Une fois la carte de site définie et la page maître terminée, nous disposons désormais d’un schéma cohérent de mise en page et de navigation pour nos didacticiels liés aux données. Quel que soit le nombre de pages que nous ajoutons à notre site, la mise à jour des informations de mise en page à l’échelle du site ou de navigation de site est un processus rapide et simple en raison de ces informations centralisées. Plus précisément, les informations de mise en page sont définies dans la page Site.master maître et la carte de site dans Web.sitemap. Nous n’avons pas besoin d’écrire de code pour atteindre ce mécanisme de mise en page et de navigation à l’échelle du site, et nous avons conservé la prise en charge complète du concepteur WYSIWYG dans Visual Studio.

Après avoir terminé la couche d’accès aux données et la couche logique métier et une mise en page cohérente et une navigation de site définie, nous sommes prêts à commencer à explorer les modèles de création de rapports courants. Dans les trois didacticiels suivants , nous allons examiner les tâches de création de rapports de base affichant les données récupérées à partir de la bibliothèque BLL dans les contrôles GridView, DetailsView et FormView.

Bonne programmation !

Pour aller plus loin

Pour plus d’informations sur les sujets abordés dans ce tutoriel, consultez les ressources suivantes :

À propos de l’auteur

Scott Mitchell, auteur de sept livres ASP/ASP.NET et fondateur de 4GuysFromRolla.com, travaille avec les technologies Web Microsoft depuis 1998. Scott travaille en tant que consultant indépendant, formateur et écrivain. Son dernier livre est Sams Teach Yourself ASP.NET 2.0 en 24 heures. On peut le joindre à mitchell@4GuysFromRolla.com.

Merci spécial à

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

Précédent Suivant

Partager via

Pages maîtres et navigation dans un site (C#)