How to prevent a hyperlink from linking.

Question

Is it possible to prevent an asp.net Hyperlink control from linking, i.e. so that it appears as a label, without actually having to replace the control with a label? Maybe using CSS or setting an attribute?

I know that marking it as disabled works but then it gets displayed differently (greyed out).

To clarify my point, I have a list of user names at the top of my page which are built dynamically using a user control. Most of the time these names are linkable to an email page. However if the user has been disabled the name is displayed in grey but currently still links to the email page. I want these disabled users to not link.

I know that really I should be replacing them with a label but this does not seem quite as elegant as just removing the linking ability usings CSS say (if thats possible). They are already displayed in a different colour so its obvious that they are disabled users. I just need to switch off the link.

Answer 1

If you merely want to modify the appearance of the link so as not to look like a link, you can set the CSS for your "a" tags to not have underlines:

a: link, visited, hover, active {
    text-decoration: none;
}

Though I would advise against including "hover" here because there will be no other way to know that it's a link.

Anyway I agree with @pilif here, this looks like a usability disaster waiting to happen.

Answer 2

This should work:

onclick="return false;"

if not, you could change href to "#" also. Making it appear as a rest of text is css, e.g. displaying arrow instead of hand is:

a.dummy {  
    cursor:default;  
}

Answer 3

I'm curious on what it is you which to accomplish with that. Why use a link at all?

Is it just for the formatting? In that case, just use a <span> in HTML and use stylesheets to make the format match the links.

Or you use the link and attach an onClick-Event where you "return false;" which will make the browser not do the navigation - if JS is enabled.

But: Isn't that terribly confusing for your users? Why create something that looks like a link but does nothing?

Can you provide more details? I have this feeling that you are trying to solve a bigger problem which has a way better solution than to cripple a link :-)

Answer 4

If you mean to stop the link from activating, the usual way is to link to "javascript:void(0);", i.e.:

<a href="javascript:void(0);">foo</a>

Answer 5

A Hyperlink control will render as a "a" "/a" tag no matter what settings you do. You can customize a CSS class to make the link look like a normal label.

Alternatively you can build a custom control that inherits from System.Web.UI.WebControls.HyperLink, and override the Render method

protected override void Render(HtmlTextWriter writer)
        {
            if (Enabled)
                base.Render(writer);
            else
            {
                writer.RenderBeginTag(HtmlTextWriterTag.Span);
                writer.Write(Text);
                writer.RenderEndTag(HtmlTextWriterTag.Span);
            }
        }

     }

Could be a bit overkill, but it will work for your requirements.

Plus I find is usefull to have a base asp:CustomHyperlink asp:CustomButton classes in my project files. Makes it easier to define custom behaviour throughout the project.

Answer 6

This sounds like a job for JQuery. Just give a specific class name to all of the HyperLink controls that you want the URLs removed and then apply the following JQuery snippet to the bottom of your page:

$(document).ready(function() {
    $('a.NoLink').removeAttr('href')
});

All of the HyperLink controls with the class name "NoLink" will automatically have all of their URLs removed and the link will appear to be nothing more than text.

A single line of JQuery can solve your problem.

Answer 7

Thanks for all the input, it looks like the short answer is 'No you can't (well not nicely anyway)', so I'll have to do it the hard way and add the conditional code.

Answer 8

If you are using databind in asp.net handle the databinding event and just don't set the NavigateUrl if that users is disabled.

Answer 9

Have you tried just not setting the NavigateUrl property? If this isn't set, it may just render as a span.