8

I have navigation and many link on my webproject from html action links. They are ugly with underline. I would like to insert some image with name or play with styles of action link. Is it possible? How to do that?

Thanks and take care, Ragims

tereško
  • 58,060
  • 25
  • 98
  • 150
r.r
  • 7,023
  • 28
  • 87
  • 129

5 Answers5

17

You could use css to remove the underlines or place a backgroundimage, otherwise you could also just create the link like so:

<a href="<%: Url.Action("Action", "Controller")%>"><img src="yourimg.jpg" /></a>
lmondria
  • 244
  • 3
  • 8
  • iam using html.actionlink, and not url.action – r.r Sep 02 '10 at 12:46
  • Yeah, i know, but with Html.ActionLink you can't add any other content to the link than plain text. – lmondria Sep 02 '10 at 13:50
  • If the Action would link to the homepage and the image would be a logo, will it cause an infinite loop? I keep getting stack overflow when I do that. If I remove it, my page works well. I thought for the action to run I have to click on it? – bobek Aug 29 '11 at 17:51
2

Html.ActionLink and Url.Action return the same URL. The difference is that the first creates an HTML element while the second returns just the URL to that action.

Another option is to use Url.RouteUrl or Html.RouteLink to create a link based off your route (to an action) instead of directly to an action.

Ryan Peters
  • 7,608
  • 8
  • 41
  • 57
0

If You are on MVC 3-4 with razor view engine then this may help you-

@Html.ActionLink("your link Name", "Action Method", "Controller", 
        new { style = "background-image:url('.././Images/imageyouwanttoshow.png')" },null)
slfan
  • 8,950
  • 115
  • 65
  • 78
bunny hop
  • 3
  • 2
0

Instead of using @Html.ActionLink("linkname","action","controller") you can use following

<a href='@Url.Action("action", "controller")'>
<img src='@Url.Content("~/images/imageName.png")' />

"images" is my folder for storing the images. @Url.Content() is to know the path. You can pass your action and the controller for that action to @Url.Action(). @Url.Action() works similar to the @Html.ActionLink(). Now your link will get replaced by the image.

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Amit Ghute
  • 61
  • 4
0

One solution is to create an HtmlHelper extension method for creating an image-specific action link. A detailed tutorial can be found here.

Steve Danner
  • 21,818
  • 7
  • 41
  • 51