استفاده از glyphicon در ActionLink

5/6/2016 MVC
3820

در حالت عادی از ایکنهایbootstrap و یا FontAwsome  در actionLink  ها به سادگی نمیشود استفاده کرد.

 و یا باید از کد زیر استفاده کرد 

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

از این Helper  میتوان در پوشه ای به عنوان Class  تعریف کرد و به راحتی استفاده کنیم 

using System.Web.Mvc;
using System.Web.Routing;

 public static class GlyphiconBotton
    {
        // As the text the: "<span class='glyphicon glyphicon-plus'></span>" can be entered
        public static MvcHtmlString NoEncodeActionLink(this HtmlHelper htmlHelper,
                                             string text, string title, string action,
                                             string controller,
                                             object routeValues = null,
                                             object htmlAttributes = null)
        {
            UrlHelper urlHelper = new UrlHelper(htmlHelper.ViewContext.RequestContext);

            TagBuilder builder = new TagBuilder("a");
            builder.InnerHtml = text;
            builder.Attributes["title"] = title;
            builder.Attributes["href"] = urlHelper.Action(action, controller, routeValues);
            builder.MergeAttributes(new RouteValueDictionary(HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes)));

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

    }

و برا ی استفاده 

<div class="pull-right">
    @Html.NoEncodeActionLink("<span class='glyphicon glyphicon-pencil'></span>", "Edit", "Edit", "People", routeValues: new { id = item.Id }, htmlAttributes: new { data_modal = "", @class = "btn btn-default" })
    &nbsp;
    @Html.NoEncodeActionLink("<span class='glyphicon glyphicon-search'></span>", "Details", "Details", "People", routeValues: new { id = item.Id }, htmlAttributes: new { data_modal = "", @class = "btn btn-default" })
    &nbsp;
    @Html.NoEncodeActionLink("<span class='glyphicon glyphicon-trash'></span>", "Delete", "Delete", "People", routeValues: new { id = item.Id }, htmlAttributes: new { data_modal = "", @class = "btn btn-danger" })
</div>

 درصورتی که نیاز داشته باشید تا در کنار ایکون یک متن هم نمایش دهید لازم است تا متن را بعد از تگ بسته <span/>  چرا که اگر در بین تگ sapn  قرار دهید نمیتوانیئ فونت دلخواه خود را به متن اعمال کنید.

@Html.NoEncodeActionLink("<span class='glyphicon glyphicon-pencil'></span>  link text", "Edit", "Edit", "People", routeValues: null, htmlAttributes: new { data_modal = "" })