将 CSS 类应用于 Razor 中的 HTML 动作链接答案

【问题标题】：Apply CSS class to HTML Action Link in Razor将 CSS 类应用于 Razor 中的 HTML 动作链接
【发布时间】：2017-02-11 12:28:33
【问题描述】：

我有以下 HTML 代码：

<li>
  <a href="dashboard.html"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a>
</li>

代码显示菜单项如下图：

我想要的是用 Razor 代码中的@Html.ActionLink 替换链接，我试试这个：

<li>
  <i class="fa fa-dashboard fa-fw">@Html.ActionLink("Dashboard", "Index", "Home")</i>
</li>

但不幸的是，它将菜单项显示为：

也试过了：

<li>
   @Html.ActionLink("Dashboard", "Index", "Home", new { @class = "fa fa-dashboard fa-fw" })
</li>

样式覆盖文本字体并将结果显示为：

任何建议！

在此致谢

【问题讨论】：

Html.ActionLink() 仅在 <a> 标签之间呈现文本，不能用于呈现子标签。您可以使用Url.Action() 生成网址（另一种选择是渲染<i> 和ActionLink() 并使用一点css（定位），但它有点难看）。最后，如果这是你反复使用的东西，你可以创建自己的扩展方法

【解决方案1】：

试试这个：

<li>
    <a href="@Url.Action("Dashboard", "Home")">
        Dashboard <i class="fa fa-dashboard fa-fw"></i> 
    </a>
</li>

【讨论】：