Learn Creation Of Master Template In Umbraco CMS

Introduction

Welcome to the "Learn Umbraco CMS" article series. This article is Part 3 of the series. We will see how to create master Template in Umbraco CMS.

This article starts with the concept of Umbraco cms and its various components. The previous article provided an understanding of Creation Of Templates, Document Types And Content Page In Umbraco CMS the same that you can get from below,

Step 1

Lets add a new class file in controllers

Learn Creation Of Master Template In Umbraco CMS

Step 2

Create a folder named sharedLayout and create header and footer view as shown below,

Step 3

Let's copy the header & footer part from the base template to the respective views,

<header id="header">
<div class="inner">
<a href="index.html" class="logo">introspect</a>
<nav id="nav">
<a href="index.html">Home</a>
<a href="generic.html">Generic</a>
<a href="elements.html">Elements</a>
</nav>
</div>
</header>

<section id="footer">
<div class="inner">
<header>
<h2>Get in Touch</h2>
</header>
<form method="post" action="#">
<div class="field half first">
<label for="name">Name</label>
<input type="text" name="name" id="name" />
</div>
<div class="field half">
<label for="email">Email</label>
<input type="text" name="email" id="email" />
</div>
<div class="field">
<label for="message">Message</label>
<textarea name="message" id="message" rows="6"></textarea>
</div>
<ul class="actions">
<li><input type="submit" value="Send Message" class="alt" /></li>
</ul>
</form>
<div class="copyright">
© Untitled Design: <a href="https://templated.co/">TEMPLATED</a>. Images <a href="https://unsplash.com/">Unsplash</a>
</div>
</div>
</section>

Step 4

Now let's call the render action in the master template,

@inherits Umbraco.Web.Mvc.UmbracoViewPage
@{
Layout = null;
}
@* the fun starts here *@
<!DOCTYPE HTML>
<html>
<head>
<title>Introspect by TEMPLATED</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link href="~/css/main.css" rel="stylesheet" />
</head>
<body>
@{Html.RenderAction("RenderHeader", "SiteSharedLayout"); }
<a href="#menu" class="navPanelToggle"><span class="fa fa-bars"></span></a>
@RenderBody()
<section id="banner">
<div class="inner">
<h1>
Introspect: <span>
A free + fully responsive<br />
site template by TEMPLATED
</span>
</h1>
<ul class="actions">
<li><a href="#" class="button alt">Get Started</a></li>
</ul>
</div>
</section>
<section id="one">
<div class="inner">
<header>
<h2>Magna Etiam Lorem</h2>
</header>
<p>Suspendisse mauris. Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Integer adipiscin sem. Nullam quis massa sit amet nibh viverra malesuada. Nunc sem lacus, accumsan quis, faucibus non, congue vel, arcu, erisque hendrerit tellus. Integer sagittis. Vivamus a mauris eget arcu gravida tristique. Nunc iaculis mi in ante.</p>
<ul class="actions">
<li><a href="#" class="button alt">Learn More</a></li>
</ul>
</div>
</section>
<section id="two">
<div class="inner">
<article>
<div class="content">
<header>
<h3>Pellentesque adipis</h3>
</header>
<div class="image fit">
<img src="images/pic01.jpg" alt="" />
</div>
<p>Cumsan mollis eros. Pellentesque a diam sit amet mi magna ullamcorper vehicula. Integer adipiscin sem. Nullam quis massa sit amet lorem ipsum feugiat tempus.</p>
</div>
</article>
<article class="alt">
<div class="content">
<header>
<h3>Morbi interdum mol</h3>
</header>
<div class="image fit">
<img src="images/pic02.jpg" alt="" />
</div>
<p>Cumsan mollis eros. Pellentesque a diam sit amet mi magna ullamcorper vehicula. Integer adipiscin sem. Nullam quis massa sit amet lorem ipsum feugiat tempus.</p>
</div>
</article>
</div>
</section>
<section id="three">
<div class="inner">
<article>
<div class="content">
<span class="icon fa-laptop"></span>
<header>
<h3>Tempus Feugiat</h3>
</header>
<p>Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna lorem ullamcorper laoreet, lectus arcu.</p>
<ul class="actions">
<li><a href="#" class="button alt">Learn More</a></li>
</ul>
</div>
</article>
<article>
<div class="content">
<span class="icon fa-diamond"></span>
<header>
<h3>Aliquam Nulla</h3>
</header>
<p>Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed.</p>
<ul class="actions">
<li><a href="#" class="button alt">Learn More</a></li>
</ul>
</div>
</article>
<article>
<div class="content">
<span class="icon fa-laptop"></span>
<header>
<h3>Sed Magna</h3>
</header>
<p>Suspendisse mauris. Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula.</p>
<ul class="actions">
<li><a href="#" class="button alt">Learn More</a></li>
</ul>
</div>
</article>
</div>
</section>
@{Html.RenderAction("RenderFooter", "SiteSharedLayout");}
s
<script src="~/Scripts/jquery.min.js"></script>
<script src="~/Scripts/skel.min.js"></script>
<script src="~/Scripts/util.js"></script>
<script src="~/Scripts/main.js"></script>
</body>
</html>

Step 5

Now let's call the views in the controller which we have created in Step 1

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Umbraco.Web.Mvc;
using System.Web.Mvc;
namespace Umbraco_CMS.Controllers
{
public class SiteSharedLayoutController:SurfaceController
{
private const string Partial_Views_Path = "~/Views/Partials/SharedLayout/";
public ActionResult RenderHeader()
{
return PartialView(string.Format("{0}Header.cshtml",Partial_Views_Path));
}
public ActionResult RenderFooter()
{
return PartialView(string.Format("{0}Footer.cshtml",Partial_Views_Path));
}
}
}

Summary

In this article, we have learned how to create Master Template in Umbraco CMS.In future articles, we will understand more about Master Template in Umbraco cms. I hope you have liked this.