MartinOttosen
Mar 20, 2023
  670
(4 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
Caching & Rendering of metadata from the DAM

For the EPiServer.Cms.WelcomeIntegration.UI 1.2.0 release, we have facilitated the ability to cache and render metadata from assets within the DAM....

Matthew Slim | Jun 2, 2023

Conversion Rate Optimization: Maximizing ROI through Data-Driven Decisions

In today's digital landscape, businesses are constantly looking for ways to improve their online presence and drive more conversions. One effective...

JessWade | Jun 1, 2023

Enhance Your Writing with Suggestions

Are you tired of staring at a blank screen, struggling to find the right words? The Epicweb.Optimizely.AIAssistant Addon is here to revolutionize...

Luc Gosso (MVP) | May 31, 2023 | Syndicated blog

Content Graph - Letting GraphQL do all the hard work for you

Background As we have seen before, setting up Content Graph on the CMS side is pretty easy. However, when it comes to the “head” part of the setup,...

Kunal Shetye | May 26, 2023 | Syndicated blog