EPiServer, how to link to an anchor/hashtag

Question

I need a way to link to a section within my page, (using an anchor/hashtag).. the property that is supposed to handle this link is of the type LinkItemCollection, but however.. when I add a new link to the collection I get prompted with a new "dialog" where I can select the type of link I would like to create.. for instance I have the choices Page, Media, External link and Email..

My first thought was to use the option "External link" and then just simply type /#services, but EPiServer seams to "correct" me and change this to "http:slashslashslash#services"(slash = /)... so.. is there anyway to actually use the LinkItemCollection property and to be able to create internal links/anchor and links/hashtag-links?

Br, Inx

score 0 · Answer 1 · answered Nov 05 '14 at 17:41

Marija Jemuovic has aa aptly named blog post that covers this: Workaround for extending the LinkItemCollection to support anchors.

Unfortunately it's a bit involved:

Instead of trying to override EPiServer components, I've created a block that contains a Url property and anchor on page property, which are interdependent.

Basically, she creates a block which has a property Anchor and then uses that format the link inside a controller:

enter image description here

You should be able to adapt this if you need to set an anchor within a page itself.

score 0 · Answer 2 · answered Aug 06 '15 at 20:51

I've done something similar when I needed to create an EpiServer Parallax website. Instead of using the link item collection I used a content area and then created a section block.

On page render I looped through all the blocks in the content area and use the friendly url and manually render the link in the menu. Would that work for you ?

        private IList<NavigationItem> CreateMenu(StartPage startPage)
    {
        var list = new List<NavigationItem>();

        return _blockHelper.GetContentsOfType<BaseTabBlock>(startPage.MainContentArea)
                                                .Select(x => new NavigationItem() { Name = x.TabName, Link = x.TabName })
                                                .ToReadOnlyList();
    }

and this for the view

<ul class="nav navbar-nav navbar-right">
            @foreach( var item in Model.Layout.Menu)
            {
                <li>
                    <a class="page-scroll" href="#@item.Link">
                        @item.Name
                    </a>
                </li>
            }
        </ul>

I have the whole project on my github if you want to download it Parallax EpiServer Sample Site

EPiServer, how to link to an anchor/hashtag

2 Answers2