Udemy

Image ActionLink Html Helper in asp.net mvc

Sunday, July 12, 2015 1 Comments A+ a-

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 following html:

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

Now if we want to create a 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 exisiting helpers according to our needs and can also add new html helpers in case we need to used it at many places , in that case better approach is to create a helper extesnion and use it every where in the project.

Now for creating helper extension first of all we need to create a static class, as its the pre-requisite for creating extesnion 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 extesnion 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 create the class and extension method,but if you have create it in the same namespace, then it will be accessible without adding any using statement in View.

In my case i have seperated all Extension Methods in seperate 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.