Click here to Skip to main content
Click here to Skip to main content

ASP.NET MVC ImageLink HTML Helper

, 7 May 2009 CPOL
Rate this:
Please Sign up or sign in to vote.
ImageLink HTML helper for ASP.NET MVC views
ImageLinkSolution

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.

image_22E8F564.png

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")%>

image_2ACEF45C.png

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 3rd party to get the "controls" you want, just create it by yourself.

History

  • 8th May, 2009: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

meidianto
Web Developer
Indonesia Indonesia
www.meidianto.com
Follow on   Twitter

Comments and Discussions

 
QuestionUsing this example with C# PinmemberDiomedes25-Jun-14 3:28 
AnswerThank you PinmemberMember 1023894622-Mar-14 15:05 
GeneralMy vote of 5 Pinmemberrmx9929-Sep-10 8:35 
GeneralMy vote of 5 PinmemberPeki.HR13-Jul-10 3:21 
GeneralMy vote of 1 PinmemberBug Me Not20-Oct-09 9:22 
GeneralMy vote of 1 PinmemberWahab Hussain12-May-09 20:21 
AnswerRe: My vote of 1 Pinmembermeidianto12-May-09 21:42 
GeneralUsing CSS for image link Pinmemberzivni11-May-09 20:32 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150327.1 | Last Updated 8 May 2009
Article Copyright 2009 by meidianto
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid