Effectuer la mise en cache des fragments dans ASP.NET à l’aide de Visual C# .NET

Article
07/17/2023

Cet article explique comment effectuer la mise en cache de fragments dans ASP.NET à l’aide de Visual C# .NET.

Version d’origine du produit : Microsoft ASP.NET
Numéro de la base de connaissances d’origine : 308378

Résumé

Cet article explique comment implémenter la mise en cache des fragments dans ASP.NET. La mise en cache des fragments ne met pas en cache les fragments de code d’un formulaire web directement ; La mise en cache des fragments fait référence à la mise en cache de contrôles utilisateur individuels (.ascx) dans un formulaire web. Chaque contrôle utilisateur peut avoir des durées de cache indépendantes et des implémentations de la façon dont le comportement de mise en cache doit être appliqué. L’exemple de code de cet article montre comment obtenir cette fonctionnalité.

La mise en cache de fragments est utile lorsque vous devez mettre en cache uniquement un sous-ensemble d’une page. Les barres de navigation, les en-têtes et les pieds de page sont de bons candidats pour la mise en cache des fragments.

Configuration requise

Windows 2000
Internet Information Server (IIS)
.NET Framework
ASP.NET

Créer une application web ASP.NET à l’aide de C# .NET

Les étapes suivantes montrent comment créer une application web ASP.NET nommée FragmentCache.

Ouvrir Visual Studio .NET
On the File menu, point to New, and then click Project.
Dans la boîte de dialogue Nouveau projet , cliquez sur Projets Visual C# sous Types de projets, puis sur ASP.NET application web sous Modèles.
Dans la zone Nom , tapez FragmentCache. Dans la zone Emplacement , sélectionnez le serveur approprié. Si vous utilisez le serveur local, vous pouvez laisser le nom du serveur comme http://localhost.

Créer les contrôles utilisateur

Cette section fournit l’exemple de code et les explications de chaque contrôle utilisateur que vous utiliserez dans cet article. Vous pouvez copier et coller l’exemple de code dans le fichier associated.ascx et la page code-behind comme décrit.

Contrôle utilisateur 1 (FragmentCtrl1.ascx)

Le contrôle utilisateur suivant, FragmentCtrl1.ascx, est simple. FragmentCtrl1.ascx écrit l’heure à laquelle l’entrée de cache de l’élément se produit. Comme pour tous les contrôles créés pour cet article, une description de base est fournie pour le contrôle afin de faciliter la distinction entre les paramètres et les comportements associés au moment de l’exécution dans les sections ultérieures.

Dans Visual Studio .NET, créez un contrôle utilisateur comme suit :
1. Dans Explorateur de solutions, cliquez avec le bouton droit sur le nœud du projet, pointez sur Ajouter, puis cliquez sur Ajouter un contrôle utilisateur web.
2. Nommez le contrôle FragmentCtrl1.ascx, puis cliquez sur Ouvrir.
Vérifiez que l’onglet Création est sélectionné. Cliquez et faites glisser un contrôle Étiquette de formulaire Web à partir de la section Web Forms de la boîte à outils, puis déposez le contrôle Label sur la page.
Cliquez sur le contrôle Label. Dans le volet Propriétés de l’environnement de développement intégré (IDE) Visual Studio .NET , tapez CacheEntryTime dans la propriété ID et laissez la propriété Text vide.
Basculez vers l’affichage HTML et ajoutez la directive suivante @ OutputCache en haut de la page :
```
<%@ OutputCache Duration="40" VaryByParam="none"%>
```
Cliquez avec le bouton droit sur le fichier .ascx , puis cliquez sur Afficher le code pour afficher la source de la page code-behind.

Ajoutez le code suivant à l’événement Page_Load , qui définit la propriété de l’étiquette CacheEntryTimeText :

private void Page_Load(object sender, System.EventArgs e)
{
    CacheEntryTime.Text ="FragmentCtrl1: " + DateTime.Now.TimeOfDay.ToString();
}

Contrôle utilisateur 2 (FragmentCtrl2.ascx)

Bien que vous puissiez simplement créer une autre version du premier contrôle avec une durée de cache différente pour montrer comment plusieurs contrôles utilisateur peuvent avoir des comportements indépendants dans la même page, cette section rend le deuxième contrôle, FragmentCtrl2.ascx, plus intéressant. FragmentCtrl2.ascx est utilisé pour introduire l’attribut VaryByControl . VaryByControl permet d’effectuer différentes entrées de cache en fonction des valeurs d’un contrôle spécifié. Cette fonctionnalité est rendue beaucoup plus claire au moment de l’exécution dans la section suivante.

