如何生成带有图标的 Html.ActionLink答案

【问题标题】：how to generate Html.ActionLink with icon如何生成带有图标的 Html.ActionLink
【发布时间】：2014-02-23 07:27:06
【问题描述】：

我开始学习 ASP.NET MVC，有一个问题，如何使用Html.ActionLink 生成代码，如下所示：

<a href="~/Views/Home/Create.cshtml" class="btn btn-primary">
    <i class="icon-pencil icon-white"></i>
    <span>
        <strong>Create</strong>
    </span>            
</a>

请。

【问题讨论】：

我用过这个，但是不明白怎么添加标签@Html.ActionLink("Create", "Create", "Home", null, new {@class="btn btn-primary "})

标签： html asp.net-mvc razor

【解决方案1】：

Html.ActionLink() 仅支持纯文本链接。

对于更复杂的链接，您应该使用<a href="@Url.Action(...)">。

【讨论】：

【解决方案2】：

我想添加到 SLaks 的答案中。

将<a href="@Url.Action(...)"> 与 user2567619 想要的一起使用。

<a href="@Url.Action("Create", "Home")" class="btn btn-primary">
    <i class="icon-pencil icon-white"></i>
    <span>
        <strong>Create</strong>
    </span>            
</a>

我认为值得一提的是，@Url.Action 可以采用这样的参数：

@Url.Action(string actionName, string controllerName)

而@Html.ActionLink 可以采用这样的参数：

@Html.ActionLink(string linkText, string actionName, string controllerName)

这可能很明显，但我认为值得注意。

编辑

正如 Peck_conyon 所指出的，对于 @Url.Action 和 @Html.ActionLink，这些只是十种不同的重载方法之一。
有关UrlHelper.Action 的文档，请查看here。
有关LinkEtensions.ActionLink 的文档，请查看here。

【讨论】：

您提到的只是此方法的 10 个重载之一。 @Html.ActionLink 在 MVC5 中还有其他 9 种使用方式
@Peck_conyon 感谢您的评论。我已经尝试相应地更新它。我想展示一个简单的例子，同时显示 actionName 和 controllerName 参数，但是这两个参数都有 10 个重载，这是值得注意的。

【解决方案3】：

如果是在布局页面，可以用这个，我觉得可能有帮助：

    &lt;li&gt;@Html.ActionLink(" Login", "Index", new { Controller = "Login", Area = "Security" }, new { @class = "glyphicon glyphicon-log-in" })&lt;/li&gt;

或者像这样的action_link：

    <p>
    @Html.ActionLink(" Create New", "Add", "Event", FormMethod.Post, new { @class = "glyphicon glyphicon-plus" })</p>

希望这会有所帮助。

【讨论】：

【解决方案4】：

@Html.ActionLink("Edit","Edit","",new { @class= "btn btn-primary" })

Result

【讨论】：

【解决方案5】：

就这么简单：

@Html.ActionLink("Title", "Action", null, new {@class="btn btn-info fa fa-pencil" })

【讨论】：

【解决方案6】：

这个例子可能会对你有所帮助。

@Html.ActionLink(" ", "Controller", new { id = item.Id }, new { @class = "btn
                 btn-success btn-circle fa fa-plus-circle", title = "Confirm" })

这样你就会有一个没有文字的图标。

【讨论】：