Derik Whittaker

Syndication

News


Images in this post missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at imagehelp@codebetter.com
MVC Html helper to render an image with a Routable Link

Today I ran into a need where I wanted to create the html needed to render an image as a link and I wanted that clicking of that image to route to a controller action.  The off the shelf Html helper that comes with the MVC frame does not support this by default (there is a work around) so I decided to create my own.

Here is the desired HTML output I am looking for:
<a href="[RouteHere]" target="_blank"><img src="[ImagePath]" alt="[AltText]" style="border-style: none"/></a>

Here is the work around:
<a href="<%=Html.BuildUrlFromExpression<MyController>( x => x.MyRoute()  ) %>" target="_blank"><img src="[ImagePath]" alt="[AltText]" style="border-style: none"/></a>

The workaround above simply uses the html helper for building url's from an expression and pops that into the HTML.  This is a workable solution, but I would rather have the Html helper generate the Html needed.

Here is the code with the Html Helper:
<%= Html.ImageLink<MyController>( x => x.MyRoute(), "[ImagePath]", "[Target]", "[AltText]" )%>

I like the above a little better as it does not mix html code with a call to the html helper.  I feel this syntax is a little cleaner.

Here is the Html Helper code:
public static string ImageLink<T>( this HtmlHelper helper, Expression<Action<T>> linkUrlAction,
    string imageUrlPath, string linkTarget, string altText ) where T : Controller
{           
    string linkUrl = helper.BuildUrlFromExpression( linkUrlAction );

    string outputUrl = string.Format( @"<a href='{0}' target='{1}'><img src='{2}' alt='{3}' style='border-style: none' /></a>", linkUrl, linkTarget, imageUrlPath, altText );
    return outputUrl;
}

Please note that this helper method is built for my needs, if you need/want to have the html rendered a little differently then you will have to make the necessary modifications.

Hope this helps.

Till next time,

[----- Remember to check out DimeCasts.Net -----]


Posted 07-09-2008 9:10 AM by Derik Whittaker
Filed under: ,

[Advertisement]

Comments

Damien Guard wrote re: MVC Html helper to render an image with a Routable Link
on 07-09-2008 12:37 PM

Nice function but you really need to HtmlAttributeEncode all those values going into the string format to ensure they don't break out of their quotes and become a vector for HTML injection.

I'd also switch those quotes to double-quotes so the output is XHTML compatible.

[)amien

Tim Barcz wrote re: MVC Html helper to render an image with a Routable Link
on 07-09-2008 1:17 PM

Derik,

You're a savior, literally was working on this yesterday and was cracking open my solution to fix this issue when I thought, "now is a good time for a blog break" and saw this.....

Derik Whittaker wrote re: MVC Html helper to render an image with a Routable Link
on 07-09-2008 1:39 PM

@Damien,

Nice suggestions.  I will play with them and repost when i have a few minutes.

Tim Barcz wrote re: MVC Html helper to render an image with a Routable Link
on 07-09-2008 2:52 PM

I modified yours to not have to worry about any of that stuff since the framework already handles it.  And by building off the existing functions (really just combing ActionLink and Image) I can offer more flexibility.

string link = helper.ActionLink(linkUrlAction, "", linkHtmlAttributes);

           string image = helper.Image(relativeImageUrl, altText, imageHtmlAttributes);

           string outputUrl = link.Insert(link.LastIndexOf("</a>"), image);

ASP.NET MVC Archived Blog Posts, Page 1 wrote ASP.NET MVC Archived Blog Posts, Page 1
on 07-09-2008 11:16 PM

Pingback from  ASP.NET MVC Archived Blog Posts, Page 1

DotNetKicks.com wrote MVC Html helper to render an image with a Routable Link
on 07-09-2008 11:56 PM

You've been kicked (a good thing) - Trackback from DotNetKicks.com

Bruce Sinner wrote re: MVC Html helper to render an image with a Routable Link
on 08-20-2008 5:03 PM

Hi,

Pretty cool your solution but I came across a problem, I was using the operator '~' in the images paths so i didnt have to bother with relative paths anymore and as your solution is returning plain simple HTML i can't use this operator anymore and so I lost this ASP.NET cool feature of handling the root of my webapplication for me.

Do you have any ideas or solution for me ???

I appreciate any help, thanks.

Good work on the helper though, helped me a lot.

-Bruce

Deepak Chawla wrote re: MVC Html helper to render an image with a Routable Link
on 06-07-2009 5:27 PM

A more simple implementation along with anchor tag is available at www.codeproject.com/.../asp_net_mvc_imagelink.aspx

luciano wrote re: MVC Html helper to render an image with a Routable Link
on 08-26-2009 9:51 AM

Where I put this to work ? thanks

5mg finasteride. wrote Order research chemical finasteride.
on 12-29-2009 12:50 PM

Finasteride. 5mg finasteride. Finasteride canada. Finasteride msd tablet.

About The CodeBetter.Com Blog Network
CodeBetter.Com FAQ

Our Mission

Advertisers should contact Brendan

Subscribe
Google Reader or Homepage

del.icio.us CodeBetter.com Latest Items
Add to My Yahoo!
Subscribe with Bloglines
Subscribe in NewsGator Online
Subscribe with myFeedster
Add to My AOL
Furl CodeBetter.com Latest Items
Subscribe in Rojo

Member Projects
DimeCasts.Net - Derik Whittaker

Friends of Devlicio.us
Red-Gate Tools For SQL and .NET

NDepend

SlickEdit
 
SmartInspect .NET Logging
NGEDIT: ViEmu and Codekana
LiteAccounting.Com
DevExpress
Fixx
NHibernate Profiler
Unfuddle
Balsamiq Mockups
Scrumy
JetBrains - ReSharper
Umbraco
NServiceBus
RavenDb
Web Sequence Diagrams
Ducksboard<-- NEW Friend!

 



Site Copyright © 2007 CodeBetter.Com
Content Copyright Individual Bloggers

 

Community Server (Commercial Edition)