Login
Home CMS Documentation Home CMS 10 Development Building an MVC Website Developing MVC Solution by Example Rendering XML Content Rendering ICE Content CMS 10.0–10.5 Rendering ICE Content CMS 10.0–10.5 Custom View for ICE List Element

CMS 10.0–10.5 Custom View for ICE List Element

Prerequisites: Administrators must navigate to the ICE list element's schema in Administration > Schema Designer and select the list element's Grouped in expanded XML checkbox.

List in Schema: Grouped in expanded XML

For content contributors to edit list field elements via In-Context Editing (ICE) mode, the system requires developers to first create a custom ASP.Net view to associate with the list element.

To create a custom view template to work with the list element in ICE:
  1. Open your project in Visual Studio.
  2. Use the following code samples to help you model your own custom ICE view.
    • Home.cshtml: Calls partial view that contains ICE helper. 
      @model Ingeniux.Runtime.CMSPageRequest
@using Ingeniux.Runtime
@using System.Data.SqlClient;

<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
    <!-- Main -->
    ...
    <section id="main" class="wrapper">
        <div class="container">
            @Html.Partial("editable/RevisionYears", Model.Element("RevisionYears"))
        </div>
    </section>
    ...
</body>
</html>
    • RevisionYears.cshtml: Partial view includes ICE helper (i.e., @_Helpers.RenderICEAtrribute()). 
      @model Ingeniux.Runtime.ICMSElement
@using Ingeniux.Runtime
@if (Model != null || Model.EditMode)
{
    IEnumerable<ICMSElement> revisionYears = Model.Elements("RevisionYear");
    
<div @_Helpers.RenderICEAttribute(Model)>
    
    @if (revisionYears != null && revisionYears.Count() > 0)
        
    {
        <p>
            @foreach (ICMSElement year in revisionYears)
            {
                @Html.Partial("editable/_DefaultText", year)
                <br />
            }
        </p>
    }
</div>
}
    • _DefaultText.cshtml: Partial view renders ICE list
      Note
      The @placeholderText value displays in ICE mode if items in the list do not contain values. The @placeholderText ensures that at least one list item is always viewable and clickable in ICE mode.
      @model Ingeniux.Runtime.ICMSElement
@using Ingeniux.Runtime

@if (Model != null && (!String.IsNullOrWhiteSpace(Model.Value) || Model.EditMode))
{
    var placeholderText = ViewData["Placeholder"] != null ? ViewData["Placeholder"].ToString() : String.Empty;
    var value = Model.Value;

    <span @_Helpers.RenderICEAttribute(Model)>
        @if (!String.IsNullOrWhiteSpace(value))
        {
            @Html.Raw(value)
        }
        else if (Mode.EditMode && !String.IsNullOrWhiteSpace(placeholderText))
        {
            @placeholderText <text>Placeholder</text>
        }
    </span>
}