As already mentioned in another section of the website, here at Incredible Web we make use of Umbraco CMS as the backend to our websites.  Once again, we will not state that it is the best content management system on the market, but we can safely state that it is the most suitable CMS for us and the projects we are targeting.

Umbraco is different from other CMS software as it takes a much more web developer oriented approach.  Apart from having a simple and straightforward setup, similar to Wordpress or other more commonly used CMSs; Umbraco also offers the extensibility that only a bespoke web application may.  This will require a certain level of expertise and knowledge in web development, namely in ASP.NET and may be out of reach for the common end user; but paired with the right minds, it offers unrivalled flexibility.  This approach results in a steep yet short learning curve, because once you have mastered the basics you can twist & bend Umbraco to meet any of your website's requirements.

Ultimately, if you are a web developer and looking to develop tailor made web applications, Umbraco is a good option; otherwise if you want something straight out of the box, it would be simpler to stay with something along the lines of Wordpress or Joomla.

At Incredible Web, apart from adding our own custom modules and controls, we have gone one step further and downloaded the source code, understood it and then built our own layer on top of Umbraco's libraries, which will enable us to update Umbraco without any issues but at the same time absract away the complexity of Umbraco's source code. And most interestingly, apart from all this, our layer serves to convert Umbraco into an MVC web application, in line with our web standards, offerring a fully scalable, reliable and flexible application, bundled with Umbraco's friendly user interface.

In this blog and the following two I will give an in-depth explanation of the layer we have developed and how we have included it as part of our website integration lifecycle.  Initially I will give a high-level abstract definition of the layer, and then build upon this until you would be able to include something similar as part of your own Umbraco CMS website integration.  However it is necessary that you are familiar with the MVC (model-view-controller) architecture pattern and knowledgeable of Umbraco CMS, although there is no need to be a web development guru on either.

Therefore as you should already know, the base of the MVC pattern is the model.  The model can be described as an object which will be persisted in the database.  In the case of Umbraco we are not using models, but view models; as they will not represent a database entity on a one-to-one basis.  

The view models will be the equivalent of Umbraco document types (available under the Settings tab).  A simple example of a document type could be an ordinary page.  For the sake of our example, it will have the following properties: 

  • META Title
  • Page Title
  • Summary
  • HTML

In our .NET library (the layer mentioned earlier) we will create an object (class) PageViewModel.cs which will contain the document type properties mentioned above:

public class PageViewModel
    {
        public string MetaTitle { get; set; }
        public string PageTitle { get; set; }
        public IHtmlString Summary { get; set; }
        public IHtmlString HTML { get; set; }
    }

The class will have to reference the umbraco.NodeFactory class (you must have previously referenced umbraco.dll) which will expose the Node class.  The rest is straightforward, create a constructor which takes a Node instance as a parameter and assign values to the properties using the property aliases set in Umbraco:

public PageViewModel(Node node)  
        {
            this.MetaTitle = node.GetProperty("metaTitle");
            this.PageTitle = node.GetProperty("pageTitle");
            this.HTML = new HtmlString(node.GetProperty("Html");
            this.Summary = new HtmlString(node.GetProperty("Summary");
        }

There you have your first Umbraco view model.  Referencing your layer from another project will allow you to create PageViewModels to represent a page within the website, which obviously must be done from the controller class.  Assuming you already have created a Page instance within Umbraco from the Content tab called Home (representing your website's home page), you may create an instance of your view model using the following line of code:

HomePageViewModel model = new PageViewModel(Node.GetNodeByXpath("root/Home"));

Finally, you want to show this data in the view, and it really couldn't get simpler.  As always is recommended, use a strongly-typed View by including the following line:

@model ViewModels.HomePageViewModel

And finally, reference any of the model's properties using Razor:

<div class="content">
    <h1>@Model.PageTitle</h1>
    @Model.HTML
 </div>

And there you have it, you have extended Umbraco CMS onto an ASP.NET MVC website.  I told you it would be simple; and as you can see the code is extremely organized and well structured as it should be in an MVC web application.  Your website is now scalable, flexible and beautiful on the inside, because like with people, that's what counts! ;)