Display html within @html.actionlink with Twitter Bootstrap

Question

I'm using Twitter Bootstrap, and trying to make my links ASP.Net MVC look nice.

However, the <i class=... in the link below, is html encoded, rather than being sent as html to the browser:

    @Html.ActionLink("<i class='icon-user icon-white'></i> Create New", "Create", "", New With {Key .class="btn btn-primary"} )

How button appers

Is there any way of keeping the <i class=... as html, so that the button displays correctly?

score 51 · Accepted Answer · answered May 03 '12 at 10:36

51

Instead of using @Html.ActionLink(), just write out the <a> tag yourself. You can use @Url.Action() to get the URL of an action for your HREF attribute.

The @Html helpers are nice, but they won't always provide the flexibility you need.

answered May 03 '12 at 10:36

Jonathan Wood

65,341
71
269
466

score 16 · Answer 2 · answered May 03 '12 at 15:52

I was dealing with the same issue, but wanted to keep using a helper, because I was making an Ajax button.

I ended up with these two helper methods, one for each helper:

public static MvcHtmlString IconActionLink(this AjaxHelper helper, string icon, string text, string actionName, string controllerName, object routeValues, AjaxOptions ajaxOptions, object htmlAttributes)
{
    var builder = new TagBuilder("i");
    builder.MergeAttribute("class", icon);
    var link = helper.ActionLink("[replaceme] " + text, actionName, controllerName, routeValues, ajaxOptions, htmlAttributes).ToHtmlString();
    return new MvcHtmlString(link.Replace("[replaceme]", builder.ToString()));
}

public static MvcHtmlString IconActionLink(this HtmlHelper helper, string icon, string text, string actionName, string controllerName, object routeValues, object htmlAttributes)
{
    var builder = new TagBuilder("i");
    builder.MergeAttribute("class", icon);
    var link = helper.ActionLink("[replaceme] " + text, actionName, controllerName, routeValues, htmlAttributes).ToHtmlString();
    return new MvcHtmlString(link.Replace("[replaceme]", builder.ToString()));
}

Just throw them in a static class in your project, compile and you should see them (You may need to add an using statement on your page).

When using the helper you can use "icon-plus" or even "icon-plus icon-white" for the icon string.

Definitely this answer should be marked as best one. – krypru Mar 10 '17 at 08:58 — krypru, Mar 10 '17 at 08:58

score 4 · Answer 3 · answered Sep 18 '12 at 14:49

3-Step Solution:

1. Create this HtmlExtensions class:

using System.Web.Mvc;

public static class HtmlExtensions
{
    public static MvcHtmlString ActionButton(this HtmlHelper html, string linkText, string action, string controllerName, string iconClass)
    {
        //<a href="/@lLink.ControllerName/@lLink.ActionName" title="@lLink.LinkText"><i class="@lLink.IconClass"></i><span class="">@lLink.LinkText</span></a>
        var lURL = new UrlHelper(html.ViewContext.RequestContext);

        // build the <span class="">@lLink.LinkText</span> tag
        var lSpanBuilder = new TagBuilder("span");
        lSpanBuilder.MergeAttribute("class", "");
        lSpanBuilder.SetInnerText(linkText);
        string lSpanHtml = lSpanBuilder.ToString(TagRenderMode.Normal);

        // build the <i class="@lLink.IconClass"></i> tag
        var lIconBuilder = new TagBuilder("i");
        lIconBuilder.MergeAttribute("class", iconClass);
        string lIconHtml = lIconBuilder.ToString(TagRenderMode.Normal);

        // build the <a href="@lLink.ControllerName/@lLink.ActionName" title="@lLink.LinkText">...</a> tag
        var lAnchorBuilder = new TagBuilder("a");
        lAnchorBuilder.MergeAttribute("href", lURL.Action(action, controllerName));
        lAnchorBuilder.InnerHtml = lIconHtml + lSpanHtml; // include the <i> and <span> tags inside
        string lAnchorHtml = lAnchorBuilder.ToString(TagRenderMode.Normal);

        return MvcHtmlString.Create(lAnchorHtml);
    }
}

2. Add this using at your View

@using Extensions

3. And simple call when you need

