Hacer un Html.ActionLink alrededor de una imagen en ASP.NET MVC?

Question

¿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?

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

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> 

Answer 5

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

Answer 6

Puede utilizar url.content:

@Url.Content("~/images/img/slide.png") 

este retorno ruta relativa