Login
Home Knowledge Base Documentation CMS 10 Development Building an MVC Website for DSS Developing MVC Solution by Example Rendering XML Content Rendering In-Context Editing (ICE) Content Custom View for ICE List Element

Custom View for ICE List Element

On This Page

In order for content contributors to edit lists properly in ICE, developers must first create a custom ASP.Net view.

Prerequisite task:

  • When creating the schema that contains an ICE list, be sure to enable the list element's Grouped in expanded XML option.

    List in Schema: Grouped in expanded XML

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

      @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>
}

      Note: The PlaceholderText value will display in ICE mode, if items in the list do not contain values. The PlaceholderText ensures that there will always be at least one list item that is viewable and clickable in ICE mode.