기존의 @Html.Sitecore().Placeholder("key")와는 달리, @Html.Sitecore().DynamicPlaceholder("Key", optional parameters)는 새로운 Placehoder를 좀 더 효율적으로 생성 및 관리할수 있으며, Placeholder Key이름에 렌더링 아이템 아이디와 인덱스를 추가하여 똑같은 Placeholder key를 중보긍로 사용할수 있도록 하였다.
예: placeholderName-RenderingID-Count
content-{4C770DD9-F840-45AB-A22F-8CCAAC42F646}-0
먼저, 아래는 DynamicPlaceholder Method에서 사용가능 한 Parameter의 목록을 나열하였고, 각각 어떻게 사용되어지는지 알아보도록 하자.
DynamicPlaceholder(string placeholderName, int count = 1, int maxCount = 0, int seed = 0) DynamicPlaceholder(string placeholderName, TagBuilder chrome, int count = 1, int maxCount = 0, int seed = 0) DynamicPlaceholder(string placeholderName, Func<DynamicPlaceholderRenderContext, TagBuilder> chromeResolver, int count = 1, int maxCount = 0, int seed = 0) DynamicPlaceholder(string placeholderName, Func<HtmlString, HtmlString> outputModifier, int count = 1, int maxCount = 0, int seed = 0) DynamicPlaceholder(DynamicPlaceholderDefinition definition)
- DynamicPlaceholder(string placeholderName, int count = 1, int maxCount = 0, int seed = 0)
기본 Placeholder Method처럼 @Html.Sitecore().DynamicPlaceholder("placeholder name") 처럼 사용할 수 있지만, 추가적으로 기본 선택적인 Parameter인 count, maxCount, 그리고 seed를 사용함으로써 해달 Placeholder를 제한적으로 사용할 수가 있다.
@Html.Sitecore().DynamicPlaceholder("content", count:2)
- count: 사용하고 싶은 Placeholder 수를 정함.
- maxCount: 맥시멈 Placeholder 수를 정함. 예를들어, count가 "5"이고 maxCount를 "3"으로 정했다면, 페이지에서는 maxCount인 3개의 Placeholder만 나타남.
- seed: Placeholder의 카운티은 "0"에서 시작되며, 특정하게 시작하는 수는 정하고 싶다면 seed를 사용하면 됨
- DynamicPlaceholder(string placeholderName, TagBuilder chrome, int count = 1, int maxCount = 0, int seed = 0)
첫번째, 메소드의 형식과 달리 이번 메소드는 TagBuilder 오브젝트를 패스하여 새로운 HTML 마크업을 생성할수가 있다.
@{ TagBuilder newTag = new TagBuilder("div"); newTag.GenerateId("unique-id-here"); newTag.AddCssClass("custom-class-name-here anotheer-class-here"); newTag.InnerHtml = "This DIV is built by TagBuilder"; } @Html.Sitecore().DynamicPlaceholder("content", newTag, count: 2, seed: 5) // 또는, @Html.Sitecore().DynamicPlaceholder("content", output => { newTag = new TagBuilder("Div"); newTag.GenerateId("unique-id-here"); newTag.AddCssClass("custom-class-name-here another-class-here"); return newTag; }, count: 2, seed: 5)
위의 예제처럼, 새로운 태크 생성을 위한 Argument를 메소드에 전달하였으며 seed를 "5"로 세팅함으로써 Placeholder 카운터가 "5"부터 시작한다.
HTML Preview Output
<div class="custom-class-name-here another-class-here" id="unique-id-here"></div> <div class="custom-class-name-here another-class-here" id="unique-id-here"></div>
- DynamicPlaceholder(string placeholderName, Func<DynamicPlaceholderRenderContext, TagBuilder> chromeResolver, int count = 1, int maxCount = 0, int seed = 0)
두번째 예제에서의 문제점은 똑같은 HTML 마크업을 생성할수는 있으나, 마크업의 Attribute (클래스 이름 또는 아이디 이름)등을 Unique하게 생성할수가 없다. 똑같은 클래스 이름이나 아이디를 사용하면 Javascript 이벤트를 불러오는데어서 Conflict 문제가 생길수가 있다. 사이트코어 Presentation 네임스페이스의 DynamicPlaceholderRenderContext 클래스를 사용하여, Placeholder의 속성값을 가져올수가 있다.
// @View <div class="row"> @functions { TagBuilder CreateColumn(DynamicPlaceholderRenderContext context) { var col = new TagBuilder("div"); col.GenerateId("column-id-" + context.Index); col.AddCssClass("col-lg-" + 12/context.PlaceholdersCount)); return col; } } @Html.Sitecore().DynamicPlaceholder("content", CreateColumn, count: 3, seed: 20, maxCount: 4) </div>
위의 예제는 context.PlaceholderCount을 Argument에 세팅한 Count의 값 "3"의 불러와 새로 생성되는 "<div>" 마크업의 클래스이름 "col-lg-{count}"으로 정하도록 하였다. 또한, Unique한 ID를 생성하여 context.Index값을 차려로 나열하도록 만들었다.
HTML Preview Output
<div class="row"> <div class="col-lg-4" id="column-id-0"></div> <div class="col-lg-4" id="column-id-1"></div> <div class="col-lg-4" id="column-id-2"></div> </div>
- DynamicPlaceholder(string placeholderName, Func<HtmlString, HtmlString> outputModifier, int count = 1, int maxCount = 0, int seed = 0)
이번에도 3번째 예제와 비슷하게 Placeholder 속성값을 전달하여 새로운 HTML 마크업 또는 값을 생성하여, 원하고자하는 Placeholder의 마크업을 생성할수있다.
@Html.Sitecore().DynamicPlaceholder("content", (input, context) => new HtmlString(String.Format("<div class=\"custom-class-{1}\">{0}</div>", input, context.DynamicKey) ), count: 50, maxCount: 3, seed: 50)
이번 예제에서는 해당 Placeholder의 DynamicKey의 값을 사용하였고, 값은 PlaceholderName-UniqueRenderingID-Count 값으로 HTML 마크업에 나타난다.
<div class="custom-class-content-{4C770DD9-F840-45AB-A22F-8CCAAC42F646}-50"></div> <div class="custom-class-content-{4C770DD9-F840-45AB-A22F-8CCAAC42F646}-51"></div> <div class="custom-class-content-{4C770DD9-F840-45AB-A22F-8CCAAC42F646}-52"></div>
- DynamicPlaceholder(DynamicPlaceholderDefinition definition)
마지막으로 DynamicPlaceholderDefinition 오브젝트는 지금까지 설명한 모든 옵션을 통합한 클래스이다. 새로운 오브젝트에 Placeholder 이름을 정하고, 필요한 인덱스값을 정해주며, Placeholder의 속성값을 HTML 마크업의 Unique한 값으로 정할수가 있다.
@Html.Sitecore().DynamicPlaceholder(new DynamicPlaceholderDefinition("content") { Count = 5, MaxCount = 10, Seed = 100, OutputModifier = (input, context) => new HtmlString(String.Format("<div class=\"definition-{1}\">{0}</div>", input, context.Index)) })
<div class="definition-0">content-{4C770DD9-F840-45AB-A22F-8CCAAC42F646}-100</div> <div class="definition-1">content-{4C770DD9-F840-45AB-A22F-8CCAAC42F646}-101</div> <div class="definition-2">content-{4C770DD9-F840-45AB-A22F-8CCAAC42F646}-102</div> <div class="definition-3">content-{4C770DD9-F840-45AB-A22F-8CCAAC42F646}-103</div> <div class="definition-4">content-{4C770DD9-F840-45AB-A22F-8CCAAC42F646}-104</div>
