Building first Umbraco 5 website: Partials

The post you are reading now is the last one in a series of four blog posts describing my experience with creating a relatively simple Umbraco 5-based website for a made-up coffee shop.

  1. Building first Umbraco 5 website: Document Types
  2. Building first Umbraco 5 website: Nodes
  3. Building first Umbraco 5 website: Templates
  4. Building first Umbraco 5 website: Partials

The posts are written in a form of beginners’ tutorial and will take you through all the steps necessary for creating the website. Disclaimer: However, please keep in mind that I am in no way an expert or professional in the field. Therefore I submit to you a description of a learning process rather than an expert tutorial and I ask you to read it as such. More than that, I encourage you to commen,t to point out mistakes or suggest better practices.In the first three posts I:

  1. Explained the concept of document types
  2. Analyzed my website from the perspective of document types
  3. Created document types necessary for the website
  4. Explained the concept of nodes and explained how they are created
  5. Build the document structure for the website we are creating
  6. Showed you how to display content on your website using templates
  7. Explained the way to attach external stylesheets and JavaScript files to your website

In this post I will talk about partials and how to use them in your website. I will also show you the code used to complete the website we were working on. I will explain what the partials do in broad strokes but I will not go into much details. After you go through all the steps in this post, your website will be ready to post online.

Step 1: Partials in Theory

Partials are the life blood of Umbraco. They make sure that your page is dynamic and not everything has to be done manually. They are basically snippets of code written with Razor, which is an ASP.NET programming syntax used to create websites with the C#. For example you might remember that we didn’t want to hard-code the navigation in the header. We didn’t want it because that would mean that with every new page created by the administrator of our page, we would have to go into the code and add a new <li> to our <nav> list.  Partials are exactly the thing that will save us from doing that. We will add a piece of code to our website that will check for all child pages of the root and display them as navigation.

Creating New Partials

  1. In back office go to settings
  2. Right-click on Partials and choose create
  3. Give your partial a recognizable name
  4. Remember to save after editing
Creating New Partials in Umbraco 5

Using Partials in your templates

  1. Go to your template
  2. Place your cursor in the code where the partial should be executed
  3. Choose Insert Partial View from top menu
  4. Choose your partial from the list
  5. Click insert
Inserting Partials in Umbraco 5

Alternatively you can also type: @Html.Partial(“yourPartialsName”)in the templates code.

Step 2: Partials in Practice

To get our website to work we need 4 partials:

  1. For displaying images
  2. For top navigation
  3. For listing events on events page
  4. For displaying content on Menu page

The image partial (called: image) is this:

@inherits RenderViewPage
@using Umbraco.Cms.Web;</pre>
<img src="@Umbraco.GetMediaUrl(@Model.Field(" alt="" />
<pre>

This partial is really just one line of code and you could use it directly in your templates. You can go ahead and replace all @Umbraco.Field(“image”) in your templates with img src=”@Umbraco.GetMediaUrl(@Model.Field(“image”).ToString())”. Placing it in a separate partial introduces more order and organization to your code. Note that if you don’t have an image picked in your content section, this partial will actually cause an error. A more complicated partial that checks if the image hiveId exists is necessary to avoid this error.

This is top navigation (called: navigation):

@inherits RenderViewPage
@using Umbraco.Cms.Web
@using Umbraco.Cms.Web.Macros
@using Umbraco.Framework

@{
    @* Walks up the nodes tree from the current page to the rootNode *@
    var rootNode = DynamicModel.AncestorsOrSelf.Last();
}

@* Checks if the rootNode has children *@
@if (rootNode.Children.Any())
{</pre>
<ul>
	<li>@* Adds the rootNode to the navigation *@ <a href="@rootNode.Url">@rootNode.Name</a></li>
@* For each childPage of the rootNode add the child to the navigation as list item *@ @foreach(var childPage in rootNode.Children) {
	<li><a href="@childPage.Url">@childPage.Name</a></li>
}</ul>
<pre>}
  1. It starts by defining what rootNode is
  2. Then it checks if rootNode has children
  3. If there are children it starts by listing the rootNode (in our case the Home page)
  4. Then it lists the page name and makes it a link

Notice that we add HTML elements that should be created. For example the navigation items are enveloped in an unordered list and list item tags.

Listing events on events page (called: Sub Navigation):

@inherits RenderViewPage
@using Umbraco.Cms.Web
@using Umbraco.Cms.Web.Macros
@using Umbraco.Framework

