Sitefinity Custom Fields for list widgets and how to use them in MVC view templates

I've added a Custom Field to the List Widget in Sitefinity 8.1, it's Type is Related data and it's Data type is Pages. The field name is LinkedPageUrl.

Works perfectly in the back end allowing me to select a page from system and store it against that particular List Item.

I can't find any place in Sitefinity's documentation that explains how I would programmatically use this field in a MVC based List.SimpleList.cshtml view template that I'm customizing.

I've seen this being used in the News widget where there is an associated Image for each News Article:

<img src="@Html.Raw(item.Fields.RelatedImg.Fields.MediaUrl)" class="img-responsive" />

But I don't get close to this because I don't have the slightest idea where to begin... What's the model structure, syntax, etc.

My objective is to change each list item rendered out into an anchor and the anchor should make use of this Related Data field's URL for it's Href property.

EDIT:

You can do something like this in the widget template:

 @foreach (var item in Model.Items)
{
    <h3 @Html.InlineEditingAttributes(Model.ProviderName, Model.ContentType.FullName, (Guid)item.Fields.Id)
        @Html.InlineEditingFieldAttributes("Title", "ShortText")>

        @item.Fields.Title
    </h3>
    <ul>
        @foreach (var listItem in ((ListViewModel)item).ListItemViewModel.Items)
        {
            <li @Html.InlineEditingAttributes(Model.ProviderName, ((ListViewModel)item).ListItemViewModel.ContentType.FullName, (Guid)listItem.Fields.Id)>
                <div @Html.InlineEditingFieldAttributes("Title", "ShortText")>
                    @listItem.Fields.Title
                </div>

                <div class="sfMultiRelatedItmsWrp">
                    <h2 class="sfrelatedItmTitle">Related pages</h2>

                    @foreach (var link in listItem.Fields.LinkedPageUrl)
                    {
                        var node = PageManager.GetManager().GetPageNode(link.Fields.Id);
                        var url = PageExtesnsions.GetFullUrl(node);

                        <div>@link.Fields.Title - @url</div>
                    }
                </div>
            </li>
        }
    </ul>
}

This is given that you selected that multiple pages can be selected per list item.

EDIT: Make sure to include the following namespaces

@model Telerik.Sitefinity.Frontend.Mvc.Models.ContentListViewModel
@using Telerik.Sitefinity.Frontend.Lists.Mvc.Models;
@using Telerik.Sitefinity.Frontend.Mvc.Helpers;
@using Telerik.Sitefinity.Modules.Pages;

EDIT2: If the custom field allows for only 1 page to be selected then it should look like this:

<div class="@Model.CssClass">

@foreach (var item in Model.Items)
{
    <h3 @Html.InlineEditingAttributes(Model.ProviderName, Model.ContentType.FullName, (Guid)item.Fields.Id)
        @Html.InlineEditingFieldAttributes("Title", "ShortText")>

        @item.Fields.Title
    </h3>
    <ul>
        @foreach (var listItem in ((ListViewModel)item).ListItemViewModel.Items)
        {
            <li @Html.InlineEditingAttributes(Model.ProviderName, ((ListViewModel)item).ListItemViewModel.ContentType.FullName, (Guid)listItem.Fields.Id)>
                <div @Html.InlineEditingFieldAttributes("Title", "ShortText")>
                    @listItem.Fields.Title
                </div>

                <div class="sfMultiRelatedItmsWrp">
                    <h2 class="sfrelatedItmTitle">Related pages</h2>

                    @{
                        var node = PageManager.GetManager().GetPageNode(listItem.Fields.LinkedPageUrl.Fields.Id);
                        var url = PageExtesnsions.GetFullUrl(node);
                    }

                    <div>@listItem.Fields.Title - @url</div>
                </div>
            </li>
         }
    </ul>
}

A good starting point is this article