Click here to Skip to main content
15,172,297 members
Articles / Web Development / XHTML
Article
Posted 7 May 2009

Stats

91.5K views
491 downloads
18 bookmarked

ASP.NET MVC ImageLink HTML Helper

Rate me:
Please Sign up or sign in to vote.
3.92/5 (9 votes)
7 May 2009CPOL1 min read
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.

HTML
<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):

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:

XML
<%@ 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:

VB.NET
<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:

ASP.NET
<%=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

Comments and Discussions

 
QuestionUsing this example with C# Pin
Diomedes25-Jun-14 3:28
MemberDiomedes25-Jun-14 3:28 
AnswerThank you Pin
Member 1023894622-Mar-14 15:05
professionalMember 1023894622-Mar-14 15:05 
GeneralMy vote of 5 Pin
Rob.mz29-Sep-10 8:35
professionalRob.mz29-Sep-10 8:35 
GeneralMy vote of 5 Pin
Peki.HR13-Jul-10 3:21
MemberPeki.HR13-Jul-10 3:21 
GeneralMy vote of 1 Pin
W4Rl0CK4720-Oct-09 9:22
MemberW4Rl0CK4720-Oct-09 9:22 
GeneralMy vote of 1 Pin
Wahab Hussain12-May-09 20:21
MemberWahab Hussain12-May-09 20:21 
AnswerRe: My vote of 1 Pin
meidianto12-May-09 21:42
Membermeidianto12-May-09 21:42 
GeneralUsing CSS for image link Pin
Ziv Nitzan11-May-09 20:32
MemberZiv Nitzan11-May-09 20:32 

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

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