如何在 ASP.Net MVC 5 应用程序的自定义 HTML Helper 中添加超赞字体图标

Question

我想在我的自定义 HTML 帮助程序中使用很棒的字体图标，但我做不到。

以下是我的尝试：

HTML 帮手

   public static MvcHtmlString MenuLink(this HtmlHelper htmlHelper, string linkText, string actionName, string controllerName, object routeValues, object htmlAttributes)
    {
        var currentAction = htmlHelper.ViewContext.RouteData.GetRequiredString("action");
        var currentController = htmlHelper.ViewContext.RouteData.GetRequiredString("controller");
        var currentArea = htmlHelper.ViewContext.RouteData.DataTokens["area"];

        var builder = new TagBuilder("li")
        {
            InnerHtml = htmlHelper.ActionLink(linkText, actionName, controllerName, routeValues, htmlAttributes).ToHtmlString()
        };
        if (String.Equals(controllerName, currentController, StringComparison.CurrentCultureIgnoreCase) && String.Equals(actionName, currentAction, StringComparison.CurrentCultureIgnoreCase))
            builder.AddCssClass("active");
        //builder.AddCssClass("btn");

        return new MvcHtmlString(builder.ToString());
    }
}

自定义操作Link

     @Html.MenuLink("Resume Center", "Index", "Resume", null, new { @class = "btn btn-block"})

我在 link 上面进行了修改，但它没有按预期工作。下面的示例无效。

 @Html.MenuLink("<i class='fa fa - file'></i> Resume Center", "Index", "Resume", null, new { @class = "btn btn-block"})

原始 HTML 由自定义助手呈现：

<li class="active">
    <a class="btn btn-block" href="/Resume">Resume Center</a>
</li>

我想要类似的东西

<li class="active">
    <a class="btn btn-block" href="/Resume">
        <i class="fa fa-file"></i>Resume Center
    </a>
</li>

请帮帮我。

Answer 1

ActionLink() 只生成一个 <a> 标签。您需要将 InnerHtml = htmlHelper.ActionLink(...) 替换为您自己的代码以手动构建 html.

    public static MvcHtmlString MenuLink(this HtmlHelper htmlHelper, string linkText, string actionName, string controllerName, object routeValues, object htmlAttributes)
    {
        var currentAction = htmlHelper.ViewContext.RouteData.GetRequiredString("action");
        var currentController = htmlHelper.ViewContext.RouteData.GetRequiredString("controller");
        var currentArea = htmlHelper.ViewContext.RouteData.DataTokens["area"];
        // Build the icon and display text elements
        StringBuilder innerHtml = new StringBuilder();
        TagBuilder icon = new TagBuilder("i");
        icon.AddCssClass("fa fa-file");
        innerHtml.Append(icon.ToString());
        TagBuilder span = new TagBuilder("span");
        span.InnerHtml = linkText;
        innerHtml.Append(span.ToString());
        // Build the link
        TagBuilder link = new TagBuilder("a");
        UrlHelper urlHelper = new UrlHelper(htmlHelper.ViewContext.RequestContext);
        string url = urlHelper.Action(actionName, controllerName, routeValues);
        link.MergeAttribute("href", url);
        link.MergeAttributes(new RouteValueDictionary(htmlAttributes));
        link.InnerHtml = innerHtml.ToString();
        // Build the li element
        TagBuilder li = new TagBuilder("li");
        li.InnerHtml = link.ToString();
        if (String.Equals(controllerName, currentController, StringComparison.CurrentCultureIgnoreCase) && String.Equals(actionName, currentAction, StringComparison.CurrentCultureIgnoreCase))
        {
            li.AddCssClass("active");
        }
        // Return the html
        return new MvcHtmlString(li.ToString());
    }
}

如何在 ASP.Net MVC 5 应用程序的自定义 HTML Helper 中添加超赞字体图标

How to add font awesome icon in Custom HTML Helper in ASP.Net MVC 5 application

html

asp.net-mvc

html-helper

asp.net-mvc-5