asp.net mvc - botones - ASP.NET Actionlink con glyphicon y texto con diferente fuente
iconos bootstrap 4 (11)
¡Intentalo!
@Html.ActionLink(" Cerrar sesión", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" , @class = "glyphicon glyphicon-log-in" })
Quiero presentar un botón con @Html.ActionLink
pero necesito tener la fuente de mi aplicación en el texto.
Con este código:
<span>
@Html.ActionLink(" Create New", "Create", null, new { @class = "btn btn-warning glyphicon glyphicon-plus-sign" })
</span>
Aparece mi botón, pero aparece el texto Crear nuevo con la familia de fuentes glyphicon.
Poner las clases de glyphicon en el lapso no cambia nada
¿Qué hay de usar Html.BeginForm con un FormMethod.Get / FormMethod.Post
@using (Html.BeginForm("Action", "Controller", new { Area = "" },
FormMethod.Get, htmlAttributes: new { title = "SomeTitle" }))
{
<button type="submit" class="btn-link" role="menuitem">
<i class="glyphicon glyphicon-plus-sign"></i>Create New</button>
}
Aquí está el mío. Inspirado por Andrey Burykin
public static class BensHtmlHelpers
{
public static MvcHtmlString IconLink(this HtmlHelper htmlHelper, string linkText, string actionName, object routeValues, String iconName, object htmlAttributes = null)
{
var linkMarkup = htmlHelper.ActionLink(linkText, actionName, routeValues, htmlAttributes).ToHtmlString();
var iconMarkup = String.Format("<span class=/"{0}/" aria-hidden=/"true/"></span>", iconName);
return new MvcHtmlString(linkMarkup.Insert(linkMarkup.IndexOf(@"</a>"), iconMarkup));
}
}
Debo ir con el enfoque de @Url.Action
lugar de @Html.ActionLink
, como ejemplo de código a continuación:
<span>
<a href="@Url.Action("Create", new { @class = "btn btn-warning" })"><span class="glyphicon glyphicon-plus-sign"></span> Create New</a>
</span>
Esto funciona para mí en MVC 5:
@Html.ActionLink(" ", "EditResources", "NicheSites", new { ViewBag.dbc, item.locale, ViewBag.domainId, domainName = ViewBag.domaiName }, new {@class= "glyphicon glyphicon-edit" })
El primer parámetro no puede estar vacío o nulo o explotará.
No debe agregar la clase glyphicon a la etiqueta a.
Desde el sitio web de Bootstrap:
No mezclar con otros componentes Las clases de iconos no se pueden combinar directamente con otros componentes. No deben usarse junto con otras clases en el mismo elemento. En su lugar, agregue un
<span>
anidado y aplique las clases de iconos al<span>
.Solo para uso en elementos vacíos Las clases de iconos solo se deben usar en elementos que no contengan contenido de texto y no tengan elementos secundarios.
En otras palabras, el HTML correcto para que esto funcione de la manera que desee sería: <a href="#" class="btn btn-warning">test <span class="glyphicon glyphicon-plus-sign"></span></a>
Esto hace que el helper Html.ActionLink
no sea adecuado. En cambio, podrías usar algo como:
<a href="@Url.Action("Action", "Controller")" class="btn btn-warning">
link text
<span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
</a>
Podría ser mejor escribir el código HTML en lugar de intentar que funcione con HtmlHelper.ActionLink
...
<span>
<a href="@Url.Action("Create")" class="btn btn-warning">
<span class="glyphicon glyphicon-plus-sign"></span>
Create New
</a>
</span>
Probemos esto. Avísame si funciona. Gracias
<style>
span.super a
{
font: (your application font) !important;
}
</style>
<span class="super">
@Html.ActionLink(" Create New", "Create", null, new { @class = "btn btn-warning glyphicon glyphicon-plus-sign" })
</span>
Prueba esto. Trabajó para mi.
<button class="btn btn-primary"><i class ="fa fa-plus">@Html.ActionLink(" ", "Create", "Home")</i></button>
Prueba esto. Use "htmlAttributes"
@Html.ActionLink(" Create New", "Create", null, htmlAttributes: new { @class = "<your class>",@style="font:<your font>" })
Puede usar una extensión simple:
private static readonly String SPAN_FORMAT = "<span class=/"{0}/" aria-hidden=/"true/"></span>";
private static readonly String A_END = "</a>";
public static MvcHtmlString ActionLink(this HtmlHelper htmlHelper, string linkText, string actionName, object routeValues, String iconName, object htmlAttributes = null)
{
var linkMarkup = htmlHelper.ActionLink(linkText, actionName, routeValues, htmlAttributes).ToHtmlString();
if (!linkMarkup.EndsWith(A_END))
throw new ArgumentException();
var iconMarkup = String.Format(SPAN_FORMAT, iconName);
return new MvcHtmlString(linkMarkup.Insert(linkMarkup.Length - A_END.Length, iconMarkup));
}
Uso:
Html.ActionLink(" ", "DeleteChart", new { Id = _.Id }, "glyphicon glyphicon-trash")