Virtual Happy Hour this month, Jun 28, we'll be getting a sneak preview at our soon to launch SaaS CMS!

Try our conversational search powered by Generative AI!

MartinOttosen
Mar 20, 2023
  1833
(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
Remove a segment from the URL in CMS 12

Problem : I have created thousands of pages dynamically using schedule jobs with different templates (e.g. one column, two columns, etc..) and stor...

Sanjay Kumar | Jun 21, 2024

Copying property values part 2

After publishing my last article about copying property values to other language versions, I received constructive feedback on how could I change t...

Grzegorz Wiecheć | Jun 18, 2024 | Syndicated blog

Enhancing online shopping through Optimizely's personalized product recommendations

In this blog, I have summarized my experience of using and learning product recommendation feature of Optimizely Personalization Artificial...

Hetaxi | Jun 18, 2024

New Series: Building a .NET Core headless site on Optimizely Graph and SaaS CMS

Welcome to this new multi-post series where you can follow along as I indulge in yet another crazy experiment: Can we make our beloved Alloy site r...

Allan Thraen | Jun 14, 2024 | Syndicated blog