Comment ajouter une image en utilisant CSS dans asp mvc 2?

Question

Je souhaite ajouter une image cliquable à l'aide d'une classe CSS à une étiquette d'ancrage dans une application ASP MVC 2 et laissez la section URL vide (puisque j'ai un code JavaScript pour charger un écran pop en fonction de l'identifiant donné à la balise d'ancrage. ).

actuellement mon code est:

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

info: J'ai ajouté l'identifiant, car j'utilise JavaScript pour charger une fenêtre contextuelle lorsque l'ID GetReservation est cliqué. La classe d'image ajoute juste un remplissage.

Code CSS actuel:

.image
{
   padding-left: 10px;  
}

Ce que je veux:

Pour retirer le chemin ci-dessous de mon aide d'imagectionLink

"~ / ui / formes / css / images / get-réservation.png"

et définir une classe CSS:

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

et faire quelque chose comme ceci:

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

Mais ce que je regrette dans le navigateur est quelque chose comme ceci: (et l'image ne parvient pas à apparaître.)

Résultat attendu:

Toute aide est appréciée.

merci

Answer 1

Dans ce cas, utiliser ActionLink n'est pas nécessaire, utilisez simplement une image ou un div standard

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

Vous pouvez ajouter ceci au style, pour qu'il ressemble plus à un lien:

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

Enfin, lorsque vous le sélectionnez pour ajouter le gestionnaire de clics, si vous utilisiez $('a.get-reservation'), changez en $('div.get-reservation') ou simplement $('.get-reservation')

Answer 2

Je pense que vous devriez faire ceci:

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

Notez que le premier paramètre est le texte à afficher, c'est pourquoi vous avez déjà un '#' à l'écran.Le troisième paramètre est un RouteValues nul, et le quatrième est pour les attributs html supplémentaires.

Vous avez ici la définition de la méthode: http://msdn.microsoft.com/en-us/library/dd492124.aspx

J'espère vous avoir aidé.Acclamations