在操作中使用 Bootstrap 组件 link

Question

如何使用 @HTML.ActionLink 中的 bootstrap 图标？当我使用这个时：

@Html.ActionLink("Logout", "Logout", "Admin", new {@class = "glyphicon glyphicon-off" })

显示的是：bootstrap 图标，但仍有文本。

如何删除 "logout" 并只显示图标？

Answer 1

遗憾的是，您不能将空字符串作为 Html.ActionLink 辅助方法的 linkText 参数传递。

所以写纯HTML来构建一个锚标签并将文本设置为空。您可以使用 Url.Action 辅助方法为您的操作方法生成 url 并将其结果用作锚标记的 href 值。

这应该可以正常工作。

<a href="@Url.Action("Logout", "Admin")"  class= "glyphicon glyphicon-off"></a>

Answer 2

您可以编写一个新的 class 来隐藏锚文本，这样您只需添加 class.

就可以为所有锚重复使用此功能

a.hide-text{
    line-height: 0; 
    font-size: 0;
    color: transparent; 
 }

和

@Html.ActionLink("Logout", "Logout", "Admin", new {@class = "hide-text glyphicon glyphicon-off" })

Answer 3

有时，如果您手动创建超链接，它既简单又干净。

<a href="@Url.Action("Logout", "Admin")">
    <span class="glyphicon glyphicon-off" aria-hidden="true"></span>
</a>

Using Bootstrap Component in Action link