Attach image to ActionLink in MVC 4

Question

I am using ActionLink with id in MVC 4 app and assinging actionLink id an image in css but on on earth I am doing wrong. is not working! here is my code

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

Any reason you can't use ? In your browser html inspector does your element have the class "logo"? — JBeagle, Oct 08 '13 at 16:38

score 6 · Accepted Answer · answered Oct 08 '13 at 15:44

This is from my application. Works ok:

.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>

score 6 · Answer 2 · edited Jun 23 '14 at 19:45

The best way you can do for both Html.ActionLink and Ajax.ActionLink is as below

@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\" … />"))

additionaly you want to provide class and style so you can do as following

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

Thanx Brad, Instate of unescape [\"] I used [']. which works neater. — Dinand, Oct 07 '15 at 14:23

score 5 · Answer 3 · answered Feb 24 '14 at 16:54

use your custom HtmlHelper:

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

then in your view.cshtml:

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

score 0 · Answer 4 · edited Feb 11 '14 at 21:44

0

You only needed to change:

new { id = "_logo"}

to:

new { @id = "_logo"}

Without the @ in front of id it treats it as a parameter instead of a attribute of the html element.

Without the @, it would produce:

www.site.com/home/index/_logo

With the @, it would produce:

www.site.com/home

and the element would be:

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

edited Feb 11 '14 at 21:44

Code Maverick

20,171
12
62
114

answered Feb 11 '14 at 21:22

Mike

11

Attach image to ActionLink in MVC 4

CSS

4 Answers4

Linked