What is the Umbraco Helper?

In my last guide, I explained how to create a template in Umbraco.  For a quick re-cap, a template in Umbraco language is similar to a view in MVC, its the basic building block to display HTML and CSS on your Umbraco websites.  I mean, having a blank website would be very dull and would attract zero visitors.  So, the next piece of the Umbraco puzzle is how to display data from your Umbraco Document types in your templates to make them a bit more exciting.

The Umbraco Helper

In MVC we have Razor and HTML helpers to display information for us, so an example of an MVC HTML Helper would be:

@Html.ActionLink("About this Website", "About")

The above snippet will render the correct HTML for an anchor tag.  In the same vein, Umbraco provides us with an API for getting, displaying and formatting data from the CMS itself.

To access the Umbraco helper is fairly straight forward.  In your Razor view, you need to make sure you are inheriting from ‘UmbracoTemplatePage’

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
Layout = null;
}

To use the helper you just type, @Umbraco. After typing the dot, IntelliSense should pop-up showing you all the available options to you. Some examples of the type of things you can do with the helper, include

Get Typed Content

@Umbraco.TypedMedia(contentId)

Truncate String

@Umbraco.Truncate(Model.Content.GetPropertyValue("content"),200)

Getting data about the current page

Now we’ve covered the Umbraco helper, we still have two more tools in our arsenal, the @Model and the @CurrentPage.  Each will give you access to the current pages properties.  There seems to be a lot of confusion between the two. So let’s first start with the syntax:

@Model.Content.GetPropertyValue("Copyright")
@CurrentPage.Copyright

So, the first difference between the two is that @Current page is a dynamic object.  This means you have to type in the ‘Copyright’ bit yourself, IntelliSense will not work.. because well it’s dynamic. @model on the other hand, so it’s  strongly typed. This means that IntelliSense works and you can also write Linq against it.  These two things are pretty useful, so, in general, @Model is the preferred choice, even though the @CurrentPage has slightly shorter syntax.

In my next tutorial I will go over how to use your own Controller and View Models so you won’t have to manually type in your properties names.

Conclusion

In today’s guide we’ve covered how to display stuff in your templates.  First we have the Umbraco helper, this exposes a lot of functionality to get data from Umbraco, manipulate data etc… We also have @Current page, a dynamic object-based approach to get data about the current page and @model a strongly typed helper.

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

More Posts

2 replies

Trackbacks & Pingbacks

  1. […] from Umbraco and display it in Umbraco.  If you are new to Umbraco and you haven’t yet read the Umbraco Helper?  then I would head there […]

  2. […] I’ve mentioned in What is the Umbraco Helper?  When we work with Razor and our Views it’s best to use @Model to access the current page […]

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *