CODEWITHSUNDEEP
asp.net-mvc
KingNestor
KingNestor

Reputation: 67960

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

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

Upvotes: 64

Views: 68172

Answers (6)

Dilip Langhanoja
Dilip Langhanoja

Reputation: 4525

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

Upvotes: 6

Ali.azimi
Ali.azimi

Reputation: 103

You can use url.content:

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

this return relative path

Upvotes: 1

Craig Stuntz
Craig Stuntz

Reputation: 126547

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.

Upvotes: 134

olga
olga

Reputation: 21

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>

Upvotes: 2

eu-ge-ne
eu-ge-ne

Reputation: 28153

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

Upvotes: 22

Marko
Marko

Reputation: 1924

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

Upvotes: 0

Related Questions