Si vous êtes développeur .NET et nouveau dans Optimizely CMS 12 ou en transition depuis une version antérieure, ce guide vous aidera à comprendre le patron MVC qui alimente le rendu de contenu dans Optimizely. Vous apprendrez comment créer des types de pages, connecter des contrôleurs, construire des vues et éviter les pièges courants qui peuvent faire dérailler vos premières tentatives.

Prérequis

Avant de commencer à construire des contrôleurs et des vues dans Optimizely CMS, assurez-vous d'avoir :

• Visual Studio 2022 ou plus récent avec la charge de travail ASP.NET et développement web installée
• SDK .NET 6 ou .NET 8 (Optimizely CMS 12 requiert .NET 6 minimum)
• Un projet Optimizely CMS 12 déjà configuré (vous pouvez utiliser le site démo Alloy comme point de départ)
• Des connaissances de base en C# et concepts ASP.NET Core MVC
• Accès à l'interface d'administration du CMS (généralement à `/episerver/cms` après connexion)
• Une licence Optimizely valide dans le dossier racine de votre projet sous le nom `License.config`

Implémentation étape par étape

Étape 1 : Créer votre modèle de type de page

Commencez par définir un type de page dans votre dossier `/Models/Pages`. Cette classe C# indique à Optimizely ce que les éditeurs de contenu peuvent ajouter à ce type de page.

using EPiServer.Core;
using EPiServer.DataAnnotations;
using System.ComponentModel.DataAnnotations;

namespace YourProject.Models.Pages
{
    [ContentType(
        DisplayName = "Article Page", 
        GUID = "a8fe12d3-b418-4e6b-9c25-7834f9e2a651",
        Description = "Use this page type for articles and blog posts")]
    public class ArticlePage : PageData
    {
        [CultureSpecific]
        [Display(
            Name = "Article Heading",
            Description = "The main heading displayed at the top of the article",
            GroupName = SystemTabNames.Content,
            Order = 100)]
        public virtual string Heading { get; set; }

        [CultureSpecific]
        [Display(
            Name = "Article Body",
            Description = "The main content of your article",
            GroupName = SystemTabNames.Content,
            Order = 200)]
        public virtual XhtmlString MainBody { get; set; }

        [Display(
            Name = "Author Name",
            Description = "Who wrote this article",
            GroupName = SystemTabNames.Content,
            Order = 300)]
        public virtual string AuthorName { get; set; }

        [Display(
            Name = "Publish Date",
            Description = "When this article was published",
            GroupName = SystemTabNames.Content,
            Order = 400)]
        public virtual DateTime? PublishDate { get; set; }
    }
}

Points clés concernant ce code :

• Le `GUID` doit être unique dans tout votre projet
• Les propriétés doivent être `virtual` pour que la génération de proxy d'Optimizely fonctionne
• `CultureSpecific` permet d'avoir du contenu différent pour différentes langues
• Le paramètre `Order` contrôle la séquence dans l'interface de l'éditeur

Étape 2 : Construire votre contrôleur

Créez un contrôleur dans le dossier `/Controllers` qui gère les requêtes pour votre type de page :

using EPiServer.Web.Mvc;
using Microsoft.AspNetCore.Mvc;
using YourProject.Models.Pages;

namespace YourProject.Controllers
{
    public class ArticlePageController : PageController
    {
        public IActionResult Index(ArticlePage currentPage)
        {
            // Add any business logic here
            // For example, format the publish date
            if (currentPage.PublishDate == null)
            {
                currentPage.PublishDate = DateTime.Now;
            }

            // You can add ViewBag data if needed
            ViewBag.ReadingTime = CalculateReadingTime(currentPage.MainBody);
            
            return View(currentPage);
        }

        private int CalculateReadingTime(XhtmlString content)
        {
            if (content == null) return 0;
            
            var plainText = content.ToHtmlString();
            var wordCount = plainText.Split(' ').Length;
            return Math.Max(1, wordCount / 200); // Assuming 200 words per minute
        }
    }
}

Le nom du contrôleur doit suivre le patron `{NomDuTypeDePage}Controller`. Optimizely utilise cette convention de nommage pour acheminer automatiquement les requêtes vers le bon contrôleur.

Étape 3 : Créer votre vue

Ajoutez une vue à `/Views/ArticlePage/Index.cshtml` :

@model YourProject.Models.Pages.ArticlePage
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
        
@Model.Heading
        @if (!string.IsNullOrEmpty(Model.AuthorName))
        {
                By @Model.AuthorName
                @if (Model.PublishDate.HasValue)
                { @Model.PublishDate.Value.ToString("MMMM d, yyyy") }
                @if (ViewBag.ReadingTime > 0)
                { @ViewBag.ReadingTime min read }
        }
        @Html.PropertyFor(m => m.MainBody)

