Named Anchors And MVC Urls

4.08 (12 votes)

Named Anchors are used to generate links to specific locations within a web document. Unless you are careful, you may end up having a little trouble getting these to work using the MVC LinkExtension helpers.

Named anchors require the use of the name attribute within an <a href> element. If you look at the source code of any page on my site that contains an article with comments, you can see that the Comments section is preceded by one of these:

<a href="#" name="comments"></a>

You can also see (where there are a number of comments) that each one is "bookmarked" with its own uniquely named anchor:

<a href="#" name="commentId1033"></a>
<div class="comment">
<a href="#" name="commentId1034"></a>
<div class="comment">
<a href="#" name="commentId1035"></a>
<div class="comment">

To get these to work, so that the browser takes the user to the position in the document defined by the anchor, the URL needs to be appended with #<anchor-name>, where <anchor-name> corresponds to the name attribute in the link. Valid examples would be:

If you try to generate these types of URLs dynamically by concatenating IDs of items with strings, you may end up finding that the resulting URL contains %23 where you expected the hash or pound (#) sign. It gets UrlEncoded. And the link doesn't work as expected.

Both the ActionLink and RouteLink extension helpers contain an overload which overcomes this problem, but just looking at the current list of overload options doesn't necessarily make this obvious. Once you understand that the official HTML spec refers to the part of the URL after the # as a fragment identifier, it should become more obvious that the overload needed is this one (for the RouteLink):

LinkExtensions RouteLink method (HtmlHelper, String, String, String, String, String, Object, Object)

The fifth String argument takes the "fragment", or part after the # sign.

The Most Recent Comments panel (at the top right of my home page) uses this overload to generate the links behind the comment provider's name:

<%= Html.RouteLink(
  item.CommentName,                    // Link Text
  "Show",                              // Route Name
  null,                                // Protocol
  null,                                // Host Name
  "commentId" + item.CommentID,        // Fragment
  new {                                // Route Values
        controller = "Article", 
        action = "Show",
        id = item.Articles.ArticleID,
        title = item.Articles.Headline.ToCleanUrl()
  null                                 // HTML Attributes
    ) %>


You might also like...

Date Posted:
Last Updated:
Posted by:
Total Views to date: 23398


Recent Comments

Pam 30/08/2017 11:30
In response to Sending Email in Razor Pages
Mike, RazorPages sound like a nice choice for somebody still working in ASP classic who wants to to...

Robby Robson 15/08/2017 00:43
In response to Routing in Razor Pages
Mike: great stuff. Now that .Core Standard 2.0 is formally out, how soon will you rewrite your book...

Satyabrata Mohapatra 28/07/2017 08:59
In response to Sending Email in Razor Pages
Bit off topic, but congratulation sir for your MVP award. You deserve it !!!...

Satyabrata Mohapatra 23/07/2017 16:43
In response to Razor Pages - The Elevator Pitch
@Dale Severin You can continue to build apps using web pages....

Satyabrata Mohapatra 23/07/2017 16:40
In response to Sending Email in Razor Pages
Thanks for sharing...learned a lot...

Gfw 22/07/2017 11:53
In response to Sending Email in Razor Pages
Question... Does System.Net.Mail support SSL?...

Dale Severin 20/07/2017 03:38
In response to Razor Pages - The Elevator Pitch
I work with razor web pages extensively. I appreciate the rapid development it permits me to I am as...

Obinna Okafor 14/07/2017 01:19
In response to Routing in Razor Pages
Thank you, Mike. Good post....

Satyabrata Mohapatra 11/07/2017 16:02
In response to Routing in Razor Pages
Very powerful routing system!!...

Cyrus 05/07/2017 03:41
In response to Razor Pages - Getting Started With The Preview
How can I trim packages and services as much as possible to use just razor pages? I don’t want to to...