Image ActionLink HTML Helper in ASP.NET MVC

CodeProject For creating a link in ASP.NET MVC, we use Link Extension provided by the MVC framework. For creating a simple anchor tag, we use Html.ActionLink() helper which generates anchor tag for us.

For example:

@Html.ActionLink("Link Display Text","Index","Home")

This will render the following html:

<a href="/Home/Index">Link Display Text</a>

Now if we want to create an image link, we can use html to create image link this way:

<a href="/Home/Index">
<img src="/images/untitled.png">
</a>

This will work obviously, but what if we want to do it with Html Helper method as we do using Html.ActionLink, but we do not have any helper for image link provided by framework, so one can do it using html as I wrote above or will have to write custom html helper.

It's the beauty of ASP.NET MVC that we can extend existing helpers according to our needs and can also add new html helpers in case we need to use it in many places, in that case, a better approach is to create a helper extension and use it everywhere in the project.

Now for creating helper extension, first of all, we need to create a static class, as it's the pre-requisite for creating extension methods that the method should be static, and it should be inside a static class.

Here is the code for extension method for ImageActionLink helper extension:

namespace MyApplication.Helpers
{
  public static class CustomHtmlHelepers
  {
    public static IHtmlString ImageActionLink(this HtmlHelper htmlHelper, 
    string linkText, string action, string controller, 
    object routeValues, object htmlAttributes,string imageSrc)
    {
        var urlHelper = new UrlHelper(htmlHelper.ViewContext.RequestContext);
        var img = new TagBuilder("img");
        img.Attributes.Add("src", VirtualPathUtility.ToAbsolute(imageSrc));
        var anchor = new TagBuilder("a") 
        { InnerHtml = img.ToString(TagRenderMode.SelfClosing) };
        anchor.Attributes["href"] = urlHelper.Action(action, controller, routeValues);
        anchor.MergeAttributes(new RouteValueDictionary(htmlAttributes));

        return MvcHtmlString.Create(anchor.ToString());
    }
  }
}

The first parameter with this keyword is used in extension methods. See this article on Extension Method for understanding what are extension methods.

And now, we can call it from View for creating Image Link. But remember that we will have to include the namespace in the View in which we have to create the class and extension method, but if you have to create it in the same namespace, then it will be accessible without adding any using statement in View.

In my case, I have separated all Extension Methods in separate namespace named Helpers so I will have to include it in View via using statement:

@using MyApplication.Helpers;

@Html.ImageActionLink("Link Display Text",
"Index","Home",null,null,"~/images/untitled.png")

It will render the same html which I wrote above which is:

<a href="/Home/Index">
<img src="/images/untitled.png">
</a>

I hope it makes you understand how you can write you own custom html helpers in ASP.NET MVC.