In this tutorial, I will show you how to make your own umbraco template. We can create containers that content editors can use to create a hierarchy of pages but, as of yet, we have no way of rendering that data on a website. In order to do that, we must create a template. In today’s guide, we’re going to cover how to create a template in Umbraco and creating a matching MVC view to render the HTML.
Templates
Like ‘Document Types’, you can see the installed templates within your Umbraco website in the Settings section, which can be found in the left-hand section panel, under ‘Settings’ -> Templates.
In here you can create a new template definition by selecting the ellipse next to the templates folder and selecting create.
Create a name when you get presented. After you have created the template, you should see a text editor that will allow you to add in HTML and CSS. In here you can add in any HTML that you want.
@inherits UmbracoTemplatePage@{Layout = null;}<html><head></head><body>Text</body></html>
Assigning A Template To A Document Type
So, now we have a very basic template defined in Umbraco, the next step is to attach it to a ‘Document Type’. Go to the ‘Document Type’ section, select the document type you want to assign the template to and look in the ‘Info’ type
In here you have the ‘Allowed Templates’ column. If you have set your template up correctly then you should see your template in here, select it. Underneath it, you also have the ‘Default Template’ tab. The template that is set here is the one that is automatically associated with a page whenever a content editor creates a new one.
If you go to the content section and create a new page using the document type you assigned the template to, then after you publish the page, when you view the page you should see your new template displayed:
Changing An Existing Pages Template
If you want to change the template on an existing page, go to the ‘Content’ section in the Section menu and select the page you want to update
Navigate to the ‘Properties’ tab and go to the ‘Template’ section at the bottom. If you have set everything up correctly for your document type, you should see the template you want to select in the ‘Template’ drop down. After selecting the one you want to, hit the ‘Save and Publish’ button. Your template should now be ready to be used.
Things to note
- If your view does not get automatically created, you can always go into Visual Studio and create it yourself. You will know if a view doesn’t exist, as you’ll see an error along the lines of ‘No physical template file was found for template umbTextPage’ when you try and browse the page
- When you create a template in Umbraco, the view that gets created in your webroots View folder will not automatically be attached in your Visual Studio Solution file, so you will manually have to attach it. In Visual Studio, if you are unable to see it, you need to select ‘Show All Files’ in ‘Solution Explorer’, go to the Views folder click on the view and possibly hit ‘refresh’ in the top solution explorer menu, right-click on the view and select ‘Include in project’ to include it.
- To check if your website is set to run with web forms or MVC, open the umbracoSettings.config file in configs and go to the defaultRenderingEngine setting. You should see something like this:
<templates> <!-- To switch the default rendering engine to MVC, change this value from WebForms to Mvc --> <defaultRenderingEngine>Mvc</defaultRenderingEngine> </templates>
Switch your preference accordingly.
- In my installation, I received this error when I tried to modify an existing sample site template, ‘Sections must only appear once per config file.’ To fix it I had to open a web.config file in the ‘Views’ folder, find the line that was causing the error and delete it.
hostforlifeasp.net