@* Checks if the rootNode has children*@
@if(DynamicModel.Children.Any())
{</pre>
<div class="lable"><nav id="subnavi">
<ul>@* For each childPage of the rootNode *@ @foreach (var childPage in DynamicModel.Children) {
	<li><a href="@childPage.Url"> @childPage.Name
@childPage.Date
 </a></li>
}</ul>
</nav></div>
<pre>}

This partial basically does the same thing as the previous one, except it only lists the descendants of the page on which the partial is placed. In our case it will list all the particular event pages on the Events page.

Displaying content on Menu page (called: Inherit Content):

@inherits RenderViewPage
@using Umbraco.Cms.Web
@using Umbraco.Cms.Web.Macros
@using Umbraco.Framework

@* Check if rootNode has children*@
@if(DynamicModel.Children.Any())
{
    foreach (var childPage in DynamicModel.Children)
    {
    <ul class="menu">
        <li>
           <h1 class="section">@childPage.heading</h1>
           @if(childPage.Children.Any())
            {
                foreach (var grandchildPage in childPage.Children)
                {
                    <li>
                      <h3 class="item">@grandchildPage.menuItem</h3>
                      <span class="price">@grandchildPage.price</span>
                    </li>
                }
            }
        </li>
     </ul>
    }
}
  1. It checks if there are any children from the page on which this partial is used (these are menu sections)
  2. It lists the heading of the child page
  3. It checks if the childPage has any children (these are menu items)
  4. It lists the childPage child’s menuItem property value and price property value

Linking partials to templates:

  1. In your templates insert image partial everywhere you have @Umbraco.Field(“image”)
  2. Insert Inherit Content at the bottom of Menu template
  3. Insert Navigation into the Layout template between the <nav></nav> tags
  4. Insert the Sub Navigation partial into Events template just before the last </div> tag

The partials used in this website are all variations of the partials that you can find in the Umbraco 5 documentation on GitHub. You can learn much more by browsing this page.

8 thoughts on “Building first Umbraco 5 website: Partials

  1. Tim

    Hi there,

    I wondered if you could elaborate a little more on the use of images in partials? I am not able to show the images I have added to my pages.

    Here’s the page I am referring to:
    http://primrose.sheena-russell.com/gift-shop

    What I don’t understand is why it renders the content as HTML instead of displaying the images? Any help you can give would be massively helpful!!

    Here’s the code from the partial in question:

    @inherits RenderViewPage
    @using Umbraco.Cms.Web
    @using Umbraco.Cms.Web.Macros
    @using Umbraco.Framework

    @{
    @* Walks up the nodes tree from the current page to the rootNode *@
    var rootNode = DynamicModel;
    }

    @* Checks if the rootNode has children *@
    @if (rootNode.Children.Any())
    {

    @* For each childPage of the rootNode add the child to the navigation as list item *@
    @foreach(var childPage in rootNode.Children)
    {

    @childPage.giftHeaderImage
    @childPage.giftSectionImage
    @childPage.giftSectionText
    @childPage.giftSectionButton
    @childPage.Name

    }

    }

    Really appreciate any help but understand if you’re too busy…!

    Thank you,
    Tim

    Reply
  2. Alan

    Hi Maria

    Nice tutorial.

    Am I missing something or is the code for the Inherit (menu page) partial missing?

    Thanks.

    Alan

    Reply
  3. Inabox Post author

    Hi Alan,

    sorry, it is back in the text now. I can’t find a good way to make sure that WordPress “disappear” the code.But is should be fine now.

    Maria

    Reply
  4. Marcel

    Hi Maria,

    What I don’t understand is if we are talking about Umbraco 5 and I check with Umbraco home I see the newest version available is 4.8.
    Because they retired v.5.

    I think that all the extra’s 5 would have shouldn’t be explained at all, maybe you can explain 4.8.1 what it can do and how to use it while designing an website.

    Think v.5 will not see the light until 2014.

    Just an thought nothing at all.

    Cheers,
    Marcel (Holland)

    Reply
    1. Inabox Post author

      Hi Marcel,

      you are right. Umbraco v5 was terminated and it happend during this years Umbraco Conference (Codegarden 2012). That was in June and the blog posts were written before that, in May. You can see what they are planning for the future here.

      When it comes to Umbraco 4.8, I think there are a lot of places where you can find tutorials for this version. I will probably write about this as well but I don’t exactly know when because I’m concentrating on something else right now.

      Maria

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>