Display html within #html.actionlink with Twitter Bootstrap - asp.net

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"} )
Is there any way of keeping the <i class=... as html, so that the button displays correctly?

Answer 1

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.

Answer 2

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.

Answer 3

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)
{
//<i class="#lLink.IconClass"></i><span class="">#lLink.LinkText</span>
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 ... 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>

Answer 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.

Answer 5

#Html.ActionLink(" New", "Create", "", new { #class="icon"} )
In css style:
.icon:before{
font-family: FontAwesome;
content: "\f055";
}

Answer 6

Index

Answer 7

#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.

Answer 8

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.

Answer 9

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.
<i class="fa fa-fw fa-bar-chart-o"></i> Chart
#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.

Answer 10

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" })