Remarquez l'utilisation de `@Html.PropertyFor()` pour la propriété MainBody. Cet assistant active l'édition sur la page dans l'interface CMS, permettant aux éditeurs de cliquer directement sur le contenu pour le modifier.

Étape 4 : Enregistrer et compiler votre projet

Après avoir créé ces fichiers, compilez votre projet dans Visual Studio. S'il n'y a pas d'erreurs de compilation, votre type de page devrait maintenant être disponible dans le CMS.

Étape 5 : Tester votre implémentation

• Exécutez votre projet et naviguez vers l'interface d'administration du CMS
• Créez une nouvelle page en utilisant le type « Article Page » que vous venez de construire
• Remplissez les champs de contenu - ajoutez un titre, du texte, un nom d'auteur et une date de publication
• Sauvegardez et publiez la page
• Visualisez la page publiée pour voir votre contrôleur et votre vue en action

Étape 6 : Ajouter un modèle de vue pour les scénarios complexes

Quand vous devez transmettre des données supplémentaires au-delà du modèle de page, créez un modèle de vue :

namespace YourProject.Models.ViewModels
{
    public class ArticlePageViewModel
    {
        public ArticlePage CurrentPage { get; set; }
        public IEnumerable RelatedArticles { get; set; }
        public string Category { get; set; }
        public int CommentCount { get; set; }
    }
}

Mettez à jour votre contrôleur pour utiliser le modèle de vue :

public class ArticlePageController : PageController
{
    private readonly IContentLoader _contentLoader;
    
    public ArticlePageController(IContentLoader contentLoader)
    {
        _contentLoader = contentLoader;
    }
    
    public IActionResult Index(ArticlePage currentPage)
    {
        var model = new ArticlePageViewModel
        {
            CurrentPage = currentPage,
            RelatedArticles = GetRelatedArticles(currentPage),
            Category = DetermineCategory(currentPage),
            CommentCount = GetCommentCount(currentPage.ContentLink.ID)
        };
        
        return View(model);
    }
    
    private IEnumerable GetRelatedArticles(ArticlePage current)
    {
        // Implementation to fetch related articles
        return Enumerable.Empty();
    }
    
    private string DetermineCategory(ArticlePage page)
    {
        // Logic to determine article category
        return "Technology";
    }
    
    private int GetCommentCount(int pageId)
    {
        // Fetch comment count from your data source
        return 0;
    }
}

Et mettez à jour votre vue pour utiliser le modèle de vue :

@model YourProject.Models.ViewModels.ArticlePageViewModel
@Model.CurrentPage.Heading
@Model.Category
@Html.PropertyFor(m => m.CurrentPage.MainBody)
@if (Model.RelatedArticles.Any()) {
  Related Articles
  @foreach (var article in Model.RelatedArticles)
  {
    @article.Heading
  }
}
@Model.CommentCount comments

Erreurs courantes à éviter

1. Conventions de nommage incorrectes

Le problème le plus fréquent que rencontrent les développeurs est le nommage inadéquat. Votre contrôleur doit être nommé exactement `{NomDuTypeDePage}Controller`. Si votre type de page est `ArticlePage`, le contrôleur doit être `ArticlePageController`, et non `ArticleController` ou `ArticlePageViewController`.

2. Mots-clés Virtual manquants

Les propriétés dans votre modèle de type de page doivent être marquées comme `virtual`. Sans cela, Optimizely ne peut pas créer de proxys pour vos propriétés :

// Incorrect
public string Heading { get; set; }

// Correct
public virtual string Heading { get; set; }

3. Problèmes d'emplacement de vue

Les vues doivent être placées dans la bonne structure de dossiers. Pour un `ArticlePage`, la vue devrait être à `/Views/ArticlePage/Index.cshtml`, pas `/Views/Articles/Index.cshtml` ou `/Views/Shared/ArticlePage.cshtml`.

4. Oublier l'assistant PropertyFor

Utiliser les assistants HTML standards au lieu du `PropertyFor` d'Optimizely désactive l'édition sur la page :

@Model.MainBody



@Html.PropertyFor(m => m.MainBody)

5. Ne pas gérer les valeurs nulles

Notre expérience montre qu'oublier de vérifier les valeurs nulles est une source courante d'erreurs d'exécution. Validez toujours les propriétés optionnelles avant de les utiliser :

// Risqué
var wordCount = currentPage.MainBody.ToHtmlString().Split(' ').Length;

// Sécuritaire
var wordCount = 0;
if (currentPage.MainBody != null && !string.IsNullOrEmpty(currentPage.MainBody.ToHtmlString()))
{
    wordCount = currentPage.MainBody.ToHtmlString().Split(' ').Length;
}

6. Ignorer l'injection de dépendances

Optimizely CMS 12 prend en charge pleinement l'injection de dépendances. Ne créez pas d'instances de services manuellement dans vos contrôleurs :

// Incorrect
public IActionResult Index(ArticlePage currentPage)
{
    var contentLoader = new ContentLoader(); // Ne faites pas ça
}

