- Sitecore Cookbook for Developers
- Yogesh Patel
- 630字
- 2021-07-16 11:14:58
Placing renderings dynamically using placeholders
In the previous recipes, you learned placing components on a layout or view statically. You can empower the dynamic placement of components using a placeholder, which comes with lots of benefits that you will learn in this recipe.
How to do it…
We will first replace statically placed renderings with placeholders in Main Layout:
- We will first decide places where we can put content dynamically or we need placeholders, for example, breadcrumb, side menu, and main content area.
- From
Main Layout, remove the existing renderings from these places and add placeholders,breadcrumb,left-column, andmain-contentas follows:<div class="container"> <div id="breadcrumb"> @Html.Sitecore().Placeholder("breadcrumb") </div> <div id="sidemenu"> @Html.Sitecore().Placeholder("left-column") </div> <div id="contentarea"> <article> @Html.Sitecore().Placeholder("main-content") </article> </div> </div> - We already have
breadcrumbandSide Menuview renderings; we will create a simple view rendering to show theTitle,Body, and other fields in the main content area. In theSitecoreCookbookproject, create aTitleAndBody.cshtmlview file in the/Views/Content/folder with the following content, and register this rendering:<h1>@Html.Sitecore().Field("Title")</h1> <div> @Html.Sitecore().Field("Body") </div> - Now, we will place Breadcrumb, Side Menu, and Title and Body renderings in
breadcrumb,left-column, andmain-contentplaceholders accordingly. From the Content Editor, select Standard Values of theSite Roottemplate. From the ribbon, click on the Details button in the Layout group from the Presentation tab to open the Layout Details dialog. Click on the Edit button to open the Device Details dialog and select the Controls section. It will show an empty list, but once you add renderings on placeholders, they will be displayed, as shown in the following image:
- To add renderings, click on the Add button from the Device Editor dialog. It will open the Select a Rendering dialog, where you can add renderings to particular placeholders, as shown in the following image:
- Repeat steps 4 and 5 for all template standard values, where you want to add renderings. Now, preview different pages to see the power of placeholders; you will find the renderings are displayed on the pages!
Note
We could also have used the benefit of inheriting presentation details from base templates. In Sitecore 8 onward, if you don't find your renderings inherited, you can get a bug fix for it from https://goo.gl/OSMNkR.
How it works…
A placeholder is a Sitecore component used within a layout, view, or sublayout, which allows the dynamic placement of components in it. It does not have any user interface, the same as the ASP.NET placeholder control. In Sitecore MVC, a placeholder can be created using the @Html.Sitecore().Placeholder("<placeholder name>") helper class. In Web Forms, you can use <sc:Placeholder runat="server" />.
It allows users to have design flexibility and minimize the number of layouts and renderings. For example, in this recipe, we can convert our layout from a two-column (side menu and content area) to a three-column layout, simply by adding a two-column view in the main-content placeholder. Thus, you can create any type of dynamic design just using a single layout.
When you have multiple components in a single placeholder, their order is managed by layout engine, considering the order they are added to the layout details. Their order can be changed using the Move Up and Move Down buttons in the Device Editor dialog, shown in step 4. You can remove or replace any control by clicking on the Remove or Change button.
See also
You can also implement dynamic placeholders (https://goo.gl/6NIF3z).
- Advanced Splunk
- Building a RESTful Web Service with Spring
- .NET 4.0面向?qū)ο缶幊搪劊夯A(chǔ)篇
- 新手學(xué)Visual C# 2008程序設(shè)計(jì)
- Mastering Ubuntu Server
- Instant QlikView 11 Application Development
- 精通MATLAB（第3版）
- MATLAB 2020從入門到精通
- Unity 3D/2D移動(dòng)開發(fā)實(shí)戰(zhàn)教程
- Domain-Driven Design in PHP
- OpenCV 3計(jì)算機(jī)視覺：Python語言實(shí)現(xiàn)（原書第2版）
- SQL Server 入門很輕松（微課超值版）
- Learning Concurrency in Python
- PHP動(dòng)態(tài)網(wǎng)站開發(fā)實(shí)踐教程
- INSTANT LESS CSS Preprocessor How-to