Putting HTML inside Html.ActionLink(), plus No Link Text?

Question

I have two questions:

I'm wondering how I can display no link text when using Html.ActionLink() in an MVC view (actually, this is Site.Master).

There is not an overloaded version that does not allow link text, and when I try passing in just a blank string, the compiler tells me it needs a non-empty string.

How can I fix this?

I need to put <span> tags within the anchor tag, but it's not working with Html.ActionLink();. I'd like to see the following output:

Span text

How can I put tags inside of the anchor tag in ASP.NET MVC?

What would be the purpose/use of having a blank action link? — David, Dec 29 '09 at 14:47

David · Accepted Answer · 2013-07-12T08:38:06.447

348

Instead of using Html.ActionLink you can render a url via Url.Action

<a href="<%= Url.Action("Index", "Home") %>"><span>Text</span></a>
<a href="@Url.Action("Index", "Home")"><span>Text</span></a>

And to do a blank url you could have

<a href="<%= Url.Action("Index", "Home") %>"></a>
<a href="@Url.Action("Index", "Home")"></a>

edited Jul 12 '13 at 08:38

answered Dec 29 '09 at 14:49

David

15,150
15
61
83

3

I had to use Text, my dev isn't around to ask why I had to do this but it may be helpful for anyone tring to use the above answer and finding it didnt work. – Dave Haigh Jul 12 '13 at 08:12
4

@Url.Action is when using razor template. I've updated the answer so you can see both. – David Jul 12 '13 at 08:36
1

`Create` also works. The quotes are not required. – David Sep 15 '15 at 20:54
2

For static content why not type the html directly? It seems less verbose and simpler – SkeetJon Dec 02 '15 at 07:57
1

Not a real option in Asp.Net Core 2 anymore if you want to use Ajax. – Zorkind Aug 09 '18 at 01:05

score 16 · Answer 2 · answered Dec 29 '09 at 15:04

A custom HtmlHelper extension is another option. Note: ParameterDictionary is my own type. You could substitute a RouteValueDictionary but you'd have to construct it differently.

public static string ActionLinkSpan( this HtmlHelper helper, string linkText, string actionName, string controllerName, object htmlAttributes )
{
    TagBuilder spanBuilder = new TagBuilder( "span" );
    spanBuilder.InnerHtml = linkText;

    return BuildNestedAnchor( spanBuilder.ToString(), string.Format( "/{0}/{1}", controllerName, actionName ), htmlAttributes );
}

private static string BuildNestedAnchor( string innerHtml, string url, object htmlAttributes )
{
    TagBuilder anchorBuilder = new TagBuilder( "a" );
    anchorBuilder.Attributes.Add( "href", url );
    anchorBuilder.MergeAttributes( new ParameterDictionary( htmlAttributes ) );
    anchorBuilder.InnerHtml = innerHtml;

    return anchorBuilder.ToString();
}

score 14 · Answer 3 · answered Jun 06 '12 at 11:38

14

Here is (low and dirty) workaround in case you need to use ajax or some feature which you cannot use when making link manually (using tag):

<%= Html.ActionLink("LinkTextToken", "ActionName", "ControllerName").ToHtmlString().Replace("LinkTextToken", "Refresh <span class='large sprite refresh'></span>")%>

You can use any text instead of 'LinkTextToken', it is there only to be replaced, it is only important that it does not occur anywhere else inside actionlink.

answered Jun 06 '12 at 11:38

Goran Obradovic

8,951
9
50
79

6

+1 Nice idea. In Razor, you'll have to rap all of that in `Html.Raw()` – Carrie Kendall Jun 10 '14 at 13:38
Thanks :) Now that I see what we used, I almost get embarrassed, doing these things on the server is such waste of server resources... – Goran Obradovic Jun 10 '14 at 18:16
1

As I'm using @Ajax.ActionLink and didn't feel like manually setting all the `date-` attributes, this is the best solution for me. +1 – asontu Mar 15 '17 at 16:07
Thanks, worked like a charm when I was also using Ajax.ActionLink. It didn't seem to slow down anything and I got to keep the same layout and styling. – Blacky Wolf Mar 23 '17 at 15:11
Just want to say, this does not work in .Net Core, ToHtmlString() has been removed in v2 not sure about v1 – Zorkind Aug 09 '18 at 01:03

