Default Razor Page Template

Take a closer look at a Razor page template created by default.

When you create a Razor page template in the CMS Console, it will includes some required as well as sample code that you can reuse or replace with your own code.

@inherits directive

All Razor page templates in C1 CMS must inherit from RazorPageTemplate.

@inherits RazorPageTemplate

Template ID, title and layout

Within the @function {...} directive, in the Configure method override, you should at least specify the template's ID and the title setting the TemplateId and TemplateTitle properties respectively.

The Layout property is commented out as optional. You can use this property to specify the path to a .cshtml file that serves as a master layout for the template.

@functions {
	public override void Configure()
	{
        TemplateId = new Guid("bed582d3-d604-4858-a3a7-5b01d39d11e1");
        TemplateTitle = "My First Razor Template";
		// Layout = "MasterLayout.cshtml";
    }
}

Placeholders

The new Razor template must also declare at least one content placeholder using an XhtmDocument property and a Placeholder attribute on it.

@functions {
	[Placeholder(Id="content", Title="Content", IsDefault=true)]
	public XhtmlDocument Content { get; set; }
	
	[Placeholder(Id="bottom", Title="Bottom")]
	public XhtmlDocument Bottom { get; set; }	
}

Content placeholders create separate content areas for the page based on this template. This is where a page can be edited in Visual Editor.

By default, two placeholders are declared: "Content" (default) and "Bottom".

Markup

The new razor template also includes some sample XHTML.

<html lang="@Lang" xmlns="http://www.w3.org/1999/xhtml" 
	xmlns:f="http://www.composite.net/ns/function/1.0" 
	xmlns:lang="http://www.composite.net/ns/localization/1.0" 
	xmlns:asp="http://www.composite.net/ns/asp.net/controls">
	<head>
		<title>@CurrentPageNode.Title</title>
		@if (!string.IsNullOrEmpty(CurrentPageNode.Description)) {
			<meta name="description" content="@CurrentPageNode.Description" />
		}
		<f:function name="Composite.Web.Html.Template.CommonMetaTags" />
		<link rel="stylesheet" type="text/css" href="~/Frontend/Styles/VisualEditor.common.css" />
	</head>
	<body>
		<h1>@CurrentPageNode.Title</h1>
		<h2>@CurrentPageNode.Description</h2>
		<div>
			@Markup(Content)
		</div>
		<h2>Bottom Placeholder</h2>
		<div>
			@Markup(Bottom)
		</div>
	</body>
</html>

It must render all the declared content placeholders with @Markup helper method or in other ways. Read more on adding content placeholders in Razor page templates.
It can execute the function inserted as markup (<f:function/>) or invoked with the @Function helper method. Read more on executing CMS Functions in Razor page templates.
It can insert the content of page template features with the @PageTemplateFeature. Read more on using page template features in Razor page templates.

In the sample above, it makes use of:

@Lang to set the language of the page
@CurrentPageNode.Title and @CurrentPageNode.Description to use the page's title and description
the "Composite.Web.Html.Template.CommonMetaTags" function that sets common meta tags on the page

A number of XML namespaces declared in <html/> allows you to use some specific C1 CMS elements, e.g. <f:function/>.

You are free to change it the way you need or totally remove it from your template.

Show comments / add a comment

Know it first and engage with us on all channels