Dans Visual Studio .NET, créez un contrôle utilisateur comme suit :
1. Dans Explorateur de solutions, cliquez avec le bouton droit sur le nœud du projet, pointez sur Ajouter, puis cliquez sur Ajouter un contrôle utilisateur web.
2. Nommez le contrôle FragmentCtrl2.ascx, puis cliquez sur Ouvrir.
Vérifiez que l’onglet Création est sélectionné. Cliquez et faites glisser un contrôle Étiquette de formulaire Web à partir de la section Web Forms de la boîte à outils, puis déposez le contrôle Label sur la page.
Cliquez sur le contrôle Label. Dans le volet Propriétés , tapez CacheEntryTime dans la propriété ID et laissez la propriété Text vide.
Positionnez le curseur directement après le contrôle Label, puis appuyez sur Entrée pour passer à la ligne suivante de la page.
Cliquez sur un contrôle Web Form RadioButtonList et faites-le glisser à partir de la section Web Forms de la boîte à outils, puis déposez-le sur la page. Le contrôle RadioButtonList doit apparaître lui-même sur la ligne après le contrôle Label.
Cliquez sur le contrôle RadioButtonList. Dans le volet Propriétés , tapez MyRadioButtonList dans la propriété ID .
Dans le volet Propriétés , recherchez la propriété Items du contrôle MyRadioButtonList , cliquez sur Collection, puis cliquez sur le bouton de sélection (...) qui apparaît en regard de Collection.
Dans la fenêtre d’Rédacteur collection ListItem, ajoutez les membres ListItem comme suit :
1. Sous Membres, cliquez sur Ajouter.
2. Dans la section Propriétés listItem , définissez Text et Value sur Oui, puis sélectionnez Sélectionné sur True.
3. Sous Membres, cliquez à nouveau sur Ajouter .
4. Dans la section Propriétés listItem , définissez Text et Value sur Non, puis sélectionnez Sélectionné sur False.
5. Sous Membres, cliquez sur Ajouter une dernière fois.
6. Dans la section Propriétés listItem , définissez Text et Value sur Peut-être, puis sélectionnez Sélectionné sur False.
7. Cliquez sur OK pour revenir au fichier .ascx en mode Création . Notez que trois cases d’option qui s’affichent sont contenues dans le contrôle RadioButtonList : Oui, Non et Peut-être.
Positionnez le curseur directement après le contrôle RadioButtonList, puis appuyez sur Entrée pour passer à la ligne suivante de la page.
Cliquez sur un contrôle Web Form Button et faites-le glisser à partir de la section Web Forms de la boîte à outils, puis déposez-le sur la page. Le contrôle Button doit apparaître lui-même sur la ligne après le contrôle RadioButtonList.
Cliquez sur le contrôle Button. Dans le volet Propriétés , tapez Envoyer dans la propriété Text .
Basculez vers l’affichage HTML et ajoutez la directive suivante @OutputCache en haut de la page :
```
<%@ OutputCache Duration="60" VaryByParam="none" VaryByControl="MyRadioButtonList"%>
```
Cliquez avec le bouton droit sur le fichier .ascx , puis cliquez sur Afficher le code pour afficher la source de la page code-behind.

Ajoutez le code suivant à l’événement Page_Load , qui définit la propriété de l’étiquette CacheEntryTimeText :

private void Page_Load(object sender, System.EventArgs e)
{
    CacheEntryTime.Text = "FragmentCtrl2: " + DateTime.Now.TimeOfDay.ToString();
}

Créer le formulaire web pour contenir les contrôles utilisateur

Vous pouvez maintenant créer le formulaire web (.aspx) pour contenir le contrôle utilisateur nouvellement développé. Pour créer le formulaire web, procédez comme suit :

Ajoutez un nouveau formulaire web nommé FragmentCaching.aspx à votre projet dans Visual Studio .NET comme suit :
1. Dans Explorateur de solutions, cliquez avec le bouton droit sur le nœud du projet, pointez sur Ajouter, puis cliquez sur Ajouter un formulaire web.
2. Nommez le web Form FragmentCaching.aspx, puis cliquez sur Ouvrir.
Vérifiez que l’onglet Création est sélectionné. Cliquez sur un contrôle Étiquette de formulaire web et faites-le glisser à partir de la section Web Forms de la boîte à outils, puis déposez-le sur la page.
Cliquez sur le contrôle Label. Dans le volet Propriétés , tapez Time dans la propriété ID et laissez la propriété Text vide.
Positionnez le curseur directement après le contrôle Label, puis appuyez sur Entrée pour passer à la ligne suivante de la page.
Faites glisser FragmentCtrl1.ascx, puis déposez-le sur le formulaire web afin qu’il soit positionné après le contrôle Label sur une ligne. Positionnez le curseur directement après le contrôle, puis appuyez sur Entrée pour passer à la ligne suivante dans la page.
Faites glisser FragmentCtrl2.ascx et déposez-le sur le formulaire web afin qu’il soit positionné après FragmentCtrl1.ascx sur une ligne.

