All the code snippets you need to get a jump start on building templates with Razor in Umbraco CMS.
Templating in Umbraco including inheriting from master template
Templating in Umbraco builds on the concept of Razor Views from ASP.NET MVC - if you already know this, then you are ready to create your first template - if not, this is a quick and handy guide.
By default, all document types should have a template attached - but in case you need an alternative template or a new one, you can create one:
Open the Settings section inside the Umbraco backoffice and right-click the Templates folder. Choose Create. Enter a template name and click the Save button. You will now see the default template markup in the backoffice template editor.
To use a template on a document, you must first allow it on the content's type. Open the Document Type you want to use the template, go to the Templates tab and select the template under the Allowed Templates section.
A template can inherit content from a master template by using the ASP.NET views Layout feature. Let's say we have a template called MasterView, containing the following HTML:
We then create a new template called textpage and in the template editor, click on the Master Template button and set its master template to the template called MasterView:
This changes the Layoutvalue in the template markup, so textpage looks like this:
When a page using the textpage template renders, the final HTML will be merged replacing the @renderBody() placeholder, and produce the following:
What's good to know, is that you are not limited to a single section. Template sections allow child templates that inherit the master layout template to insert HTML code up into the main layout template. For example, a child template inserting code into the <head> tag of the master template.
You can do this by using . Add named sections to your master template with the following code:
For instance, if you want to be able to add HTML to your <head> tags write:
By default, when rendering a named section, the section is not mandatory. To make the section mandatory, add true or enable Section is mandatory field in the Sections option.
On your child page template call @section Head {} and then type your markup that will be pushed into the Master Template:
Another way to reuse HTML is to use partial views - which are small reusable views that can be injected into another view.
Like templates, create a partial view, by right-clicking Partial Views and selecting Create. You can then either create an empty partial view or create a partial view from a snippet.
The created partial view can now be injected into any template by using the @Html.Partial() method like so:
Using named sections in Umbraco
Template sections support the ability to add additional Named Sections to layout templates. These sections can be defined anywhere in the layout file (including within the section of the HTML) and allow you to output dynamic content in your template.
You can define a part of your template as a named section by wrapping it in @section. This can be rendered in a specific area of the parent of this template, by using @RenderSection.
For example, you can define the following section within a child template like a Content page:
To define a Named Section, follow these steps:
Go to Settings.
Navigate to a template and click Sections.
Select Define a named section and enter the Section Name.
Renders a named area of a child template, by inserting a @RenderSection(name) placeholder. This renders an area of a child template that is wrapped in a corresponding @section [name] definition.
For example, you can define the following section within a Master template:
To render a Named Section, follow these steps:
Go to Settings.
Navigate to a template and click Sections.
Select Render a named section and enter the Section Name.
Click Submit.
[Optional] Select Section is mandatory. This means that the child templates need to have the named section defined for them to work.
Click Submit.
@section Contact
{
<div class="container">
<div class="row section">
<div class="col-md-9">
<p>@Model.AuthorName()</p>
</div>
</div>
</div>
}@RenderSection("Contact", false)@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage
@{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<body>
<h1>Hello world</h1>
@RenderBody()
</body>
</html>@inherits Umbraco.Web.Mvc.UmbracoViewPage
@{
Layout = "MasterView.cshtml";
}
<p>My content</p>@inherits Umbraco.Web.Mvc.UmbracoViewPage
@{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<body>
<h1>Hello world</h1>
<p>My content</p>
</body>
</html>@RenderSection("SectionName")@inherits Umbraco.Web.Mvc.UmbracoViewPage
@{
Layout = null;
}
<html>
<head>
<title>Title</title>
@RenderSection("Head")
</head>
<body>
</body>
</html>@RenderSection("Head", true)@section Head {
<style>
body {
background: #ff0000;
}
</style>
}@inherits Umbraco.Web.Mvc.UmbracoViewPage
@{
Layout = "MasterView.cshtml";
}
<h1>My new page</h1>
@Html.Partial("a-new-view")
How to perform common logical tasks in Razor like if/else, foreach loops, switch statements and using the @ character to separate code and markup
Shows how to perform common logical tasks in Razor like if/else, foreach loops, switch statements and using the @ character to separate code and markup.
The @ symbol is used in Razor to initiate code, and tell the compiler where to start interpreting code, instead of returning the content of the file as text. Using a single character for this separation, results in cleaner, compact code which is easier to read.
Commenting your code is important, use comments to explain what the code does. @* *@ indicates a comment, which will not be visible in the rendered output.
If/else statements perform one task if a condition is true, and another if the condition is not true
A foreach loop goes through a collection of items, typically a collection of pages and performs an action for each item
A Switch block is used when testing a large number of conditions
@* Writing a value inside a html element *@
<p>@Model.Name</p>
@* Inside an attribute *@
<a href="@Model.Url()">@Model.Name</a>
@* Using it to start logical structures *@
@if (selection?.Length > 0)
{
<ul>
@foreach (var item in selection)
{
<li>
<a href="@item.Url(PublishedUrlProvider)">@item.Name</a>
</li>
}
</ul>
}@* Here we check if the name is equal to foobar *@
@if (Model.Name == "foobar")
{
@foreach (var child in Model.Children)
{
@* here we write stuff for each child page *@
<p>write stuff</p>
}
}@if (Model.Name == "home")
{
<p>This is the homepage!</p>
}
@if (Model.NodeTypeAlias == "TextPage")
{
<p>This is a textpage</p>
}
else
{
<p>This is NOT a textpage</p>
}@foreach (var item in Model.Children)
{
<p>The item name is: @Item.Name</p>
}@switch (Model.WeekDay)
{
case "Monday":
"<p>It is Monday</p>";
break;
case "Tuesday":
"<p>It is Tuesday</p>";
break;
case "Wednesday":
"<p>It is Wednesday</p>";
break;
default:
"<p>It's some day of the week</p>";
break;
}