Calling all developers! We invite you to provide your input on Feature Experimentation by completing this brief survey.

 

MartinOttosen
Mar 20, 2023
  2399
(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
Level Up with Optimizely's Newly Relaunched Certifications!

We're thrilled to announce the relaunch of our Optimizely Certifications—designed to help partners, customers, and developers redefine what it mean...

Satata Satez | Jan 14, 2025

Introducing AI Assistance for DBLocalizationProvider

The LocalizationProvider for Optimizely has long been a powerful tool for enhancing the localization capabilities of Optimizely CMS. Designed to ma...

Luc Gosso (MVP) | Jan 14, 2025 | Syndicated blog

Order tabs with drag and drop - Blazor

I have started to play around a little with Blazor and the best way to learn is to reimplement some old stuff for CMS12. So I took a look at my old...

Per Nergård | Jan 14, 2025

Product Recommendations - Common Pitfalls

With the added freedom and flexibility that the release of the self-service widgets feature for Product Recommendations provides you as...

Dylan Walker | Jan 14, 2025

My blog is now running using Optimizely CMS!

It's official! You are currently reading this post on my shiny new Optimizely CMS website.  In the past weeks, I have been quite busy crunching eve...

David Drouin-Prince | Jan 12, 2025 | Syndicated blog

Developer meetup - Manchester, 23rd January

Yes, it's that time of year again where tradition dictates that people reflect on the year gone by and brace themselves for the year ahead, and wha...

Paul Gruffydd | Jan 9, 2025