Imagelink HTML helper class for Asp.net MVC

By Vasanthakumar D

In this article, I will give you the HTML helper class for Imagelink. Its very simple and straight forward one and easy to understand.

Helper Class

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;

namespace MvcApplication1.Helpers
{
    public static class ImageHelper
    {
         /// <summary>
        /// return image link
        /// </summary>
        /// <param name="helper"></param>
        /// <param name="id">Id of link control</param>
        /// <param name="controller">target controller name</param>
        /// <param name="action">target action name</param>
        /// <param name="strOthers">other URL parts like querystring, etc</param>
        /// <param name="strImageURL">URL for image</param>
        /// <param name="alternateText">Alternate Text for the image</param>
        /// <param name="strStyle">style of the image like border properties, etc</param>
        /// <returns></returns>
       public static string ImageLink(this HtmlHelper helper, string id, string controller, string action, string strOthers, string strImageURL, string alternateText, string strStyle)
        {
             return ImageLink(helper, id, controller, action, strOthers, strImageURL, alternateText,strStyle,null);
        }




/// <summary>
        /// return image link
        /// </summary>
        /// <param name="helper"></param>
        /// <param name="id">Id of link control</param>
        /// <param name="controller">target controller name</param>
        /// <param name="action">target action name</param>
        /// <param name="strOthers">other URL parts like querystring, etc</param>
        /// <param name="strImageURL">URL for image</param>
        /// <param name="alternateText">Alternate Text for the image</param>
        /// <param name="strStyle">style of the image like border properties, etc</param>
        /// <param name="htmlAttributes">html attribues for link</param>
        /// <returns></returns>
       public static string ImageLink(this HtmlHelper helper, string id, string controller, string action, string strOthers, string strImageURL, string alternateText,string strStyle, object htmlAttributes)
        {
             // Create tag builder
            var builder = new TagBuilder("a");

             // Create valid id
            builder.GenerateId(id);

            // Add attributes
            builder.MergeAttribute("href", "/" + controller + "/" + action + strOthers); //form target URL
            builder.InnerHtml = "<img src='" + strImageURL + "' alt='" + alternateText + "' style=\"" + strStyle + "\">"; //set the image as inner html
             builder.MergeAttributes(new RouteValueDictionary(htmlAttributes));
             // Render tag
            return builder.ToString(TagRenderMode.Normal); //to add </a> as end tag
         }

    }
}


In View Pages


<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<%@ Import Namespace="MvcApplication1.Helpers" %> - importing namespace here

<asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server">
    Home Page
</asp:Content>

<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
  <% using (Html.BeginForm()) { %>
    <h2><%= Html.Encode(ViewData["Message"]) %></h2>
    <p>
        To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
    </p>
      
Adding link image link here by passing Id, controller name, action name, Image url, alternate text, style
    <%= Html.ImageLink("hTest","Grid","Show","/20",ResolveUrl("~/Content/blarg.gif"),"test image","border:none;")%>
    
</asp:Content>


I hope this article helpful and self explanatory. Please post your comments and suggestions.

Popularity  (3616 Views)
Create New Account
Article Discussion: Imagelink HTML helper class for Asp.net MVC
Vasanthakumar D posted at Tuesday, May 05, 2009 4:25 AM
reply