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?

codeandcloud · Accepted Answer · 2014-01-20 09:52:02Z

134

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.

edited Jan 20, 2014 at 9:52

codeandcloud

55.5k47 gold badges169 silver badges259 bronze badges

answered Jun 12, 2009 at 21:16

Craig Stuntz

127k12 gold badges257 silver badges275 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

eu-ge-ne · Accepted Answer · 2010-02-05 19:37:55Z

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 5, 2010 at 19:37

answered Jun 12, 2009 at 21:36

eu-ge-ne

28.2k6 gold badges73 silver badges62 bronze badges

2 Comments

Michael Haren Over a year ago

I suggest changing TagRenderMode.Normal to TagRenderMode.SelfClosing for the img; otherwise it renders as <img...></img> instead of <img.../>

andrjfrks Over a year ago

Action is not static method of UrlHelper class so it should be called from an urlHelper object.

Dilip Langhanoja · Accepted Answer · 2016-05-05 07:19:35Z

6

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

edited May 5, 2016 at 7:19

answered Apr 23, 2014 at 6:30

Dilip Langhanoja

4,5354 gold badges30 silver badges37 bronze badges

3 Comments

Dilip Langhanoja Over a year ago

@LenielMacaferi Thanks . It's my pleasure that you got right solutions.

Sumedha Vangury Over a year ago

this works thanks. Is there a way I can add css style to the image

Dilip Langhanoja Over a year ago

@sumedha I have updated my answer regarding CSS style to image. I hope it will be useful to u.

p.s.w.g · Accepted Answer · 2013-03-13 22:21:44Z

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, 2013 at 22:21

p.s.w.g

150k31 gold badges307 silver badges339 bronze badges

answered Mar 13, 2013 at 22:02

olga

211 bronze badge

1 Comment

devlord Over a year ago

Our you can just do this straight from CSS instead of using inline styles.

Ali.azimi · Accepted Answer · 2014-06-05 14:25:57Z

1

You can use url.content:

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

this return relative path

answered Jun 5, 2014 at 14:25

Ali.azimi

1132 silver badges9 bronze badges

Comments

Marko · Accepted Answer · 2009-06-12 22:46:10Z

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, 2009 at 22:46

Marko

1,9421 gold badge21 silver badges37 bronze badges

Collectives™ on Stack Overflow

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

6 Answers 6

Comments

2 Comments

3 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

2 Comments

3 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related