- 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).
- JavaScript修煉之道
- Learning Chef
- 簡單高效LATEX
- Cocos2d-x游戲開發：手把手教你Lua語言的編程方法
- Hands-On Image Processing with Python
- Learning SQLite for iOS
- Access 2010數據庫基礎與應用項目式教程（第3版）
- Python編程與幾何圖形
- TradeStation交易應用實踐：量化方法構建贏家策略（原書第2版）
- 信息技術應用基礎
- Mathematica Data Analysis
- C語言程序設計
- Unity 2018 Shaders and Effects Cookbook
- C#程序設計（項目教學版）
- UI設計全書（全彩）