ASP.NET MVC ImageLink HTML Helper

• Download solution - 277.09 KB

Introduction

In this article, I will show you how to create ImageLink HTML helper. I assume you have understood how to create custom HTML helpers. If you haven't, please watch this video presented by Stephen Walther.

Background

In the ASP.NET MVC 1.0, if you want to create an image which links to a URL address, you can do it like this.

<a href="<%=Url.Action("About", "Home")%>">
	<img alt="" src="../../Content/Images/btn_account.jpg" /></a> 

Unfortunately it doesn't make me happy. So I decided to create my own ImageLink HTML helper.

Using the Code

The extension function is shown below (written in VB.NET):

Imports System.Runtime.CompilerServices
Public Module ImageExtensions
    <Extension()> _
    Public Function ImageLink(ByVal html As HtmlHelper, _
                              ByVal action As String, _
                              ByVal controller As String, _
                              ByVal routeValues As Object, _
                              ByVal imageURL As String, _
                              ByVal alternateText As String, _
                              ByVal linkHtmlAttributes As Object, _
                              ByVal imageHtmlAttributes As Object) As String
        ' Create an instance of UrlHelper
        Dim url As New UrlHelper(html.ViewContext.RequestContext)
        ' Create image tag builder
        Dim imageBuilder As New TagBuilder("img")
        ' Add image attributes
        imageBuilder.MergeAttribute("src", imageURL)
        imageBuilder.MergeAttribute("alt", alternateText)
        imageBuilder.MergeAttributes( _
            New RouteValueDictionary(imageHtmlAttributes))
        ' Create link tag builder
        Dim linkBuilder As New TagBuilder("a")
        ' Add attributes
        linkBuilder.MergeAttribute("href", url.Action_
		(action, controller, New RouteValueDictionary(routeValues)))
        linkBuilder.InnerHtml = imageBuilder.ToString(TagRenderMode.SelfClosing)
        linkBuilder.MergeAttributes(New RouteValueDictionary(linkHtmlAttributes))
        ' Render tag
        Return linkBuilder.ToString(TagRenderMode.Normal)
    End Function
End Module

The above codes simply create an anchor and put an image inside it.

You can then call it in the View like this:

<%@ Page Language="VB" MasterPageFile="~/Views/Shared/Site.Master"
	Inherits="System.Web.Mvc.ViewPage" %>
<%@ Import Namespace="MvcApplication1" %>

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

<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
<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>

<%=Html.ImageLink("About", "Home", Nothing,
	"../../Content/Images/btn_account.jpg", "About", Nothing,
	New With {.style = "border:0px;"})%>
</asp:Content>

Important: Don't forget to import the namespace of the application in the View Page.

You can also add overloads to the ImageLink method, for example:

<Extension()> _
Public Function ImageLink(ByVal html As HtmlHelper, _
                      ByVal action As String, _
                      ByVal controller As String, _
                      ByVal imageURL As String, _
                      ByVal alternateText As String) As String
    Return ImageLink(html, action, controller, Nothing, _
    imageURL, alternateText, Nothing, Nothing)
End Function
<Extension()> _
Public Function ImageLink(ByVal html As HtmlHelper, _
                          ByVal action As String, _
                          ByVal controller As String, _
                          ByVal routeValues As Object, _
                          ByVal imageURL As String, _
                          ByVal alternateText As String) As String
    Return ImageLink(html, action, controller, routeValues, _
	imageURL, alternateText, Nothing, Nothing)
End Function

So you can call the ImageLink without specifying unnecessary parameters in the View Page like this:

<%=Html.ImageLink("About", "Home", Nothing,
	"../../Content/Images/btn_account.jpg", "About")%>

Points of Interest

By reading this article, you will realize that extending ASP.NET MVC 1.0 capabilities by adding custom HTML helper is very easy. No more waiting for the next release or purchase from 3^rd party to get the "controls" you want, just create it by yourself.

History

• 8^th May, 2009: Initial post