Wstaw Glyphicons bootstrap w @ Html.ActionLink mvc asp.net

Question

Wprowadziłaby Glifphony Boostrap zamiast "Edit" w poniższym kodzie. Czy możesz dać mi przykład do zrobienia.

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

Aby wyświetlić obraz zamiast pisać.

Answer 1

przypadku korzystania 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> 

Uwaga wykorzystanie sr-only pozwoli użytkownikom czytników ekranu i wyszukiwarek, aby wiedzieć, co to za związek.

Answer 2

zrobiłem pomocnika dla ułatwienia ponownego użycia klasy

Helper metodę rozszerzenia

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));  
     } 
    } 
} 

Upewnij się zawierać nazw w Widoku więc metoda jest dostępna

Przykład użycia w widoku Razor (pozostaw obszar pusty ciąg znaków, jeśli nie używasz obszarów)

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

• Chociaż używam czcionki Niesamowite można łatwo zastąpić fa z klasą glyphicon używać glyphicons startowej.
• Jeśli żaden kontroler lub działania jest przekazywana, używa # jako lokalizację łącza, więc będzie grać ładny z rozwijanej interakcji