带有字形图标和不同字体文本的 ASP.NET Actionlink

Posted 2023-03-06

【中文标题】带有字形图标和不同字体文本的 ASP.NET Actionlink

【英文标题】：ASP.NET Actionlink with glyphicon and text with different font

【发布时间】：2014-11-28 05:17:54

【问题描述】：

我想展示一个带有@html.ActionLink 的按钮，但我需要在文本中包含我的应用程序字体。

使用此代码：

<span>
    @Html.ActionLink("  Create New", "Create", null, new  @class = "btn btn-warning glyphicon glyphicon-plus-sign" )
</span>

我得到了我的按钮，但 Create New 文本与 glyphicon font-family 一起出现。

将 glyphicon 类放在 span 中不会改变任何东西

【参考方案1】：

您不应将 glyphicon 类添加到 a-tag 中。

来自 Bootstrap 网站：

不要与其他成分混合 图标类不能直接与其他组件组合。它们不应与同一元素上的其他类一起使用。相反，添加一个嵌套的<span> 并将图标类应用于<span>。

仅用于空元素 图标类只能用于不包含文本内容且没有子元素的元素。

换句话说，按照您想要的方式工作的正确 HTML 是：<a href="#" class="btn btn-warning">test <span class="glyphicon glyphicon-plus-sign"></span></a>

这使得Html.ActionLink 助手不适合。相反，你可以使用类似的东西：

<a href="@Url.Action("Action", "Controller")" class="btn btn-warning">
    link text 
    <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
</a>

【讨论】：

很好的解决方案，一个小注释可以避免浏览器显示问题：使用 和像这样的结束标记 而不是

不要忘记aria-hidden="true" 上的span 元素。

这救了我的命。谢谢！

可爱的答案。我也在寻找@Url.Action 功能，但不知道如何“搜索”.... :)

事实上确实如此，Url.Action("Action", "Controller", new MyRoute="data")

【参考方案2】：

这在 MVC 5 中适用于我：

@Html.ActionLink(" ", "EditResources", "NicheSites", new  ViewBag.dbc, item.locale, ViewBag.domainId, domainName = ViewBag.domaiName , new @class= "glyphicon glyphicon-edit" )

第一个参数不能为空或null，否则会爆。

【讨论】：

谢谢。为我工作。

这适用于没有文本的 ActionLink，即关闭按钮、添加按钮、减去按钮等。这正是我想要的。如果您的按钮有文本，“接受”的答案是最好的方法。谢谢

即使这样可行，它也不遵循 Bootstrap 文档，该文档指出 glyphicon 类不应与其他包含文本的类或元素组合。

【参考方案3】：

最好只写出 HTML，而不是尝试使其与 HtmlHelper.ActionLink 一起使用...

<span>
    <a href="@Url.Action("Create")" class="btn btn-warning">
        <span class="glyphicon glyphicon-plus-sign"></span>
        Create New
    </a>
</span>

【参考方案4】：

这是我的。灵感来自 Andrey Burykin

public static class BensHtmlHelpers

    public static MvcHtmlString IconLink(this HtmlHelper htmlHelper, string linkText, string actionName, object routeValues, String iconName, object htmlAttributes = null)
    
        var linkMarkup = htmlHelper.ActionLink(linkText, actionName, routeValues, htmlAttributes).ToHtmlString();
        var iconMarkup = String.Format("<span class=\"0\" aria-hidden=\"true\"></span>", iconName);
        return new MvcHtmlString(linkMarkup.Insert(linkMarkup.IndexOf(@"</a>"), iconMarkup));
    

【参考方案5】：

我应该使用@Url.Action而不是@Html.ActionLink的方法，示例代码如下：

<span>
<a href="@Url.Action("Create", new  @class = "btn btn-warning" )"><span class="glyphicon glyphicon-plus-sign"></span> Create New</a>
</span>

【参考方案6】：

你可以使用简单的扩展：

private static readonly String SPAN_FORMAT = "<span class=\"0\" aria-hidden=\"true\"></span>";
private static readonly String A_END = "</a>";
public static MvcHtmlString ActionLink(this HtmlHelper htmlHelper, string linkText, string actionName, object routeValues, String iconName, object htmlAttributes = null)

    var linkMarkup = htmlHelper.ActionLink(linkText, actionName, routeValues, htmlAttributes).ToHtmlString();
    if (!linkMarkup.EndsWith(A_END))
        throw new ArgumentException();

    var iconMarkup = String.Format(SPAN_FORMAT, iconName);
    return new MvcHtmlString(linkMarkup.Insert(linkMarkup.Length - A_END.Length, iconMarkup));

用法：

Html.ActionLink(" ", "DeleteChart", new  Id = _.Id , "glyphicon glyphicon-trash")

【参考方案7】：

试试吧！

@Html.ActionLink(" Cerr sesión", "Login", "Account", routeValues: null, htmlAttributes: new id = "loginLink" , @class= "glyphicon glyphicon-log-in" )

【参考方案8】：

让我们试试这个。让我知道它是否有效。谢谢

<style>
   span.super a
  
      font: (your application font) !important;
  

</style>

<span class="super">
    @Html.ActionLink("  Create New", "Create", null, new  @class = "btn btn-warning glyphicon glyphicon-plus-sign" )
</span>

【参考方案9】：

如何将 Html.BeginForm 与 FormMethod.Get / FormMethod.Post 一起使用

@using (Html.BeginForm("Action", "Controller", new  Area = "" ,
FormMethod.Get, htmlAttributes: new  title = "SomeTitle" ))
   
   <button type="submit" class="btn-link" role="menuitem">
   <i class="glyphicon glyphicon-plus-sign"></i>Create New</button>

【参考方案10】：

试试这个。为我工作。

<button class="btn btn-primary"><i class ="fa fa-plus">@Html.ActionLink(" ", "Create", "Home")</i></button>