在@ Html.ActionLink mvc asp.net中插入Glyphicons引导程序

时间:2014-04-13 22:30:24

标签: asp.net-mvc

将输入Glyphicons Boostrap而不是"编辑"在下面的代码中。你能举个例子吗。

@Html.ActionLink("Edit", "Edit", new { id = Model.id_rod }) |

调出图像而不是写作。

2 个答案:

答案 0 :(得分:29)

如果使用Bootstrap 3:

<a href="@Url.Action("Edit", new { id = Model.id_rod })">
    <i class="glyphicon glyphicon-pencil"></i>
    <span class="sr-only">Edit</span>
</a>

请注意,sr-only的使用将允许屏幕阅读器和搜索引擎的用户知道链接的用途。

答案 1 :(得分:0)

我帮助他们更容易重复使用

帮助方法扩展类

namespace Extensions {
    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 for the glyphicon                
                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 View中的示例用法(如果您不使用区域,请将区域留空字符串)

@Html.FALink("Index", "ControllerNameHere", "Back to List", "th-list", "btn btn-info", "btn_back_to_list", new {area=""})
  • 当我使用Font Awesome时,您可以轻松地用glyphicon类替换fa以使用bootstrap glyphicons。
  • 如果没有传入控制器或操作,它会使用#作为链接位置,因此它可以与下拉交互一起使用