Using HtmlAnchor or ASP.NET HyperLink for anchor tag that navigates in-page named anchor

I am trying to render a simple hyperlink that links to a named anchor within the page, for example:

<a href="#namedAnchor" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">scroll to down</a>

<a name="namedAnchor">down</a>

The problem is that when I use an ASP.NET control like asp:HyperLink or HtmlAnchor, the href="#namedAnchor" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" is rendered as href="controls/#namedAnchor" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" (where controls is the subdirectory where the user control containing the anchor is). Here is the code for the control, using two types of anchor controls, which both have the same problem:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Test.ascx.cs" Inherits="TestWebApplication1.controls.Test" %>

<a href="#namedAnchor" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" runat="server">HtmlAnchor</a>

<asp:HyperLink NavigateUrl="#namedAnchor" runat="server">HyperLink</asp:HyperLink>

The generated source looks like:

<a href="controls/#namedAnchor" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">HtmlAnchor</a>

<a href="controls/#namedAnchor" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">HyperLink</a>

I really just want:

<a href="#namedAnchor" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">HtmlAnchor</a>

<a href="#namedAnchor" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">HyperLink</a>

I am using the HtmlAnchor or HyperLink class because I want to make changes to other attributes in the code behind. I do not want to introduce a custom web control for this requirement, as the requirement I’m pursuing is not that important enough to justify abandoning the traditional ASP.NET link controls. It seems like I should be able to use the ASP.NET link controls to generate the desired link.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Instead of using the NavigateUrl property, just use the href property

<asp:HyperLink href="#namedAnchor" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" runat="server">HyperLink</asp:HyperLink>

Method 2

To set the HREF property in codebehind:

HyperLink link = new HyperLink();
link.Attributes.Add("href", "#" + doc.DocumentID.ToString());
link.Text = doc.DocumentNumber;

This will give you:

<a href="#111" rel="nofollow noreferrer noopener">blah blah</a>

Method 3

Set it as a custom property on the link:

        HyperLink link = new HyperLink();
        link.Attributes.Add("name", doc.DocumentID.ToString());
        link.Text = doc.DocumentNumber;

This will give you:

<a name="111">blah blah</a>

Method 4

If you must use NavigateUrl Property, which is sometimes necesary then you can use:

hypID.NavigateUrl = HttpContext.Current.Request.Url.AbsoluteUri & "#MyAnchor"

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0