[coden4fun]

Recently, I posted a tutorial last week on how to make an Image using the HtmlHelper in ASP.net MVC, because I had found MVC was lacking one. Well I came across a time during development where I needed to use an imge and a link and it was the same problem. No support in ASP.net MVC. It's like during the first release of MVC 1.0 they only accounted for the usual form controls and I even found some of them lacking when working with Models. So, I did what all good programmers do, and I made one.

The following code below is written in C# that is just like my previous HtmlHelper entitled 'ImageExtension' except this one uses images instead of text.

I have named this one ImageLinkExtensions.

namespace Helpers
{
    public static class ImageLinkExtensions
    {
        
        /// <summary>
        /// A Simple ActionLink Image
        /// </summary>
        /// <param name="actionName">name of the action in controller</param>
        /// <param name="imgUrl">url of the image</param>
        /// <param name="alt">alt text of the image</param>
        /// <returns></returns>
        public static string ImageLink(this HtmlHelper helper, string actionName, string imgUrl, string alt)
        {
            return ImageLink(helper, actionName, imgUrl, alt, null, null, null);
        }

        /// <summary>
        /// A Simple ActionLink Image
        /// </summary>
        /// <param name="actionName">name of the action in controller</param>
        /// <param name="imgUrl">url of the iamge</param>
        /// <param name="alt">alt text of the image</param>
        /// <returns></returns>
        public static string ImageLink(this HtmlHelper helper, string actionName, string imgUrl, string alt, object routeValues)
        {
            return ImageLink(helper, actionName, imgUrl, alt, routeValues, null, null);
        }

        /// <summary>
        /// A Simple ActionLink Image
        /// </summary>
        /// <param name="actioNName">name of the action in controller</param>
        /// <param name="imgUrl">url of the image</param>
        /// <param name="alt">alt text of the image</param>
        /// <param name="linkHtmlAttributes">attributes for the link</param>
        /// <param name="imageHtmlAttributes">attributes for the image</param>
        /// <returns></returns>
        public static string ImageLink(this HtmlHelper helper, string actioNName, string imgUrl, string alt, object routeValues, object linkHtmlAttributes, object imageHtmlAttributes)
        {
            var urlHelper = new UrlHelper(helper.ViewContext.RequestContext);
            var url = urlHelper.Action(actioNName, routeValues);

            //Create the link
            var linkTagBuilder = new TagBuilder("a");
            linkTagBuilder.MergeAttribute("href", url);
            linkTagBuilder.MergeAttributes(new RouteValueDictionary(linkHtmlAttributes));

            //Create image
            var imageTagBuilder = new TagBuilder("img");
            imageTagBuilder.MergeAttribute("src", urlHelper.Content(imgUrl));
            imageTagBuilder.MergeAttribute("alt", urlHelper.Content(alt));
            imageTagBuilder.MergeAttributes(new RouteValueDictionary(imageHtmlAttributes));

            //Add image to link
            linkTagBuilder.InnerHtml = imageTagBuilder.ToString(TagRenderMode.SelfClosing);

            return linkTagBuilder.ToString();
        }
    }
}

You can then add the following namespace of Helpers in your asp.net MVC aspx template like the following

<%@ Import Namespace="Helpers" %>

Then whenever you need to call an Image which needs to be a link you can do the following

<%= Html.ImageLink("EditCompanyPage", "../../Content/Images/carbon/edit.png", "copyright AMDi", new { id = 0 }) %> 

Below as an attachment is The template where I got the above asp.net code. It serves as purpose of being an edit button. Of course, I am just passing the parameter id of 0, but I'm still working on that part in JQuery.




Hope this helps. Happy Coding!