How To Access Umbraco CMS Content Within A View

In this tutorial, you will learn how to render Umbraco CMS content within a view. In Umbraco speak, we call an MVC view a template. In this tutorial, we will focus on rendering data within a view/template, however, this is not the only approach. If you want to follow best practices, I recommend you implement route hijacking and perform all data access within a controller. Some people might want to render data in a view and if you fall into this camp, this tutorial is for you 🔥🔥🔥

In order to render data in a view, you need to know about HTML helper. HTML helpers are the way to render dynamic content within a view. The code to do this is shown below:

The above snippet will render the correct HTML for an anchor tag. In the same vein, Umbraco provides us with an HTML helper to display and format data from the CMS itself. To access the Umbraco HTML helper in your Razor view is fairly straightforward. You need to make sure you are inheriting the view from UmbracoTemplatePage. This is done using this code:

To access the helper you use @Umbraco. in code. After typing the dot (.), IntelliSense should pop up and show you all the methods the API exposes. Some examples of the these features include TypedMedia(), Content(), ContentAtRoot() and Media(). More information on this can be found here

To help your understanding, let us look at two examples. To query the CMS for an image, you can use this code:

In example two, we will truncate a string:

Getting Data About The Current Page

Within a view you also have access to two other modifiers, @Model and @CurrentPage:

@Current is a dynamic helper. Dynamic objects that expose members at run time rather than compile time. This means Intellisense will not work when you use this helper. @Current is flexible so you can use it on any document type and render any property. The caveat is that you will need to know the property and method name contained on a document type. In the example above I needed to manually add the property name Copyright. If I spelt this wrong, the page would not render the property. As we have no Intellisense, the only way to know the code was wrong was by running the site 😊

@model exposes the Umbraco helper and it provides strongly typed features. This means that you can use IntelliSense with @model and you can easily write Linq queries against it. These two things are pretty useful, which is why I recommend you use @Model

That is pretty much everything you need to master in order to render data in a view. Happy Coding 🤘