- 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).
- ReSharper Essentials
- Visual Basic程序設(shè)計(jì)教程
- ASP.NET Core 2 and Vue.js
- Data Analysis with IBM SPSS Statistics
- SEO智慧
- Hands-On RESTful Web Services with Go
- PHP 7+MySQL 8動態(tài)網(wǎng)站開發(fā)從入門到精通（視頻教學(xué)版）
- 從零開始學(xué)Linux編程
- Mastering Data Mining with Python：Find patterns hidden in your data
- .NET Standard 2.0 Cookbook
- Qlik Sense? Cookbook
- Learning Unreal Engine Game Development
- INSTANT LESS CSS Preprocessor How-to
- Visual FoxPro程序設(shè)計(jì)實(shí)驗(yàn)教程
- Internet of Things with Arduino Cookbook