In Sitecore, rendering, layouts, and placeholders are key concepts that contribute to the presentation layer of a website. Here’s an explanation of each with examples:
1. Renderings:
Renderings are components that generate a portion of the HTML that is sent to the browser. They are typically associated with a piece of functionality on the site. For example, you might have a rendering for a navigation menu, a rendering for a news article list, a rendering for a product detail, etc.
In Sitecore MVC, there are two types of renderings: View Renderings and Controller Renderings. View Renderings are simpler and map directly to a .cshtml Razor view file, while Controller Renderings map to a controller action which processes logic before returning a view.
2. Layouts:
A layout defines the overall structure of a webpage. It’s similar to a master page in ASP.NET or a layout file in MVC. Typically, a layout will contain the main HTML structure for your pages – the doctype declaration, the html/head/body tags, and placeholders where renderings can be added.
For example, your layout might define a header, main content area, and footer, each with its own placeholder where appropriate renderings can be inserted.
3. Placeholders:
Placeholders are areas defined in your layout or sublayouts where you can insert renderings. Each placeholder has a key that uniquely identifies it. When you define a placeholder in a layout or sublayout, you can then attach renderings to that placeholder in the Sitecore presentation details.
For example, in a layout you might have a placeholder key defined as “main”, within which you can insert a variety of different renderings depending on the specific page and its requirements.
Here’s a simple example:
Layout (/Views/Shared/_Layout.cshtml):
//Codecsharp
<!DOCTYPE html>
<html>
<head>
<title>@Html.Sitecore().Field("title", new { DisableWebEdit = true })</title>
</head>
<body>
<header>
@Html.Sitecore().Placeholder("header")
</header>
<main>
@Html.Sitecore().Placeholder("main")
</main>
<footer>
@Html.Sitecore().Placeholder("footer")
</footer>
</body>
</html>
//CodeIn this layout, there are placeholders for “header”, “main”, and “footer”. You can then assign different renderings to these placeholders in different pages as per your requirements. This could be done in the Presentation Details of each item in the Sitecore Content Editor.