@: <li class="btn btn-mini btn-inverse"> @Html.ActionButton(lLink.LinkText, lLink.ActionName, lLink.ControllerName, lLink.IconClass)</li>

Dmitry Efimenko · Answer 4 · 2014-04-05T22:28:35.820

4

Use TwitterBootstrapMVC.

It works with intellisense, allows for fluent syntax and you can write something like this with it:

@(Html.Bootstrap().ActionLinkButton("Create New", "Create")
    .IconPrepend(Icons.user, true)
    .Style(ButtonStyle.Primary))

Parameter true in the IconPrepend is for white icon type.

Besides, it's got a lot more very useful helpers.

Disclaimer: I'm the author of TwitterBootstrapMVC

Use of this library for Bootstrap 3 is not free.

edited Apr 05 '14 at 22:28

answered Jul 08 '13 at 04:58

Dmitry Efimenko

10,973
7
62
79

10

FYI, TwitterBootstrapMVC is no longer free for developers using Bootstrap 3, as they now charge a licence fee if you are a individual or organizational developer. – CokoBWare Dec 09 '13 at 20:10
I can just recommend not to use the Html Helpers at all just raw Jquery which means 100% flexibility... – Elisabeth Apr 05 '14 at 21:53

score 4 · Answer 5 · answered Mar 05 '15 at 13:10

4

@Html.ActionLink(" New", "Create", "", new { @class="icon"} )

In css style:

.icon:before{
    font-family: FontAwesome;
    content: "\f055";
}

answered Mar 05 '15 at 13:10

Lucas Gabriel

51
1
1
3

I had to add the following to make this work. @font-face { font-family: FontAwesome; src: url(../fonts/fontawesome-webfont.woff2); } – sonicbabbler Jul 25 '16 at 14:55

score 3 · Answer 6 · answered Jan 15 '16 at 20:13

3

<a href="@Url.Action("Index","Employee")" class="btn btn-primary">Index</a>

answered Jan 15 '16 at 20:13

Sraban75

85
9

Could you expand and justify your answer? Why is it a good answer? – 93196.93 Jan 15 '16 at 20:45

score 2 · Answer 7 · answered May 08 '12 at 12:15

2

@Html.ActionLink("Link Title", "ActionName", "ControllerName", New With {.id = Model.id }, New With {.class = Html.Raw("btn btn-primary btn-mini")})

This HTML.AcionLink overload allows you to add attributess to the rendered html - remember to pass null/nothing for the needed parameters in this overload.

answered May 08 '12 at 12:15

Rob Pemberton

31
3

1

This won't affect the text that is displayed for the link, which was what the question was about. – Jonathan Wood Jun 27 '12 at 18:31

j.rmz87 · Answer 8 · 2014-05-28T16:13:37.433

1

For any ASP.NET user this is how it worked for me:

<%: Html.ActionLink("Cancel", "Index", "Catalog_Users", new { @class = "btn btn-primary" })%>

The shown text will be: Cancel. The ActionResult will be Index and Catalog_Users is the controller.

edited May 28 '14 at 16:13

answered May 26 '14 at 20:38

j.rmz87

786
1
7
18

score 1 · Answer 9 · answered Oct 16 '15 at 18:17

Though this question is old, but I still though of providing a simpler solution. At first, I thought its so difficult to achieve this but its so simple.

<a href="@Url.Action("ActionMethod", "Controller",)" class="btn btn-primary"><i class="fa fa-fw fa-bar-chart-o"></i> Chart</a>

@Url.Action() give the same power as that of Html.ActionLink. See below image (top button is exactly the way you're using it, while the bottom button is the solution to the problem.

score 0 · Answer 10 · answered Jul 10 '14 at 09:15

I like G Jeny Remirez's answer. I just want to expand on this a bit. It's important that you use a four argumnent actionlink to include the class. So, if you just want to redirect to the same controller, but a different action, it's:

@Html.ActionLink("cancel", "Index", null, new { @class = "btn" })

Or if you want to redirect to the same controller with some parameters:

@Html.ActionLink("Cancel", "Index", new { param1 = ViewBag.param1, input = "activity" }, new { @class = "btn" })

Display html within @html.actionlink with Twitter Bootstrap

10 Answers10