List to Details with Razor

In this quick guide, you will learn how to create a simple Razor "List-to-Details" function.

We assume that you know how to create and use Razor functions in C1 CMS.

The ListToDetails function will list pages available on your website by their title. When you click the title in the list, you will open the page's details such as its title, URL title, change info and description.

Note. The pages are intentionally used in this example as something always available in C1 CMS. You can use a data type of your choice instead and create a similar function to list products etc.

@using Composite.Core.Routing.Pages;

@inherits RazorFunction

@functions {
	public override string FunctionDescription
    {
        get { return "Lists pages on a website and shows each page's details (title, URL title, change info, description)."; }
    }	
	
    Guid PathInfoGuid (int segment)
    {
        string pathInfo = C1PageRoute.GetPathInfo()??string.Empty;
        string[] segments = pathInfo.Split('/');
        Guid guidValue;
        Guid.TryParse(segments.Skip(segment + 1).FirstOrDefault(), out guidValue);
        return guidValue;
    }
}
	
@{
    // register the use of the path info
    C1PageRoute.RegisterPathInfoUsage();

    // get the page ID from the path info if provided
    Guid pageId = PathInfoGuid(0);

    // no page GUID is provided:  list pages          
    if (pageId == Guid.Empty)
    {
            <div id="PageList">
                @foreach (var page in Data.Get<IPage>().OrderBy(p => p.Title))
                {
                    <a href="/page(@CurrentPageNode.Id)/@page.Id">@page.Title</a><br />
                }
            </div>        
    }

    // the page GUID is provided: show the page's details    
    else
    {
        IPage page = Data.Get<IPage>().Where(p => p.Id == pageId).First();
        <div id="PageDetails">
            <b>Title:</b> @page.Title <br />
            <b>URL Title</b>: <a href="/page(@page.Id)">@page.UrlTitle</a><br />
            <br />
            <b>Changed by:</b> @page.ChangedBy <br />
            <b>Changed on:</b> @page.ChangeDate <br />
            <br />
            <b>Description:</b> @(page.Description.IsEmpty() ? "(none)" : page.Description) <br />
        </div>
        <br />
        <a href="/page(@CurrentPageNode.Id)">Back to List</a><br />
    }  
}

Download the sample

Note. To show the details of a specific page, the function uses the PathInfo. It attempts to get the page's ID from the path. If no GUID is provided, the function simply lists the pages; otherwise, it uses the page's ID to get and show the details.

As you can see in the example, two static PathInfo-related methods of the Composite.Core.Routing.Pages.C1PageRoute class are used:

• The RegisterPathInfoUsage method tells C1 CMS that the extra path info on the URL is valid (and prevents an HTTP 404).
• The GetPathInfo method is used in an ad-hoc function called PathInfoGuid to get a value from the specified PathInfo's segment (zero-based) - a GUID that stands for a page's ID. 

If no ID is provided in the PathInfo, PathInfoGuid returns an empty GUID. This value (empty or not) helps determine whether to list pages (no ID provided), or show information on a specific page (the ID provided).

To get CMS Pages, Data.Get<IPage> is used.

Note. If you use your own data type, say, Demo.Products, you will get the data of this type like this:  Data.Get<Demo.Products>.

The links for each page's title are built by appending the page's ID (page.Id) as part of the PathInfo. You may have noticed the use of CurrentPageNode to get the ID of the current page for the ~/page(…) construct, in order to create a C1 CMS-compliant URL.

When showing the Description's value, a ternary operator ?: for a condition expression is used. As the page's description might not be always provided, it makes sense to explicitly indicate that in the details ("(none)").

For the user's convenience a link to the page with no PathInfo is added below the details ("Back to List"), which returns the user to the list of pages.