How to add an image using css in asp mvc 2?

Question

I want to add a clickable image using a css class to an anchor tag in an asp mvc 2 application and leave the url section empty(since I have javascript code to load a pop up based on the id given to the anchor tag).

Currently my code is :

<%= Html.ImageActionLink(null, null, "~/UI/Forms/Css/Images/get-reservation.png", null, new { @Id = "getReservation" }, new { @Class = "image" })%>

Info: I added the Id, since I am using javascript to load a pop up when the getReservation id is clicked. The image class just adds padding.

current css code :

.image
{
   padding-left: 10px;  
}

What I want:

To remove the path below from my ImageActionLink helper

"~/UI/Forms/Css/Images/get-reservation.png"

and define a css class:

.get-reservation
{
background: url('images/get-reservation.png') no-repeat center;
height: 20px;
width:20px;
}

and do something like this:

<%= Html.ActionLink("#", null, new { @Class = "get-reservation image" }, new { @Id = "getReservation" })%>

But what I get in the browser is something like this :(And the image fails to appear.)

enter image description here

Expected outcome:

enter image description here

Any help is appreciated.

Thanks

ariel · Accepted Answer · 2011-05-05 05:20:12Z

1

Using ActionLink in this case is unnecessary, just use regular image or div

<div class="get-reservation image" id="getReservation"></div>

You can add this to the style, to make it more like a link:

border: none;
cursor: pointer; /* hand cursor */

Finally, when you select it to add the click handler, if you were using $('a.get-reservation') change to $('div.get-reservation') or simply $('.get-reservation')

edited May 5, 2011 at 5:20

answered May 5, 2011 at 5:14

ariel

16.2k13 gold badges65 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ariel Over a year ago

Helpers are useful for dynamic elements, this one is static, so you really shouldn't use them

Edgar Villegas Alvarado · Accepted Answer · 2011-05-05 05:17:35Z

1

I think you should do this:

<%= Html.ActionLink("", "#", null, new { @Id = "getReservation", @Class = "get-reservation image" })%>

Note that the first parameter is the text to show, that's why you got a '#' on screen before. The third parameter is a null RouteValues, and the fourth is for the additional html attributes.

Here you have the method definition: http://msdn.microsoft.com/en-us/library/dd492124.aspx

Hope to have helped you. Cheers

answered May 5, 2011 at 5:17

Edgar Villegas Alvarado

18.4k2 gold badges45 silver badges61 bronze badges

2 Comments

Haxed Over a year ago

I am getting this error: Server Error in '/' Application. Value cannot be null or empty. Parameter name: linkText [Thanks for trying]

Edgar Villegas Alvarado Over a year ago

Mmm, could you try sending   instead of ""?

Collectives™ on Stack Overflow

How to add an image using css in asp mvc 2?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related