asp.net - net - poner imagen en html actionlink
Mostrar html dentro de @ html.actionlink con Twitter Bootstrap (10)
Estoy usando Twitter Bootstrap y tratando de hacer que mis enlaces ASP.Net MVC se vean bien.
Sin embargo, la <i class = ... en el siguiente enlace está codificada en html, en lugar de enviarse como html al navegador:
@Html.ActionLink("<i class=''icon-user icon-white''></i> Create New", "Create", "", New With {Key .class="btn btn-primary"} )
¿Hay alguna forma de mantener <i class = ... html, para que el botón se muestre correctamente?
@ Html.ActionLink ("Título del enlace", "Nombre de la acción", "Nombre del controlador", Nuevo con {.id = Model.id}, Nuevo con {.id class = Html.Raw ("btn btn-primary btn-mini")} )
Esta sobrecarga HTML.AcionLink le permite agregar atributos al html renderizado. Recuerde pasar null / nothing para los parámetros necesarios en esta sobrecarga.
Aunque esta pregunta es antigua, aún así considero una solución más simple. Al principio, pensé que era muy difícil lograr esto, pero es muy simple.
<a href="@Url.Action("ActionMethod", "Controller",)" class="btn btn-primary"><i class="fa fa-fw fa-bar-chart-o"></i> Chart</a>
@ Url.Action () da el mismo poder que el de Html.ActionLink. Vea la imagen a continuación (el botón superior es exactamente la forma en que lo está usando, mientras que el botón inferior es la solución al problema).
En lugar de usar @Html.ActionLink() , simplemente escriba la etiqueta <a> usted mismo. Puede usar @Url.Action() para obtener la URL de una acción para su atributo HREF.
Los ayudantes de @Html son agradables, pero no siempre proporcionarán la flexibilidad que necesita.
Estaba lidiando con el mismo problema, pero quería seguir usando un ayudante, porque estaba haciendo un botón de Ajax.
Terminé con estos dos métodos de ayuda, uno para cada ayudante:
public static MvcHtmlString IconActionLink(this AjaxHelper helper, string icon, string text, string actionName, string controllerName, object routeValues, AjaxOptions ajaxOptions, object htmlAttributes)
{
var builder = new TagBuilder("i");
builder.MergeAttribute("class", icon);
var link = helper.ActionLink("[replaceme] " + text, actionName, controllerName, routeValues, ajaxOptions, htmlAttributes).ToHtmlString();
return new MvcHtmlString(link.Replace("[replaceme]", builder.ToString()));
}
public static MvcHtmlString IconActionLink(this HtmlHelper helper, string icon, string text, string actionName, string controllerName, object routeValues, object htmlAttributes)
{
var builder = new TagBuilder("i");
builder.MergeAttribute("class", icon);
var link = helper.ActionLink("[replaceme] " + text, actionName, controllerName, routeValues, htmlAttributes).ToHtmlString();
return new MvcHtmlString(link.Replace("[replaceme]", builder.ToString()));
}
Simplemente colóquelos en una clase estática en su proyecto, compile y debería verlos (puede que necesite agregar una declaración de uso en su página).
Cuando use el asistente, puede usar "icon-plus" o incluso "icon-plus icon-white" para la cadena del icono.
Me gusta la respuesta de G Jeny Remirez. Solo quiero expandir esto un poco. Es importante que use un enlace de acción de cuatro argumnentos para incluir la clase. Entonces, si solo quieres redirigir al mismo controlador, pero una acción diferente, es:
@Html.ActionLink("cancel", "Index", null, new { @class = "btn" })
O si desea redireccionar al mismo controlador con algunos parámetros:
@Html.ActionLink("Cancel", "Index", new { param1 = ViewBag.param1, input = "activity" }, new { @class = "btn" })
Para cualquier usuario de ASP.NET, así es como funcionó para mí:
<%: Html.ActionLink("Cancel", "Index", "Catalog_Users", new { @class = "btn btn-primary" })%>
El texto mostrado será: Cancelar. ActionResult será Index y Catalog_Users es el controlador.
Use TwitterBootstrapMVC .
Funciona con intellisense, permite una sintaxis fluida y puedes escribir algo como esto con ella:
@(Html.Bootstrap().ActionLinkButton("Create New", "Create")
.IconPrepend(Icons.user, true)
.Style(ButtonStyle.Primary))
El parámetro true en IconPrepend es para el tipo de icono blanco.
Además, tiene muchos más ayudantes muy útiles.
Descargo de responsabilidad: soy el autor de TwitterBootstrapMVC
El uso de esta biblioteca para Bootstrap 3 no es gratuito.
Solución de 3 pasos:
1. Crea esta clase HtmlExtensions:
using System.Web.Mvc;
public static class HtmlExtensions
{
public static MvcHtmlString ActionButton(this HtmlHelper html, string linkText, string action, string controllerName, string iconClass)
{
//<a href="/@lLink.ControllerName/@lLink.ActionName" title="@lLink.LinkText"><i class="@lLink.IconClass"></i><span class="">@lLink.LinkText</span></a>
var lURL = new UrlHelper(html.ViewContext.RequestContext);
// build the <span class="">@lLink.LinkText</span> tag
var lSpanBuilder = new TagBuilder("span");
lSpanBuilder.MergeAttribute("class", "");
lSpanBuilder.SetInnerText(linkText);
string lSpanHtml = lSpanBuilder.ToString(TagRenderMode.Normal);
// build the <i class="@lLink.IconClass"></i> tag
var lIconBuilder = new TagBuilder("i");
lIconBuilder.MergeAttribute("class", iconClass);
string lIconHtml = lIconBuilder.ToString(TagRenderMode.Normal);
// build the <a href="@lLink.ControllerName/@lLink.ActionName" title="@lLink.LinkText">...</a> tag
var lAnchorBuilder = new TagBuilder("a");
lAnchorBuilder.MergeAttribute("href", lURL.Action(action, controllerName));
lAnchorBuilder.InnerHtml = lIconHtml + lSpanHtml; // include the <i> and <span> tags inside
string lAnchorHtml = lAnchorBuilder.ToString(TagRenderMode.Normal);
return MvcHtmlString.Create(lAnchorHtml);
}
}
2. Agregue esto usando en su vista
@using Extensions
3. Y simple llamada cuando lo necesite
@: <li class="btn btn-mini btn-inverse"> @Html.ActionButton(lLink.LinkText, lLink.ActionName, lLink.ControllerName, lLink.IconClass)</li>
<a href="@Url.Action("Index","Employee")" class="btn btn-primary">Index</a>
@Html.ActionLink(" New", "Create", "", new { @class="icon"} )
En estilo css:
.icon:before{
font-family: FontAwesome;
content: "/f055";
}