En mode HTML , le formulaire web doit ressembler au code suivant :

<%@ Page language ="c#" Codebehind="FragmentCaching.aspx.cs"
   AutoEventWireup="false" Inherits="FragmentCache.FragmentCaching" %>
<%@ Register TagPrefix="uc1" TagName="FragmentCtrl1" Src="FragmentCtrl1.ascx" %>
<%@ Register TagPrefix="uc1" TagName="FragmentCtrl2" Src="FragmentCtrl2.ascx" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
   <HEAD>
      <meta name="GENERATOR" Content="Microsoft Visual Studio 7.0">
      <meta name="CODE_LANGUAGE" Content="C#">
      <meta name="vs_defaultClientScript" content="JavaScript (ECMAScript)">
      <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
   </HEAD>
   <body>
      <form id="FragmentCaching" method="post" runat="server">
         <P>
            WebForm Time:
            <asp:Label id="Time" runat="server" ForeColor="Blue"></asp:Label>
         </P>
         <P>
            <uc1:FragmentCtrl1 id="FragmentCtrl11" runat="server">
            </uc1:FragmentCtrl1>
         </P>
         <P>
            <uc1:FragmentCtrl2 id="FragmentCtrl21" runat="server">
            </uc1:FragmentCtrl2>
         </P>
      </form>
   </body>
</HTML>

Remarque

Assurez-vous que les contrôles sont placés à l’intérieur du

Cliquez avec le bouton droit sur le fichier .aspx , puis cliquez sur Afficher le code pour afficher la source de la page code-behind.

Ajoutez le code suivant à l’événement Page_Load , qui définit la propriété de l’étiquette TimeText :

private void Page_Load(object sender, System.EventArgs e)
{
    Time.Text = "WebFormTime: " + DateTime.Now.TimeOfDay.ToString();
}

Dans le menu Fichier , cliquez sur Enregistrer tout pour enregistrer les contrôles utilisateur, le formulaire web et les autres fichiers projet associés.
Dans le menu Générer de l’environnement de développement intégré (IDE) Visual Studio .NET , cliquez sur Générer pour générer le projet.

Exécution de l’exemple

Cette section montre comment afficher le code au moment de l’exécution pour observer le comportement de mise en cache, puis décrit brièvement pourquoi le code fonctionne comme il le fait.

Dans la Explorateur de solutions de l’IDE Visual Studio .NET, cliquez avec le bouton droit sur le formulaire web FragmentCaching.aspx, puis cliquez sur Afficher dans le navigateur pour exécuter le code.
Une fois la page affichée dans le navigateur, cliquez avec le bouton droit sur la page, puis cliquez sur Actualiser pour actualiser la page. Vous pouvez également appuyer sur la touche F5 pour actualiser la page si vous affichez la page dans un navigateur externe à l’IDE Visual Studio .NET.

Remarque

L’heure sur le formulaire web a été mise à jour, mais les contrôles utilisateur affichent toujours l’heure à laquelle l’entrée de cache associée a été effectuée.
Dans le deuxième contrôle, cliquez sur Envoyer. Notez que le contrôle affiche une heure mise à jour. Cela est en réponse au paramètre d’attribut VaryByControl pour le contrôle utilisateur qui fait référence au contrôle RadioButtonList.
Cliquez sur Non, puis sur Envoyer à nouveau.

Remarque

L’heure est à nouveau mise à jour dans l’affichage du contrôle utilisateur. Cela est dû au fait qu’une nouvelle entrée de cache est effectuée pour le contrôle en fonction de ce paramètre Aucune valeur. Répétez cette étape, sauf avec l’option Peut-être . Vous voyez le même comportement.
Cliquez sur Oui, puis sur Envoyer à nouveau. Répétez cette opération avec les options Non et Peut-être .

Ces sélections pour le contrôle sont mises en cache et affichent l’heure d’entrée du cache précédente. Si vous continuez à cliquer sur Envoyer après le paramètre de durée de la directive @ OutputCache , l’heure du contrôle utilisateur est mise à jour pour chaque sélection de valeur spécifique pour le contrôle RadioButtonList.