Skip and go to main content

Design & Technology June 29, 2012

Razor Templating in SDL Tridion 2011

Image

SDL Tridion introduced the concept of Modular Templating as a modern alternative to VB Scripting in version 5.3, a key concept of which is that of “Mediators”, or templating engines. Although Tridion ships with just a single Mediator – Dreamweaver, Modular Templating is a pluggable framework and custom Mediators can be created.

Even though Dreamweaver Templates are easy to create, they are not very developer-friendly as they have a very limited syntax which often results in having to create custom TBB’s and code fragments to do what should be straightforward tasks. They can also become unnecessarily difficult to read as templates increase in complexity. Other than the XSLT Mediator (another marmite technology) there haven’t been many other templating options out there.

Razor

The Razor view engine was originally introduced as part of ASP.NET MVC 3 and Web Pages as a replacement for classic “.aspx” style markup, and has since gained widespread popularity due to having such a simple, yet powerful syntax. Razor files have a “cshtml” extension (or vbhtml if you’re using VB.NET).

The success of Razor has made it an ideal candidate for a custom Mediator, and thanks to great work by Alexander Klock one is now available on SDL Tridion World. This is being actively developed and has recently seen a 1.2 release with many enhancements (including support for importing other Razor files), and 1.3 is already in the works.

Show me some code

Here is a typical Dreamweaver TBB, with the noisy syntax that you know and love:

And here is the Razor equivalent:

Even though this is a simple example, hopefully you’ll agree that the Razor version is much more elegant. It also illustrates the power of C# over Dreamweaver, which doesn’t have any concept of an “else” condition.

In the DWT you would also have to add a TBB to add the thumbnail Components to the Package. This isn’t necessary in the Razor template – any content that can be reached by following Component Links or the Page / Structure Group hierarchy can be accessed from within your template with no extra effort required, so you could do something like this if you really wanted to:

Razor also allows us to add inline scripting:

Modular Templating is an incredibly powerful feature, however because of Dreamweavers limitations developers often have to write custom TBB’s to do tasks that feel like they should be trivial – whether it’s fetching Component and Metadata links or even something as simple as displaying a property using custom date and time format.

None of this is necessary when using Razor – C# code that is processed at publication time can be added directly to templates, either inline or into helper methods and functions.

Code reuse with helpers and functions

Razor helpers and functions allow you to extract common functionality in your Page and Component Templates into reusable code:

If you’re new to Razor, helpers are reusable methods have no return value and simply output markup. Functions can basically be thought of as utility methods. On a standard ASP.NET site, helpers and functions can either be declared inline (as in the above example) or placed in the App_Code directory where they then become available to all templates. In Tridion they can be added as Code Components and imported by WebDav path or TCM ID in any template that requires them:

To do this, you need to add the MTSUser as an impersonation account, which you may not want to do for security reasons. Fortunately CSHTML files can also simply be deployed anywhere on the Content Management server and included by specifying the path to the file.

We find this is an equally good approach it allows us to store the CSHTML files in source control and deploy through TeamCity.

Even better, to save having to add import directives to all your Razor templates, common includes can be added to the Razor section that gets added to the Tridion configuration file during installation:

Below is a really simple helper for handling Component links with options for specifying a custom class and thumbnail image:

Using C# 4.0’s optional and named parameter syntax makes the helper usage very easy to read. Some examples of how to call this are shown below:

Image

Some Other Advantages of using the Razor Mediator

Razor generates only the HTML markup you create. So gone are the large chunks of whitespace you get when using DWT’s.

Razor templates are compiled when you attempt to save them in the Tridion UI, providing instant feedback and meaningful error messages.

The fact that you no longer need to add custom TBB’s to do things that can now be done directly in Razor can make publishing and previewing pages a lot faster.

The Mediator ships with some very handy built in functions, such as IsFirst, IsLast, and Index.

Because you have the power of C# at your fingertips directly in your templates, you can do things like create nested repeating blocks without losing access to your outer Component’s or loop counter.

Another cool feature is that you can add logging statements directly to Razor TBB’s, e.g.:

The Razor Mediator has lots of useful built in methods. One that I really like is “GetComponentPresentationsByTemplate”:

Or you can just do:

This is just scratching the surface – have a look at the documentation on the Razor Mediator for Tridion site to see everything that’s possible.

Disadvantages of using the Razor Mediator

I’ve been struggling to think of instances where the Razor Mediator is more awkward to use than DWT’s, and the only thing I can think of so far is that you have to be a bit careful when using Razor to output C# code. Here’s a simple example:

As you can see, it’s difficult to tell at a glance where the Razor templating ends and the C# output begins. I’ve had to wrap some output in a “text” element, which explicitly tells Razor to interpret this as content. If you’re using Razor to generate a lot of code then it may not be the best fit.

Of course it’s possible to mix and match different Mediators, so you can still fall back onto DWT’s for certain Templates where appropriate.

Final thoughts

We’re all really impressed with the Razor Mediator so far. Although I love the Razor view engine, I approached it with some trepidation as it’s a fairly new, unofficial product. It’s proved very stable however, and also has a proper installer that makes it really simple to set up and configure.

I firmly believe that the Razor Mediator will make Tridion development more enjoyable for .NET developers. Tridion is a very powerful product, but the Dreamweaver Templating can be frustrating at times. In many ways, the Razor Mediator bridges the gap between Modular Templating and the old VB scripting approach, combining them with a more powerful language and giving developers the best features of both worlds.

My only concern now is that it’s going to be really hard to go back to “classic” DWT’s.

Questions? We are here to help!