uso - Haga un Html.ActionLink alrededor de una imagen en ASP.NET MVC?

url.action mvc parameters

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

La primera respuesta dada por @Craig Stuntz es absolutamente perfecta, pero me preocupa si harás si tienes Ajax.ActionLink 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 se puede aplicar para Ajax.ActionLink

@Html.Raw(@Ajax.ActionLink("[replacetext]", "Index", "Home", new AjaxOptions { UpdateTargetId="dvTest"}).ToHtmlString().Replace("[replacetext]", "<img src=/"/Contents/img/logo.png/" … />"))

así que esto será fácil para ti.

Editar:

Imagen ActionLink con hoja de estilo o nombre de clase

Con hoja 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 obtener más referencias sobre ActionLink alrededor de Image, visite ActionLink alrededor de Image en Asp.net MVC

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

Espero que esto ayude

Answer 3

Puede crear htmlhelper que puede devolver imágenes con un enlace ... Como parámetros, pasará a los valores de htmlhelper como la ruta de la imagen y el enlace y en htmlhelper utilizará StringBuilder para formatear html de esa imagen vinculada correctamente ...

aclamaciones

Answer 4

Puede usar url.content:

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

este camino relativo de retorno

Answer 5

Razor (Ver motor):

<a href="@Url.Action("ActionName", "ControllerName")">
    <img src="@Url.Content("~/Content/img/imgname.jpg")" />
</a>

ASPX (motor de vista):

<a href="<%= Url.Action("ActionName", "ControllerName") %>">
    <img src="<%= Url.Content("~/Content/img/imgname.jpg") %>" />
</a>

Obviamente, si haces esto más de una vez, escribe un ayudante para ello. Y complete los otros atributos de img / a. Pero esto debería darte la idea general.

Answer 6

más fácil...

cambia tu 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>