Try our conversational search powered by Generative AI!

MartinOttosen
Mar 20, 2023
  1762
(5 votes)

Tag Helpers in CMS 12

Microsoft introduced the TagHelper back in the primordial soup of ASP.NET vNext which became .Net 5, then .NET Core then .Net 5 you know the drill…

In the initial release of CMS 12 our focus was to bringing our HTML Helpers with us to make it easier to migrate from CMS 11, but Tag Helpers are neat, they help simplify razor code by promoting a more html-oriented syntax, and available in the new EPiServer.CMS.AspNetCore.TagHelpers package available on the nuget feed. The EPiServer.Templates package has also been updated to rely on Tag Helpers instead of HTML Helpers

Here is a quick lap around the updated alloy sample and new Tag Helpers:

First things first, we need the updated Alloy template. Using powershell or a terminal window:
dotnet new -i EPiServer.Templates

Then we need to create a new project in an appropriate folder using the Alloy template (still in powershell or similar):
dotnet new epi-alloy-mvc 

Here is a quick comparison of the razor implementation before / after Tag Helpers

Alloy StartPage with HTML Helpers
<div class="start">
    @Html.PropertyFor(x => x.CurrentPage.MainContentArea, new { CssClass = "row" })
</div>

Alloy Startpage with Tag Helpers
<div class="start">
    <div epi-property="@Model.CurrentPage.MainContentArea" class="row">
        <div epi-property-item class="block" epi-on-item-rendered="OnItemRendered" />
    </div>
</div>

So instead of the @Html.PropertyFor which magically generates a nested div structure for the content area + elements. The Tag Helper implementation is much more explicit, each content area item will be rendered in a div with class=block. The items will be contained in a single div with class=row.

If you prefer a list, you just change the markup as appropriate.
<div class="start">
    <ul epi-property="@Model.CurrentPage.MainContentArea">
        <li epi-property-item epi-on-item-rendered="OnItemRendered" />
    </ul>
</div> 

The “epi-property” attribute specifies which property to render. If the property is a content area, we can specify a template for rendering each content area item. Alternatively, if we are happy with the default output, we can be less specific:
<div class="start">
    <div epi-property="@Model.CurrentPage.MainContentArea" />
</div> 

Or we can specify a deeper html structure.
<div class="start">
    <div epi-property="@Model.CurrentPage.MainContentArea" class="row">
        <div class="children-class">
            <p class="grand-children-class">
                <a epi-property-item class="content-area-item" />
            </p>
        </div>
    </div>
</div>

There are a lot more details around the Optimizely Tag Helpers, and of course Tag Helpers in general. Hope you take it for a spin, and drop a comment if we missed something important 😊

Mar 20, 2023

Comments

Please login to comment.
Latest blogs
From Procrastination to Proficiency: Navigating Your Journey to Web Experimentation Certification

Hey there, Optimizely enthusiasts!   Join me in celebrating a milestone – I'm officially a certified web experimentation expert! It's an exhilarati...

Silvio Pacitto | May 17, 2024

GPT-4o Now Available for Optimizely via the AI-Assistant plugin!

I am excited to announce that GPT-4o is now available for Optimizely users through the Epicweb AI-Assistant integration. This means you can leverag...

Luc Gosso (MVP) | May 17, 2024 | Syndicated blog

The downside of being too fast

Today when I was tracking down some changes, I came across this commit comment Who wrote this? Me, almost 5 years ago. I did have a chuckle in my...

Quan Mai | May 17, 2024 | Syndicated blog

Optimizely Forms: Safeguarding Your Data

With the rise of cyber threats and privacy concerns, safeguarding sensitive information has become a top priority for businesses across all...

K Khan | May 16, 2024

The Experimentation Process

This blog is part of the series -   Unlocking the Power of Experimentation: A Marketer's Insight. Welcome back, to another insightful journey into...

Holly Quilter | May 16, 2024

Azure AI Language – Sentiment Analysis in Optimizely CMS

In the following article, I showcase how sentiment analysis, which is part of the Azure AI Language service, can be used to detect the sentiment of...

Anil Patel | May 15, 2024 | Syndicated blog