// Correct
private readonly IContentLoader _contentLoader;

public ArticlePageController(IContentLoader contentLoader)
{
    _contentLoader = contentLoader;
}

Étapes de test et de vérification

Étape 1 : Vérifier l'enregistrement du type de page

Après avoir compilé votre projet, vérifiez que votre type de page apparaît dans le CMS :

• Connectez-vous à l'interface d'administration du CMS
• Cliquez sur « Créer une nouvelle page »
• Votre « Article Page » devrait apparaître dans la liste des types de pages disponibles

Étape 2 : Tester la création de contenu

Créez une page de test avec votre nouveau type de page :

• Remplissez tous les champs avec des données d'exemple
• Sauvegardez la page (ne publiez pas encore)
• Prévisualisez la page pour vérifier le rendu
• Vérifiez que toutes les propriétés s'affichent correctement

Étape 3 : Valider l'édition sur la page

• Naviguez vers votre page publiée tout en étant connecté au CMS
• Survolez les zones de contenu marquées avec `PropertyFor`
• Vérifiez que les boutons d'édition apparaissent
• Cliquez pour éditer et assurez-vous que les changements s'enregistrent correctement

Étape 4 : Vérifier la gestion des erreurs

Testez votre page avec des cas limites :

• Créez une page avec un contenu minimal (seulement les champs requis)
• Laissez les champs optionnels vides
• Ajoutez du contenu très long dans les champs texte
• Testez avec des caractères spéciaux dans les champs texte

Étape 5 : Vérification de la performance

Nous avons constaté que le temps de chargement des pages est crucial pour l'expérience utilisateur. Testez votre implémentation :

• Utilisez les outils de développement du navigateur pour vérifier le temps de chargement
• Vérifiez qu'aucun appel inutile à la base de données n'est effectué
• Assurez-vous que les modèles de vue ne récupèrent pas plus de données que nécessaire
• Surveillez l'utilisation de la mémoire pendant le rendu de la page

Meilleures pratiques et recommandations

Utiliser des dossiers de fonctionnalités

Au lieu de séparer les modèles, vues et contrôleurs dans différents dossiers racine, considérez une organisation par fonctionnalité :

/Features
  /ArticlePage
    ArticlePage.cs
    ArticlePageController.cs
    Index.cshtml
  /ProductPage
    ProductPage.cs
    ProductPageController.cs
    Index.cshtml

Implémenter la mise en cache de manière stratégique

Ajoutez la mise en cache de sortie pour améliorer la performance :

[ResponseCache(Duration = 600, VaryByQueryKeys = new[] { "category", "page" })]
public IActionResult Index(ArticlePage currentPage)
{
    // Controller logic
}

Créer des classes de base pour les fonctionnalités communes

Construisez un type de page de base pour les propriétés partagées :

public abstract class SitePageData : PageData
{
    public virtual string MetaDescription { get; set; }
    public virtual string MetaKeywords { get; set; }
    public virtual bool HideFromSearch { get; set; }
}

public class ArticlePage : SitePageData
{
    // Article-specific properties
}

Utiliser une configuration fortement typée

Définissez les paramètres de manière fortement typée :

public class ArticleSettings
{
    public int MaxRelatedArticles { get; set; } = 5;
    public bool EnableComments { get; set; } = true;
    public int PreviewLength { get; set; } = 200;
}

Conclusion

Construire des contrôleurs et des vues dans Optimizely CMS suit les patrons familiers d'ASP.NET Core, mais nécessite une attention aux conventions de nommage et aux assistants spécifiques à Optimizely. Commencez avec des types de pages simples et ajoutez graduellement de la complexité avec des modèles de vue et l'injection de dépendances au fur et à mesure que vos besoins évoluent.

La clé du succès est de comprendre la relation entre les types de pages, les contrôleurs et les vues. Une fois que vous saisissez comment Optimizely achemine les requêtes selon les conventions de nommage et comment l'assistant `PropertyFor` active l'édition, vous pouvez construire des expériences de contenu sophistiquées.

Le travail d'équipe nous a appris que les implémentations Optimizely les plus réussies commencent simplement et évoluent par itération. N'essayez pas de construire des modèles de vue complexes et une logique de contrôleur élaborée à votre première tentative. Faites fonctionner une page de base, testez-la en profondeur, puis ajoutez des fonctionnalités progressivement.

Besoin d'aide pour implémenter des types de pages et contrôleurs personnalisés dans Optimizely CMS? Si vous planifiez une architecture de contenu qui nécessite une logique de rendu spécifique ou des modèles de vue complexes, nous pouvons vous aider à concevoir une structure maintenable qui évolue avec vos besoins de contenu. Notre équipe peut examiner vos exigences et suggérer des patrons d'implémentation qui s'alignent avec les meilleures pratiques d'Optimizely tout en répondant à vos objectifs d'affaires spécifiques.