css - net - Adjuntar imagen a ActionLink en MVC 4

style html actionlink as button

Question

Estoy usando ActionLink con id en la aplicación MVC 4 y le estoy diciendo a actionLink id una imagen en css pero en la tierra estoy haciendo algo mal. ¡no está trabajando! aquí está mi código

 <div class="logo_container">
            @Html.ActionLink(" ", "Index", "Home", null, new { id = "_Logo" })
 </div>

CSS

.logo_container {
width:339px;
height:116px; 
}

#_Logo {
background-image: url("../Images/logo.png");
 width:339px;
height:116px;
background-color:green;
}

Answer 1

Esto es de mi aplicación. Funciona bien

.logo{
background:no-repeat url(/Content/photo/png/sprite.png) 0 0;
height:15px;
width:20px;
overflow:hidden;
float:left;
border:none;
display:inline;
}

<a href="@Url.Action("Action", "Controller")" class="logo"></a>

Answer 2

Solo necesitabas cambiar:

new { id = "_logo"}

a:

new { @id = "_logo"} 

Sin @ en frente de id lo trata como un parámetro en lugar de un atributo del elemento html.

Sin el @ , produciría:

www.site.com/home/index/_logo

Con el @ , produciría:

www.site.com/home

y el elemento sería:

<a id="_logo" href=""></a>

Answer 3

use su HtmlHelper personalizado:

    namespace Order.Web.UI.Infrastructure
{
    public static class CustomHelpers
    {
        public static MvcHtmlString ImageActionLink(this HtmlHelper html, string imageSource, string url)
        {
            string imageActionLink = string.Format("<a href=/"{0},/"><img width=/"150/" height=/"150/" src=/"{1}/" /></a>",url,imageSource);

            return new MvcHtmlString(imageActionLink);
        }
    }
}

luego en su view.cshtml:

@using OrderPad2.Web.UI.Infrastructure
.
.
.
.
@Html.ImageActionLink(@app.Icon,@app.AppStoreLink) 

Answer 4

La mejor forma de hacerlo para Html.ActionLink y Ajax.ActionLink es la siguiente:

@Html.Raw(@Html.ActionLink("[replacetext]", "Index", "Home").ToHtmlString().Replace("[replacetext]", "<img src=/"/Content/img/logo.png/" ... />"))


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

Además, desea proporcionar clase y estilo para que pueda hacer lo siguiente

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