Sitecore Rendering: A Comprehensive Guide to Enhancing Your Digital Experiences
Table of contents
When we talk about displaying a page in Sitecore, it's essential to understand the concept of renderings. Sitecore has several types of renderings, including Controller Rendering and View Rendering, which are the most commonly used.
In the context of React.js, rendering components serves a similar purpose. For example, if you have a card component that you want to display in the Experience Editor, you must render this component. This rendering process is crucial for displaying content in Sitecore.
Sitecore offers various types of renderings, such as:
Method Rendering
Item Rendering
Generally, we use Controller Rendering and View Rendering.
View Rendering
We are all familiar with the .NET MVC concept, which is based on the Model-View-Controller (MVC) concept. For view rendering in .NET MVC, there is no need to create a controller, and similarly, in Sitecore, you only need to create a view rendering.
Let's clarify this with an example. Suppose you want to create a footer that does not contain any business logic; so, you can write code like the following:
Footer1.cshtml
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>FooterViewRendering</title>
</head>
<body>
<footer>
<div class="container">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="well">
<h4>@Html.Sitecore().Field("AboutTitle", Model.Item)</h4>
<p>
@Html.Sitecore().Field("AboutDescription", Model.Item)
</p>
</div>
</div>
</div>
</div>
</div>
<div class="footer-bottom text-center">
<div class="container">
<div class="row">
<div class="col-md-12">
<small class="copyright">
<span>@Html.Sitecore().Field("AboutCopyright", Model.Item)</span>
</small>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>
The above code does not require a controller because it is a view rendering, but the standard practice is to adhere to the MVC rules as closely as possible.
and after creating .cshtml you have to publish your code to Webroot.
Template for footer
To create a view rendering, go to Sitecore -> Content Editor -> Layout -> Renderings.
If you are adhering to the Helix structure, you will create it within the appropriate folder. Otherwise, create a folder named after your project in the project folder and then proceed to create the view rendering within that folder.
After the creation of the view rendering, you will notice a field named "Path" in the footer view rendering.
After creating the view rendering, you will notice a field named "Path" in the footer view rendering. You must add the path to your .cshtml file.
For instance, if the path is C:<website_name>\Views\Footer\Footer1.cshtml, you should input it as ~/Views/Footer/Footer1.cshtml.
After completing the insertion of the footer template into the content, you then proceed to insert the footer contents.
After all, we have to add the footer view in the presentation details so that we can see the footer on the webpage.
Controller Rendering
Now, you have a grasp of what we'll be doing with controller rendering.
In Controller rendering, we strictly adhere to MVC rules and create a model, view, and controller.
Let's delve into controller rendering using the same example.
The Template and Fields remain the same, but the distinction lies in the rendering process.
The MVC code is as follows:
Footer.cshtml
@using <website_name>.Models
@using Sitecore.Mvc
@model FooterModel
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="well">
<h4> @Model.FooterTitle </h4>
<p>
@Html.Sitecore().Field("AboutDescription", Model.FooterDescription)
@*@Model.FooterDescription*@
</p>
</div>
</div>
</div>
</div>
<div class="footer-bottom text-center">
<div class="container">
<div class="row">
<div class="col-md-12">
<small class="copyright">
<span>@Model.FooterCopyright</span>
</small>
</div>
</div>
</div>
</div>
FooterModel.cs
using System;
using System.Collections.Generic;
using System.EnterpriseServices.Internal;
using System.Linq;
using System.Web;
namespace <website_name>.Models
{
public class FooterModel
{
public string FooterTitle { get; set; }
public string FooterDescription { get; set;}
public string FooterCopyright { get; set; }
}
}
FooterController.cs
using SCPlayground.Models;
using Sitecore.Data.Fields;
using Sitecore.Data.Items;
using Sitecore.Mvc.Presentation;
using System;
using System.Collections.Generic;
using System.Web.Mvc;
namespace <website_name>.Controllers
{
public class FooterController : Controller
{
// GET: Footer
public ActionResult Footer()
{
var database = Sitecore.Context.Database;
Item dataSource = database.GetItem(RenderingContext.Current.Rendering.DataSource);
if (dataSource == null)
{
dataSource = Sitecore.Context.Item;
}
var model = GetFooterModel(dataSource);
return View(model);
}
private static FooterModel GetFooterModel(Item dataSource)
{
var model = new FooterModel();
model.FooterTitle = dataSource.Fields["AboutTitle"].Value;
model.FooterDescription = dataSource.Fields["AboutDescription"].Value;
model.FooterCopyright = dataSource.Fields["AboutCopyright"].Value;
return model;
}
}
}
In Sitecore, we create a controller rendering from the Renderings
After the creation of the footer controller rendering, you will observe several fields such as controller, controller action, datasource template, and datasource location. You can populate these fields with the following inputs:
Controller: Footer
Controller Action: Footer
Datasource Template: The path to your footer template
Datasource Location: The path to your datasource folder
After all, we have to add the footer controller in the presentation details so that we can see the footer on the webpage.