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>
<h2>Comments</h2>

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:

http://www.mikesdotnetting.com/Article/129/Simple-task-Scheduling-using-Global.asax#commentId1031
http://www.mikesdotnetting.com/Article/46/CSharp-Regular-Expressions-Cheat-Sheet#comments

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
    ) %>

 

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

0 Comments

Recent Comments

Thomas 05/03/2018 00:59
In response to I'm Not Writing A Book On Razor Pages
There's a typo on this page: = true)] should be [BindProperty(SupportsGet = true)]...

Rolf Herbert 04/03/2018 19:25
In response to I'm Not Writing A Book On Razor Pages
So is MS deprecating razor Web Pages..? Is it dead..? I wish they would stop killing things so its...

Borut 17/02/2018 12:59
In response to I'm Not Writing A Book On Razor Pages
Mike, is it possible that Web Pages and Razor Pages "live" together in one web application? I a I...

hrboyce 09/02/2018 04:44
In response to I'm Not Writing A Book On Razor Pages
Mike, First thanks for doing this but I have to ask, any chance you would consider converting one of...

aziz sallam 07/02/2018 10:18
In response to I'm Not Writing A Book On Razor Pages
u are a great man...

Satyabrata Mohapatra 31/01/2018 11:36
In response to I'm Not Writing A Book On Razor Pages
This is a great news!!!! Thanks...

tangdf 30/01/2018 07:25
In response to I'm Not Writing A Book On Razor Pages
=> { o.ConfigureFilter(new IgnoreAntiforgeryTokenAttribute()); }); The extension method does...

Obinna Okafor 30/01/2018 04:02
In response to I'm Not Writing A Book On Razor Pages
Thank you very much. I would like to see a project built from scratch using Razor Pages. And it show...

rachida Dukes 31/10/2017 13:52
In response to Customising Identity in Razor Pages
Thanks again for this wonderful tutorial. I followed all the steps in this section called: Adding...

Rachida 31/10/2017 12:06
In response to Customising Identity in Razor Pages
Thanks very much for this wonderful tutorial, it helped a lot....