Make an Html.ActionLink around an Image in ASP.NET MVC?

Question

How can I do something similar to Html.ActionLink() except place the generated link around an Image instead of just spitting out the link?

score 134 · Accepted Answer · edited Jan 20 '14 at 09:52

Razor (View Engine):

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

ASPX (View Engine):

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

Obviously, if you do this more than once, write a helper for it. And fill in the other attributes of img/a. But this should give you the general idea.

eu-ge-ne · Answer 2 · 2010-02-05T19:37:55.737

22

Try something like this:

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

Hope this helps

edited Feb 05 '10 at 19:37

answered Jun 12 '09 at 21:36

eu-ge-ne

28,023
6
71
62

6

I suggest changing `TagRenderMode.Normal` to `TagRenderMode.SelfClosing` for the img; otherwise it renders as `` instead of `` – Michael Haren Feb 05 '10 at 18:45
1

Action is not static method of UrlHelper class so it should be called from an urlHelper object. – a.farkas2508 Jun 25 '14 at 12:46

Dilip Langhanoja · Answer 3 · 2016-05-05T07:19:35.193

The first answer given by @Craig Stuntz is absolutely perfect but my concern is about if what will you do if you have Ajax.ActionLink instead of Html.ActionLink. Here I will explain easy solutions for both methods. You can do as the following for Html.ActonLink:

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

same concept can be applied for Ajax.ActionLink

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

so this will be easy for you.

Edit:

ActionLink Image with Style Sheet or Class Name

With Style sheet

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

With Class Name

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

For more reference regarding ActionLink around Image visit ActionLink around Image in Asp.net MVC

@LenielMacaferi Thanks . It's my pleasure that you got right solutions. — Dilip Langhanoja, Jun 20 '14 at 07:05
this works thanks. Is there a way I can add css style to the image — Sumedha Vangury, May 05 '16 at 07:00
@sumedha I have updated my answer regarding CSS style to image. I hope it will be useful to u. — Dilip Langhanoja, May 05 '16 at 07:21

score 2 · Answer 4 · edited Mar 13 '13 at 22:21

2

more easy...

change your code by:

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

edited Mar 13 '13 at 22:21

p.s.w.g

146,324
30
291
331

answered Mar 13 '13 at 22:02

olga

21
1

Our you can just do this straight from CSS instead of using inline styles. – devlord Aug 07 '13 at 18:48

score 1 · Answer 5 · answered Jun 05 '14 at 14:25

1

You can use url.content:

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

this return relative path

answered Jun 05 '14 at 14:25

Ali.azimi

93
2
9

score 0 · Answer 6 · answered Jun 12 '09 at 22:46

0

You can create htmlhelper which can return image with link... As parameters you will pass to htmlhelper values like image path and link and in htmlhelper you will use StringBuilder to format html of that linked image properly...

cheers

answered Jun 12 '09 at 22:46

Marko

1,874
1
21
36

Make an Html.ActionLink around an Image in ASP.NET MVC?

6 Answers6

Linked

Related