Category: MVC

Dear readers,

Its been very long time that I have written any blog posts and in meantime there has been significant changes in Umbraco and its documentation on ASP.NET MVC.

Few updates on this topic before I start,

1. ASP.NET MVC is now enabled out of the box rather than WebForms in Umbraco.
2. This blog series was first started with Umbraco version 7.1.1 but concept is same in latest version 7.2.8 also.
3. Documentation on ASP.NET MVC support for Umbraco has improved a lot.

---

In this post we will see how to develop website using Umbraco CMS and ASP.NET MVC.

In the Introduction post you can read the brief on this blog series.

Before starting please note that this may take a while to understand the concept wholly but let us try & understand, also you can refer Umbraco documentation such as Implementing Custom controller.

There are two parts of this story ASP.NET MVC side and Umbraco side.

First Part of this story – ASP.NET MVC

First let us see what we have in ASP.NET MVC part of the story. So we have three basic things to know. It is possible that you know these things already so you may skip to next section –

1. Model
2. View
3. Controller

Brief for each of these is –

Model

Model is POCO which contains getter and setter properties and sometimes we have ViewModel for certain complex scenarios.

View

View is just outputting html. View is written in Razor sharp syntax in .cshml or ASP.NET syntax in .aspx

Controller

Controller is C# class. It is the main class which controls how the request would be served. It knows what Model and View will go together, How to validate incoming request and application data whereabouts. As you might know that there are many ways controller works; it all depends on requirements and skill-set of the developers working on the solution.

Second PART OF THIS STORY – Umbraco Page

Now second part of the story – Creating a page in Umbraco. So we have three basic things here to know,

1. Document Type
2. Template
3. Content Item

Brief for each of these is –

Document Type

Document Type is the definition content item. Like we define database table and columns in SQL, here we define the properties that we require in a Page. Each Document Type has Standard Values associated with it. Standard Values are to define default property values that gets initialized as a new Content is created. We can image this like constructor of a Class. For sake of simplicity Standard Values are not depicted in the diagram.

Now to we will see how Document Type looks like as we talk about this.

Above image shows the properties of Document Type. For example purpose here Document Type ‘HelloWorld’ has one property defined as ‘Page Title’. To use this property in code we refer this using Alias i.e. ‘pageTitle’, which is also shown in the image above.

Template

Template is the Layout definition content item. Template file extension can be .aspx and .cshml depending on configuration. We can imagine ‘Template’ as two-dimensional thing, one is Logical i.e. Content Item and other is Physical i.e. html file (.chtml or .aspx). As shown in diagram each Template has association with Content Item and both exists independently.

Here is how Template looks like.

In the image above we can see how Template in Umbraco is directly related to View in Visual Studio. To make a clear understanding here, two different screens are stitched together in the image.

Content Item

To create new Page we need to create Content Item. Content Item is the central part of all three, sometimes also referred as Web Page. Content Item is based on Document Type and presentation is controlled by Template. Also I have noticed practices to define Content Items which does not have any functional presentation, it means they are nothing but just Data Repository which can be reused anywhere in the Website such as Navigation, Contact Information, Office Address, etc.

So here is how Content Item looks like.

Reference Book

Read Information Architecture for more regarding how to structure and re-purpose data in Content Management System.

Refer above UML diagram to understand the relationship of Document Type, Template and Content Item.

I hope everything is clear until this point. Now comes the Final part where we see how the ASP.NET MVC and Umbraco work together.

Final Part of the Story – ASP.NET MVC + Umbraco

Here we will try to relate each concept from ASP.NET MVC to Umbraco,

MVC Model== C# Model

There is no special requirement for creating Model classes. However by default Umbraco layout uses RenderModel class in Controllers but no hard dependency.

MVC Controller== Document Type Name

Document Type name suffixed with ‘Controller’ becomes Controller.

For example Document Type with name ‘HelloWorld’ becomes ‘HelloWorldController’ Controller.

By default Controller inherits from SurfaceController but if we intend to write custom logic within Controller then it should inherit from RenderMvcController

MVC Action method name== Template Name

Controller should always have default Action ‘Index’ and otherwise we can create Action with any name e.g. ‘GetProducts’ Action.

Note that if Umbraco engine is not able to map request to any defined Actions in the Controller then default action ‘Index’ of that Controller class will get executed.

Concluding

Therefore, each Content Item of Umbraco maps uniquely to one Controller and one View only. We can change which View should get executed for particular Content Item by selecting appropriate Template directly on Content Item or at the Document Type.

Here is the final output how this whole stuff looks like and This just starting of the entire story that we can build with Umbraco and ASP.NET MVC.

I hope this helps you and do comment for any suggestions or questions.

Related articles

• Razor Template System – Templating with C# (Content Management)
• Enumerating .NET MVC Application Endpoints with Roslyn