score 13 · Answer 4 · answered Dec 29 '09 at 14:48

13

Just use Url.Action instead of Html.ActionLink:

<li id="home_nav"><a href="<%= Url.Action("ActionName") %>"><span>Span text</span></a></li>

answered Dec 29 '09 at 14:48

Craig Stuntz

125,891
12
252
273

@CraigStunz why should we use Url.Action instead of Html.ActionLink ? – Roxy'Pro Sep 18 '17 at 12:32

score 7 · Answer 5 · answered Apr 07 '15 at 15:23

7

This has always worked well for me. It's not messy and very clean.

<a href="@Url.Action("Index", "Home")"><span>Text</span></a>

answered Apr 07 '15 at 15:23

dbarth

228
3
6

Url.Action does not have a constructor that will take htmlAttributes. Not the same as ActionLink. – barrypicker Aug 10 '16 at 18:23
That's because it creates a URL, not an a tag – seadoggie01 Nov 02 '21 at 13:49

score 3 · Answer 6 · answered Aug 10 '16 at 20:36

I ended up with a custom extension method. Its worth noting, when trying to place HTML inside of an Anchor object, the link text can be either to the left, or to the right of the inner HTML. For this reason, I opted to provide parameters for left and right inner HTML - the link text is in the middle. Both left and right inner HTML are optional.

Extension Method ActionLinkInnerHtml:

    public static MvcHtmlString ActionLinkInnerHtml(this HtmlHelper helper, string linkText, string actionName, string controllerName, RouteValueDictionary routeValues = null, IDictionary<string, object> htmlAttributes = null, string leftInnerHtml = null, string rightInnerHtml = null)
    {
        // CONSTRUCT THE URL
        var urlHelper = new UrlHelper(helper.ViewContext.RequestContext);
        var url = urlHelper.Action(actionName: actionName, controllerName: controllerName, routeValues: routeValues);

        // CREATE AN ANCHOR TAG BUILDER
        var builder = new TagBuilder("a");
        builder.InnerHtml = string.Format("{0}{1}{2}", leftInnerHtml, linkText, rightInnerHtml);
        builder.MergeAttribute(key: "href", value: url);

        // ADD HTML ATTRIBUTES
        builder.MergeAttributes(htmlAttributes, replaceExisting: true);

        // BUILD THE STRING AND RETURN IT
        var mvcHtmlString = MvcHtmlString.Create(builder.ToString());
        return mvcHtmlString;
    }

Example of Usage:

Here is an example of usage. For this example I only wanted the inner html on the right side of the link text...

@Html.ActionLinkInnerHtml(
    linkText: "Hello World"
        , actionName: "SomethingOtherThanIndex"
        , controllerName: "SomethingOtherThanHome"
        , rightInnerHtml: "<span class=\"caret\" />"
        )

Results:

this results in the following HTML...

<a href="/SomethingOtherThanHome/SomethingOtherThanIndex">Hello World<span class="caret" /></a>

score 1 · Answer 7 · answered Apr 18 '14 at 20:40

I thought this might be useful when using bootstrap and some glypicons:

<a class="btn btn-primary" 
    href="<%: Url.Action("Download File", "Download", 
    new { id = msg.Id, distributorId = msg.DistributorId }) %>">
    Download
    <span class="glyphicon glyphicon-paperclip"></span>
</a>

This will show an A tag, with a link to a controller, with a nice paperclip icon on it to represent a download link, and the html output is kept clean

william-kid · Answer 8 · 2014-07-05T22:38:32.973

