¿Cómo puedo hacer algo similar a Html.ActionLink() excepto colocar el enlace generado alrededor de una imagen en lugar de simplemente escupir el enlace?Hacer un Html.ActionLink alrededor de una imagen en ASP.NET MVC?
Respuesta
Razor (Ver Motor):
<a href="@Url.Action("ActionName", "ControllerName")">
<img src="@Url.Content("~/Content/img/imgname.jpg")" />
</a>
ASPX (Ver Motor):
<a href="<%= Url.Action("ActionName", "ControllerName") %>">
<img src="<%= Url.Content("~/Content/img/imgname.jpg") %>" />
</a>
Obviamente, si usted hace esto más de una vez, escribir un ayudante para él. Y complete los otros atributos de img/a. Pero esto debería darte la idea general.
Pruebe algo como esto:
public static string ActionLinkWithImage(this HtmlHelper html, string imgSrc, string actionName)
{
var urlHelper = new UrlHelper(html.ViewContext.RequestContext);
string imgUrl = urlHelper.Content(imgSrc);
TagBuilder imgTagBuilder = new TagBuilder("img");
imgTagBuilder.MergeAttribute("src", imgUrl);
string img = imgTagBuilder.ToString(TagRenderMode.SelfClosing);
string url = UrlHelper.Action(actionName);
TagBuilder tagBuilder = new TagBuilder("a") {
InnerHtml = img
};
tagBuilder.MergeAttribute("href", url);
return tagBuilder.ToString(TagRenderMode.Normal);
}
Esperanza esto ayuda
Puede crear HtmlHelper qué imagen se puede volver con enlace ... Como parámetros se pasa a HtmlHelper valores como la ruta de la imagen y el enlace y en HtmlHelper que va a utilizar StringBuilder a formato hTML de esa imagen vinculada adecuadamente ...
aplausos
más fácil ...
cambiar su código por:
<p class="site-title">@Html.ActionLink(" ", "Index", "Home",
new
{
style = "background: url('" + Url.Content("~/images/logo.png") + "') no-repeat center right; display:block; height:50px;width:50px;"
})</p>
Nuestro puede hacer esto directamente desde CSS en lugar de usar estilos en línea. – devlord
La primera respuesta dada por @Craig Stuntz es absolutamente perfecto, pero mi preocupación es acerca de si lo que vas a hacer si usted tiene Ajax.ActionLink
en lugar de Html.ActionLink
. Aquí explicaré soluciones fáciles para ambos métodos. Puede hacer lo siguiente para Html.ActonLink
:
@Html.Raw(@Html.ActionLink("[replacetext]", "Index", "Home").ToHtmlString().Replace("[replacetext]", "<img src=\"/Contents/img/logo.png\" ... />"))
mismo concepto puede ser aplicado para Ajax.ActionLink
@Html.Raw(@Ajax.ActionLink("[replacetext]", "Index", "Home", new AjaxOptions { UpdateTargetId="dvTest"}).ToHtmlString().Replace("[replacetext]", "<img src=\"/Contents/img/logo.png\" … />"))
por lo que este va a ser fácil para usted.
Editar:
ActionLink Imagen con hoja de estilos o nombre de clase
Con hojas de estilo
@Html.Raw(@Ajax.ActionLink("[replacetext]", "Index", "Home", new AjaxOptions { UpdateTargetId="dvTest"}).ToHtmlString().Replace("[replacetext]", "<img src=\"/assets/img/logo.png\" style=\"width:10%\" ... />"))
Con Nombre de clase
<style>
.imgClass {
width:20%
}
@Html.Raw(@Ajax.ActionLink("[replacetext]", "Index", "Home", new AjaxOptions { UpdateTargetId="dvTest"}).ToHtmlString().Replace("[replacetext]", "<img src=\"/assets/img/logo.png\" class=\"imgClass\" ... />"))
Para mayor referencia respecto ActionLink alrededor imagen Visita ActionLink around Image in Asp.net MVC
Puede utilizar url.content:
@Url.Content("~/images/img/slide.png")
este retorno ruta relativa
- 1. @ Html.ActionLink en ASP.NET MVC 3
- 2. ASP.NET MVC `Html.ActionLink` entre" Areas "
- 3. Incluyendo una etiqueta de anclaje en ASP.NET MVC Html.ActionLink
- 4. ¿Cómo inserto una imagen usando HTML.ActionLink?
- 5. Agregar condicionalmente htmlAttributes a ASP.NET MVC Html.ActionLink
- 6. ASP.NET MVC Html.ActionLink color de hipervínculo
- 7. ¿Cómo aplico una clase CSS a Html.ActionLink en ASP.NET MVC?
- 8. ASP.NET MVC - Trouble modelo de paso en routeValues Html.ActionLink
- 9. Cómo llamar al nombre de ruta en Html.ActionLink asp.net MVC?
- 10. ASP.NET MVC Html.ActionLink URL de resultado: la forma de codificar
- 11. No se puede usar Html.ActionLink en asp.net mvc spark files
- 12. Asp.Net MVC: ¿Cómo obtengo Html.ActionLink para representar valores enteros correctamente?
- 13. Equivalente de imagen de ActionLink en ASP.NET MVC
- 14. Asp.Net-MVC: ¿Cómo estilo <% = Html.ActionLink()%> con Css?
- 15. cómo hacer Html.ActionLink sin texto pero con imagen dentro
- 16. ¿Cómo coloco un borde alrededor de una imagen en WPF?
- 17. Cómo alterar dinámicamente la clase de un Html.ActionLink en MVC
- 18. ¿Cómo se establece el atributo de título de un ASP.NET MVC Html.ActionLink en la URL generada
- 19. Creando una imagen de alternar AJAX en ASP.NET MVC
- 20. HTML.ActionLink vs Url.Action en ASP.NET Razor
- 21. ASP.NET MVC - Carga de una imagen en Amazon S3
- 22. ASP.NET MVC pasar un ID en una ActionLink al controlador
- 23. ASP.NET MVC - Pase objeto de matriz como un valor de ruta dentro de Html.ActionLink (...)
- 24. Alrededor de las esquinas de una imagen
- 25. ASP.NET MVC: Agrupación de clases alrededor del controlador
- 26. ASP.NET MVC cómo hacer una acción que devuelve un archivo?
- 27. mvc3 Html.ActionLink como imagen no como texto
- 28. ASP.Net MVC ¿Cómo mostrar una propiedad de imagen de un modelo en una vista?
- 29. Borde alrededor imagen en C#
- 30. ASP.NET MVC URL de imagen generadas dinámicamente
Sugiero cambiar '' TagRenderMode.Normal' a TagRenderMode.SelfClosing' para el img; de lo contrario, representa '' en lugar de ' ' –
Buena sugerencia, gracias Michael –
La acción no es un método estático de la clase UrlHelper, por lo que debe invocarse desde un objeto urlHelper. –