Umbraco MVC: First Steps

Like most people we fear change, but that should not be the case with the switch from WebForms to MVC in Umbraco. I’ve made the switch and am glad I have done it. In this blog series I will go through common scenarios to make us all feel better about MVC with Umbraco.

So carry on reading on to find out how to take our initial baby steps towards a better and happier development life with Umbraco MVC.

What is MVC?

I will give you the official geeky definition first from Wikipedia off what MVC is.

Model–view–controller (MVC) is a software architecture pattern which separates the representation of information from the user’s interaction with it

But in simple terms to me it’s about separation of your code. Business logic and heavy lifting code is done in your controller, your view is the way to display your data with clean and readable HTML markup and the model is where you store your data and in most cases this will be the current Umbraco page node.

Hopefully I have tried to explain it in slightly clearer terms.

Why should I care about it?

I think you should be learning the MVC approach when you build your Umbraco websites, for one coming from a front-ender background. The MVC approach allows me to have total control of markup from start to finish without ASP.NET WebForms injecting weird stuff into the page such as viewstates and weird markup for controls. After me with playing with MVC for a little while I have now fallen head over heels for it, and I think you will do once you get you head around the initial concepts. I recommend you taking a little time to read up on the ASP.NET MVC website with their great tutorials and startup information on the topic.

So to summarise, it will make your life as a developer a lot easier allowing you to have a pure 100% control over your markup of your website.

Show me the code!

In this initial tutorial I will show you how to enable MVC mode for Umbraco and create nested templates similar to how you would with nested ASP.NET MasterPages.

First things first is to download Umbraco in your preferred method. For me it’s using Visual Studio and Nuget but you may prefer a different approach. Do whatever feels comfortable for you.

Before you start the Umbraco install wizard, you will need to enable as MVC mode. This can be done very easily by changing the value in the /config/UmbracoSettings.config file to the following.

<!-- To switch the default rendering engine to MVC, change this value from WebForms to Mvc -->
<!-- Do not set useAspNetMasterPages to false, it is not relevant to MVC usage -->
<defaultRenderingEngine>Mvc</defaultRenderingEngine>

Once you have done that and saved your changes you can then go through the Umbraco installer as usual.

The next step is for us to create our nested templates. From the Umbraco backoffice in the settings section right click the Templates folder and click create. Create a new template called Master. In this file enter in your base HTML such as and other common markup for all pages in your website.

You will notice the file that gets created is called Master.cshtml which is a Razor view engine file and is stored in /Views as opposed to your templates being created in the /masterpages folder.

Next we need to insert the main placeholder where child templates will inject their markup into this master template. In ASP.NET MasterPages you would have done this with an <asp:contentplaceholder> tag but in Razor, you simply need to add @RenderBody() instead. For additional <asp:contentplaceholder> tags we need to create sections for these. We do this by simply writing @RenderSection() which require two parameters, the first being the name of the section and the second a boolean if the section is required or not by the child template. So in the example below I have two additional sections.

Below is a very simple example of a master template:

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = null;
}

<html>
	<head>
	    <title>Umbraco MVC Example</title>

	    <!-- Allow Child Templates to insert into the head (optional) -->
        @RenderSection("head", false)
	</head>
	<body>
<h1>Umbraco MVC Example</h1>
<div id="content">
	        @RenderBody()</div>
<div id="footer">
	        <!-- Allow Child Templates to insert into the Footer (Required by child templates) -->
            @RenderSection("footer", true)</div>
</body>
</html>

Now that we have our master template in place, we can now create child templates that are based off this master template. From the templates folder in the Umbraco backoffice, right click and create a new template called Home and then from the master template dropdown select our template Master that we previously created and save the template.

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
	//Notice the value here - it is set to our master template file which we are basing our template off
    Layout = "Master.cshtml";
}

<!-- I get rendered where the RenderBody tag is on the master template -->
<h2>I am the homepage</h2>
@section head {
	<!-- Here I could either remove the head section, as it is not required -->
	<!-- Or I can put in specific CSS & JS files into the head tag that are needed for the homepage only -->
}

@section footer {
<h4>I am text in the footer of the homepage and I am required</h4>
}

That’s it we are done and have successfully started to create nested templates using Umbraco 6 in MVC mode.

Tune in next time kids, as I continue this long running Umbraco MVC blog series, where we will take a look at Partial Views and potentially why you may start to use Macros in your website less.

Cheers,
Warren 🙂

Advertisements

9 thoughts on “Umbraco MVC: First Steps

  1. Hey Warren, thanks for all the blogging! Is it possible to make a short post about how you start a project, and maybe something about your or ‘the’ naming conventions. I kinda struggle to find a good/comfortable way to start. Last thing I tried was starting in VS12 with an empty MVC4 template, than install the dependencies via Nuget and after that paste in Umbraco from the zip (without the binaries).

    1. Hiya,
      Yeh I sure can. But in meantime.

      I do a blank VS Solution and then add Umbraco via Nuget and hit CTRL + F5 and use SQL CE for most small projects.

      Then I add my Controllers folder to the project along with any other custom code I am writing.

      That’s personally how I work. You may or may not agree with it but its one of the ways I work.

      Cheers
      Warren

  2. Ah, that sounds nice as well. Got some time today to run the CWS. Maybe I can port it somewhat and make a custom base of it. Would be a nice starting point.
    About the SQL CE, is that ok for a small site to keep using as DB. Cause I always set-up a MSSQL DB, maybe overkill sometimes.

  3. Warren…

    …I’d almost given up on getting anywhere in Umbraco due to the lack of documentation, books etc when I found this post. It should be the first link in the Views section of the documentation on our.umbraco.org

  4. Maybe it is just me but why is static HTML in the templates file? I am trying to use @RenderBody() to pull in content dynamically from pages using the child template. I put RenderBody() in the master template but if I put in @Render.Field(bodyText) in my child template and assign the child template as the template for my content page – i get an error?

  5. while i put @Renderbody() in umbraco 7 it gave 500 internal server error.i tried lot of ways but nothing possible.can u suggest error part?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s