如何用 @Html.ActionLink 中的字形替换 actionlink 文本？

Question

I want to replace X with glyphicon-trash.

我正在使用 X 作为 linktext.Which 删除 item.How 以替换为 glyphicon。

这是我的代码

 @Html.ActionLink(
                     "X",
                     "Delete",
                     "Grocery",
                     new { GroceryUsageID = item.GroceryUsageID, GroceryId = item.GroceryID },
                     new { @onclick = "return confirm('Are you sure you want to delete this Grocery');"})

Answer 1

试试这个。复制自 here ;)

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

Answer 2

您可以像下面这样操作。只需在 htmlAttributes 参数中添加 @class = "glyphicon glyphicon-trash" 并将 X 替换为 space.

 @Html.ActionLink(
        " ",
        "Delete",
        "Grocery",
        new { GroceryUsageID = item.GroceryUsageID, GroceryId = item.GroceryID },
        new { @onclick = "return confirm('Are you sure you want to delete this Grocery');", 
              @class = "glyphicon glyphicon-trash" })

Answer 3

这是我的实现，以便于重复使用

辅助方法扩展 class

namespace Extensions {
using System;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Html;
    public static class HtmlExtensions {
        public static MvcHtmlString FALink(this HtmlHelper htmlHelper, string action, string controller, string link_text, string fa_class, string btn_css_classes = "", string button_id = "", object route_values = null) {
                // declare the span                 
                TagBuilder span = new TagBuilder("span");
                span.AddCssClass($"fa fa-{fa_class}");
                span.MergeAttribute("aria-hidden", "true");         

                // declare the anchor tag
                TagBuilder anchor = new TagBuilder("a");
                // Add the href attribute to the <a> element
                if (string.IsNullOrEmpty(controller) || string.IsNullOrEmpty(action))
                    anchor.MergeAttribute("href", "#");
                else         
                    anchor.MergeAttribute("href", new UrlHelper(HttpContext.Current.Request.RequestContext).Action(action, controller, route_values));

                // Add the <span> element and the text to the <a> element
                anchor.InnerHtml = $"{span} {link_text}";
                anchor.AddCssClass(btn_css_classes);
                anchor.GenerateId(button_id);
                // Create the helper
                return MvcHtmlString.Create(anchor.ToString(TagRenderMode.Normal));    
        }
    }
}

确保在视图中包含命名空间，以便方法可用

Razor 视图中的示例用法您可以像任何股票@Html 助手一样传递您想要的任何路由值，使用逗号分隔值

使用所有参数：

@Html.FALink("ActionNameHere", "ControllerNameHere", "Back to List", "th-list", "btn btn-info", "btn_back_to_list", new {area="AreaNameHere"})

基本link类型按钮：

@Html.FALink("ActionNameHere", "ControllerNameHere", "Back to List, "th-list")

基本 link 类型按钮使用 bootstrap 为文本着色

@Html.FALink("ActionNameHere", "ControllerNameHere", "Back to List", "th-list, "btn-info")

虽然我使用 Font Awesome，但您可以轻松地将 fa 替换为 bootstraps 字形 class 以使用 bootstrap 字形
如果没有传入控制器或 Action，它将使用 # 作为 link 位置，因此它可以很好地与下拉交互交互

如何用 @Html.ActionLink 中的字形替换 actionlink 文本？

How to replace actionlink text with a glyphicon in @Html.ActionLink?

asp.net

asp.net-mvc

twitter-bootstrap

glyphicons

twitter-bootstrap-3