How To Display A List Of Links In Episerver?

Displaying a list of links on a page is a very common requirement on most websites. The most common example I see is a list of most frequently used links in the footer, like so:

episerver_linkitem_collection_example

Luckily, Episerver has a very easy property to allow us to achieve this type of effect very easily within the CMS. In today’s guide, we’re going to cover how you can implement a similar type of functionality within your site.

LinkItemCollection

When you want to create a collection of links, you can use the built in LinkItemCollection property (you can find more information about this here).

To implement the LinkItemCollection in your site, you first need to define a property within one of your pages or blocks.

[Display(Name = "Footer Links",
GroupName = SystemTabNames.Content,
Order = 100)]
public virtual LinkItemCollection FooterLinks { get; set; }

After you have your property defined, CMS content editors will be able to see a control that will allow them to add as many links as they want.

linkitemcollection

episerver_linkitemcollection_example

If you are using MVC in your view you can render your links by iterating through the collection:

<ul>
foreach (var link in Model.FooterLinks)
{
<li>
<a target="@link.Target" href="@Url.PageUrl(link.Href)">
@link.Text
</a>
</li>
}
</ul>

Conclusion

There you have it!  Displaying a list of links in EPiSErver is very easy using the inbuilt properties. When you use LinkITemColelction you can link to internal or external links

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

More Posts

1 reply
  1. R
    R says:

    You only seem to have catered for internal links and ignored the “open in” and “title” parameters.
    Here’s an alternative (EpiServer 7.5+)

    @foreach (var item in Model.FooterLinks)
    {

    string url = Url.IsLocalUrl(item.Href) ? Url.ContentUrl(item.Href) : item.Href;
    @item.Text

    }

    Reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *