41

我正在使用 Twitter Bootstrap，并试图让我的链接 ASP.Net MVC 看起来不错。

但是，下面链接中的 <i class=... 是 html 编码的，而不是作为 html 发送到浏览器：

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

按钮如何出现

有没有办法将 <i class=... 保持为 html，以便按钮正确显示？

4

10 回答 10

51

而不是使用@Html.ActionLink()，只需自己写出<a>标签。您可以使用@Url.Action()获取 HREF 属性的操作 URL。

@Html助手很好，但它们并不总是提供您需要的灵活性。

于 2012-05-03T10:36:43.807 回答
16

我正在处理同样的问题，但想继续使用帮助程序，因为我正在制作一个 Ajax 按钮。

我最终得到了这两个辅助方法，每个辅助方法一个：

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()));
}

只需将它们放入项目中的静态类中，编译即可看到它们（您可能需要在页面上添加 using 语句）。

使用帮助程序时，您可以使用“icon-plus”甚至“icon-plus icon-white”作为图标字符串。

于 2012-05-03T15:52:33.097 回答
4

三步解决方案：

1. 创建这个 HtmlExtensions 类：

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.在你的视图中添加这个 

@using Extensions

3. 并在您需要时简单调用

@: <li class="btn btn-mini btn-inverse"> @Html.ActionButton(lLink.LinkText, lLink.ActionName, lLink.ControllerName, lLink.IconClass)</li>
于 2012-09-18T14:49:40.123 回答
4

使用TwitterBootstrapMVC。

它与智能感知一起工作，允许流畅的语法，你可以用它写这样的东西：

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

true中的参数IconPrepend用于白色图标类型。

此外，它还有很多非常有用的助手。

免责声明：我是 TwitterBootstrapMVC 的作者

将此库用于 Bootstrap 3 不是免费的。

于 2013-07-08T04:58:07.953 回答
4 
@Html.ActionLink(" New", "Create", "", new { @class="icon"} )

在 CSS 样式中：

.icon:before{
    font-family: FontAwesome;
    content: "\f055";
}
于 2015-03-05T13:10:22.997 回答
3 
<a href="@Url.Action("Index","Employee")" class="btn btn-primary">Index</a>
于 2016-01-15T20:13:11.893 回答
2

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

此 HTML.AcionLink 重载允许您向呈现的 html 添加属性 - 请记住在此重载中为所需参数传递 null/nothing。

于 2012-05-08T12:15:32.373 回答
1

对于任何 ASP.NET 用户来说，这就是它对我的工作方式：

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

显示的文本将是：取消。ActionResult 将是 Index 而 Catalog_Users 是控制器。

于 2014-05-26T20:38:53.117 回答
1

虽然这个问题很老，但我仍然想提供一个更简单的解决方案。起初，我认为实现这一目标非常困难，但它是如此简单。

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

@Url.Action() 提供与 Html.ActionLink 相同的功能。请参见下图（顶部按钮正是您使用它的方式，而底部按钮是问题的解决方案。

在 MVC Html.Action 函数中使用 html 代码

于 2015-10-16T18:17:05.907 回答
0

我喜欢 G Jeny Remirez 的回答。我只是想稍微扩展一下。使用四个参数的 actionlink 来包含该类很重要。所以，如果你只想重定向到同一个控制器，但不同的操作，它是：

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

或者，如果您想使用一些参数重定向到同一个控制器：

@Html.ActionLink("Cancel", "Index", new { param1 = ViewBag.param1, input = "activity" }, new { @class = "btn" })
于 2014-07-10T09:15:32.430 回答