How to add an image using css in asp mvc 2?
-
28-10-2019 - |
Вопрос
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.)
Expected outcome:
Any help is appreciated.
Thanks
Решение
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')
Другие советы
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