Here is an uber expansion of @tvanfosson's answer. I was inspired by it and decide to make it more generic.

    public static MvcHtmlString NestedActionLink(this HtmlHelper htmlHelper, string linkText, string actionName,
        string controllerName, object routeValues = null, object htmlAttributes = null,
        RouteValueDictionary childElements = null)
    {
        var htmlAttributesDictionary = HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);

        if (childElements != null)
        {
            var urlHelper = new UrlHelper(htmlHelper.ViewContext.RequestContext);

            var anchorTag = new TagBuilder("a");
            anchorTag.MergeAttribute("href",
                routeValues == null
                    ? urlHelper.Action(actionName, controllerName)
                    : urlHelper.Action(actionName, controllerName, routeValues));
            anchorTag.MergeAttributes(htmlAttributesDictionary);
            TagBuilder childTag = null;

            if (childElements != null)
            {
                foreach (var childElement in childElements)
                {
                    childTag = new TagBuilder(childElement.Key.Split('|')[0]);
                    object elementAttributes;
                    childElements.TryGetValue(childElement.Key, out elementAttributes);

                    var attributes = HtmlHelper.AnonymousObjectToHtmlAttributes(elementAttributes);

                    foreach (var attribute in attributes)
                    {
                        switch (attribute.Key)
                        {
                            case "@class":
                                childTag.AddCssClass(attribute.Value.ToString());
                                break;
                            case "InnerText":
                                childTag.SetInnerText(attribute.Value.ToString());
                                break;
                            default:
                                childTag.MergeAttribute(attribute.Key, attribute.Value.ToString());
                                break;
                        }
                    }
                    childTag.ToString(TagRenderMode.SelfClosing);
                    if (childTag != null) anchorTag.InnerHtml += childTag.ToString();
                }                    
            }
            return MvcHtmlString.Create(anchorTag.ToString(TagRenderMode.Normal));
        }
        else
        {
            return htmlHelper.ActionLink(linkText, actionName, controllerName, routeValues, htmlAttributesDictionary);
        }
    }

It is great that you were inspired and have the ability to do this. However, I look at nested foreach statements and want to run. It simply it not maintainable by most developers. If it is pretty set in stone black box type extension method then possibly ok, but it has a code smell to it. Not easy on the eyes at all for something that is pretty simple. Thanks for your efforts though. — Tom Stickel, Sep 12 '14 at 21:28
I very much agree about nested for loops. For the sake of succinctness it is there. From an optimization stand point yes the nested for loop should be in its own private method, and parameters need to be asserted, the code needs to be much more defensive, etc. — william-kid, Oct 16 '14 at 15:03

score 0 · Answer 9 · answered May 21 '14 at 11:23

0

It's very simple.

If you want to have something like a glyphicon icon and then "Wish List",

<span class="glyphicon-heart"></span> @Html.ActionLink("Wish List (0)", "Index", "Home")

answered May 21 '14 at 11:23

DanKodi

3,550
27
26

score 0 · Answer 10 · edited Oct 07 '15 at 18:17

0

Please try below Code that may help you.

 @Html.ActionLink(" SignIn", "Login", "Account", routeValues: null, htmlAttributes: new {  id = "loginLink" ,**@class="glyphicon glyphicon-log-in"** })

edited Oct 07 '15 at 18:17

Gabriel

3,564
1
27
49

answered Mar 14 '15 at 21:42

Ahsanul

215
2
5

just simple add ,@class and then actual css class help me to solve my problem – Ahsanul Mar 14 '15 at 21:44

score 0 · Answer 11 · answered Aug 26 '15 at 16:59

0

My solution using bootstrap components:

<a class="btn btn-primary" href="@Url.Action("resetpassword", "Account")">
    <span class="glyphicon glyphicon-user"></span> Reset Password
</a>

answered Aug 26 '15 at 16:59

Carlos Toledo

2,519
23
23

score 0 · Answer 12 · answered Jan 13 '22 at 11:50

please try this code:

@Html.Raw(@Html.ActionLink("text", "ActionName", "ControllerName", null, new { area = "Home" }).ToHtmlString().Replace("text", "<i class='fa fa-car sub-icon-mg' aria-hidden='true'></i> <span class='mini-sub-pro'>Link Text</span>"))

Putting HTML inside Html.ActionLink(), plus No Link Text?

12 Answers12

Linked

Related