Partager via

Ajout de contenu dynamique à une page mise en cache (C#)

  • Article

par Microsoft

Découvrez comment mélanger du contenu dynamique et mis en cache dans la même page. La substitution post-cache vous permet d’afficher du contenu dynamique, tel que des publicités de bannières ou des éléments d’actualité, dans une page qui a été mise en cache.

En tirant parti de la mise en cache de sortie, vous pouvez améliorer considérablement les performances d’une application MVC ASP.NET. Au lieu de régénérer une page chaque fois que la page est demandée, la page peut être générée une fois et mise en cache en mémoire pour plusieurs utilisateurs.

Mais il y a un problème. Que se passe-t-il si vous devez afficher du contenu dynamique dans la page ? Par exemple, imaginez que vous souhaitez afficher une bannière publicitaire dans la page. Vous ne souhaitez pas que la publicité de bannière soit mise en cache afin que chaque utilisateur voit la même publicité. Vous ne gagneriez pas d’argent comme ça !

Heureusement, il existe une solution facile. Vous pouvez tirer parti d’une fonctionnalité de l’infrastructure ASP.NET appelée substitution post-cache. La substitution post-cache vous permet de remplacer le contenu dynamique d’une page qui a été mise en cache en mémoire.

Normalement, lorsque vous mettez en cache une page à l’aide de l’attribut [OutputCache], la page est mise en cache à la fois sur le serveur et le client (le navigateur web). Lorsque vous utilisez la substitution post-cache, une page est mise en cache uniquement sur le serveur.

Utilisation de la substitution post-cache

L’utilisation de la substitution post-cache nécessite deux étapes. Tout d’abord, vous devez définir une méthode qui retourne une chaîne qui représente le contenu dynamique que vous souhaitez afficher dans la page mise en cache. Ensuite, vous appelez la méthode HttpResponse.WriteSubstitution() pour injecter le contenu dynamique dans la page.

Imaginez, par exemple, que vous souhaitiez afficher de manière aléatoire différents éléments d’actualité dans une page mise en cache. La classe de la liste 1 expose une méthode unique, nommée RenderNews(), qui retourne aléatoirement un élément d’actualité à partir d’une liste de trois actualités.

Listing 1 – Models\News.cs

using System;
using System.Collections.Generic;
using System.Web;

namespace MvcApplication1.Models
{
    public class News
    {
        public static string RenderNews(HttpContext context)
        {
            var news = new List<string> 
                { 
                    "Gas prices go up!", 
                    "Life discovered on Mars!", 
                    "Moon disappears!" 
                };
            
            var rnd = new Random();
            return news[rnd.Next(news.Count)];
        }
    }
}

Pour tirer parti de la substitution post-cache, vous appelez la méthode HttpResponse.WriteSubstitution(). La méthode WriteSubstitution() configure le code pour remplacer une région de la page mise en cache par du contenu dynamique. La méthode WriteSubstitution() est utilisée pour afficher l’élément d’actualité aléatoire dans la vue de la liste 2.

Liste 2 – Views\Home\Index.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MvcApplication1.Views.Home.Index" %>
<%@ Import Namespace="MvcApplication1.Models" %>
<!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>Index</title>
</head>
<body>
    <div>

    <% Response.WriteSubstitution(News.RenderNews); %>
        
    <hr />
    
    The content of this page is output cached.
    <%= DateTime.Now %>

    </div>
</body>
</html>

La méthode RenderNews est passée à la méthode WriteSubstitution(). Notez que la méthode RenderNews n’est pas appelée (il n’y a pas de parenthèses). Au lieu de cela, une référence à la méthode est passée à WriteSubstitution().

La vue Index est mise en cache. La vue est retournée par le contrôleur dans la liste 3. Notez que l’action Index() est décorée avec un attribut [OutputCache] qui entraîne la mise en cache de la vue Index pendant 60 secondes.

Liste 3 – Controllers\HomeController.cs

using System.Web.Mvc;

namespace MvcApplication1.Controllers
{
    [HandleError]
    public class HomeController : Controller
    {
        [OutputCache(Duration=60, VaryByParam="none")]
        public ActionResult Index()
        {
            return View();
        }
    }
}

Même si la vue Index est mise en cache, différents éléments d’actualités aléatoires s’affichent lorsque vous demandez la page Index. Lorsque vous demandez la page Index, l’heure affichée par la page ne change pas pendant 60 secondes (voir figure 1). Le fait que l’heure ne change pas prouve que la page est mise en cache. Toutefois, le contenu injecté par la méthode WriteSubstitution() (l’élément d’actualité aléatoire) change à chaque requête .

Figure 1 : Injection d’éléments d’actualités dynamiques dans une page mise en cache

clip_image002

Utilisation de la substitution post-cache dans les méthodes d’assistance

Un moyen plus simple de tirer parti de la substitution post-cache consiste à encapsuler l’appel à la méthode WriteSubstitution() dans une méthode d’assistance personnalisée. Cette approche est illustrée par la méthode d’assistance dans listing 4.

Référencement 4 – AdHelper.cs

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.Mvc;

namespace MvcApplication1.Helpers
{
    public static class AdHelper
    {
        public static void RenderBanner(this HtmlHelper helper)
        {
            var context = helper.ViewContext.HttpContext;
            context.Response.WriteSubstitution(RenderBannerInternal);
        }
        
        private static string RenderBannerInternal(HttpContext context)
        {
            var ads = new List<string> 
                { 
                    "/ads/banner1.gif", 
                    "/ads/banner2.gif", 
                    "/ads/banner3.gif" 
                };

            var rnd = new Random();
            var ad = ads[rnd.Next(ads.Count)];
            return String.Format("<img src='{0}' />", ad);
        }
    }
}

La liste 4 contient une classe statique qui expose deux méthodes : RenderBanner() et RenderBannerInternal(). La méthode RenderBanner() représente la méthode d’assistance réelle. Cette méthode étend la classe HtmlHelper standard ASP.NET MVC afin que vous puissiez appeler Html.RenderBanner() dans une vue comme n’importe quelle autre méthode d’assistance.

La méthode RenderBanner() appelle la méthode HttpResponse.WriteSubstitution() en passant la méthode RenderBannerInternal() à la méthode WriteSubstitution().

La méthode RenderBannerInternal() est une méthode privée. Cette méthode ne sera pas exposée en tant que méthode d’assistance. La méthode RenderBannerInternal() retourne aléatoirement une image de publicité de bannière à partir d’une liste de trois images publicitaires de bannière.

La vue Index modifiée dans la liste 5 illustre comment utiliser la méthode d’assistance RenderBanner(). Notez qu’une directive %@ Import %> supplémentaire <est incluse en haut de la vue pour importer l’espace de noms MvcApplication1.Helpers. Si vous négligez d’importer cet espace de noms, la méthode RenderBanner() n’apparaîtra pas en tant que méthode sur la propriété Html.

Listing 5 – Views\Home\Index.aspx (avec la méthode RenderBanner() )

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MvcApplication1.Views.Home.Index" %>
<%@ Import Namespace="MvcApplication1.Models" %>
<%@ Import Namespace="MvcApplication1.Helpers" %>
<!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>Index</title>
</head>
<body>
    <div>

    <% Response.WriteSubstitution(News.RenderNews); %>
    
    <hr />
    
    <% Html.RenderBanner(); %>
    
    <hr />
    
    The content of this page is output cached.
    <%= DateTime.Now %>

    </div>
</body>
</html>

Lorsque vous demandez la page rendue par la vue dans la liste 5, une bannière publicitaire différente s’affiche avec chaque requête (voir figure 2). La page est mise en cache, mais la bannière publicitaire est injectée dynamiquement par la méthode d’assistance RenderBanner().

Figure 2 : Affichage Index affichant une publicité de bannière aléatoire

clip_image004

Résumé

Ce tutoriel explique comment mettre à jour dynamiquement le contenu d’une page mise en cache. Vous avez appris à utiliser la méthode HttpResponse.WriteSubstitution() pour permettre l’injection de contenu dynamique dans une page mise en cache. Vous avez également appris à encapsuler l’appel à la méthode WriteSubstitution() dans une méthode d’assistance HTML.

Tirez parti de la mise en cache chaque fois que cela est possible , ce qui peut avoir un impact considérable sur les performances de vos applications web. Comme expliqué dans ce tutoriel, vous pouvez tirer parti de la mise en cache même lorsque vous devez afficher du contenu dynamique dans vos pages.

PrécédentSuivant