Ajouter des images dans Html.ActionLink

J'ai essayé de créer une option pour basculer entre un affichage de liste et l'afficher dans le widget ASP.net MVC (avec moteur de vue razor).

Cependant, je vais avoir quelques difficultés en essayant à la fois d'ajouter une image, ainsi que l'échelle à la "bonne taille" (la même hauteur que la prochaine à côté d'elle).

Je cherchais à créer quelque chose comme:

Résultat Souhaité:

---------------------------------------------------------------------------------

[≡­] List View | [+] Widget View

---------------------------------------------------------------------------------

où la [≡] et [+] étaient en fait des petites images de l'icône.

Tentatives à ce jour comprennent:

Le lien d'action était quelque chose comme:

@Html.ActionLink("List View", "listView",  
    new { @style = "background-image:url('~/Content/Images/listIcon.png')" },null)

qui affiche uniquement le texte.

J'ai aussi essayé de créer le actionlink comme:

<img src="~/Content/Images/listIcon.png" />@Html.ActionLink("List View", "Index")

mais ce résolues dans

a) l'image n'était pas une partie de la liaison; et

b) l'image a été presque deux fois la taille du texte (similaire à l'illustration ci-dessous)

 _    _               _    _
|      |             |      |
| icon |             | icon |
|_    _| List View | |_    _| Widget View

Je n'aurais même pas à l'esprit d'essayer de le créer comme:

Alternative:

---------------------------------------------------------------------------------

 _    _               _    _
|      |             |      |
| icon | List View | | icon | Widget View
|_    _|             |_    _|

si je avait.

Quelqu'un connaît/conseiller sur la façon de résoudre les créer?

source d'informationauteur

  1. 24

    Vous pouvez utiliser Url.Action pour le lien hypertexte et Url.Contenu pour la source de l'image.

    Ensuite, vous pouvez définir le style de l'apparence avec les CSS.

    Ajouter des images dans Html.ActionLink

    <ul class="links">
    <li>
       <a href="@Url.Action("ListView", "Home")" title="List View" class="links">
            <img alt="List View" src="@Url.Content("~/Images/ListView.png")"> 
            List View
       </a>
    </li>
    <li>
       <a href="@Url.Action("WidgetView", "Home")" title="Widget View" class="links">
            <img alt="Widget View" src="@Url.Content("~/Images/WidgetView.png")"> 
            Widget View
       </a>
    </li>
</ul>
<style type="text/css">
    ul.links {
        list-style-type: none;
    }    
        ul.links li {
            display: inline-block;
            border-left: 1px solid black;
            padding-left: 10px;
            margin-left: 10px;
        }    
            ul.links li:first-child {
                border-left: 0;
                padding-left: 0;
                margin-left: 0;
            }
</style>
  2. 5

    Vous avez besoin pour créer l'ancre à la main, et la place de l'utilisation de la @Html.ActinLink assistant... vous pouvez utiliser le @Url.Action helper

    <a href="@Url.Action("YourAction", "YourController", null)">
     <img src="yourImageSource"  style="vertical-align: middle; width: 30px;"> List View
<a/> |
<a href="@Url.Action("YourAction", "YourController", null)">
     <img src="yourImageSource" style="vertical-align: middle; width: 30px;"> Grid View
<a/>

    La taille de l'image peut être modifiée via CSS.

    L'Url.Action vous donne le lien de votre action".
    Le ActionLink, crée un point d'ancrage avec le lien vers l'action.

  3. 0

    La raison pour laquelle ce code ne fonctionne pas:

    @Html.ActionLink("List View", "listView", new { @style = "background-image:url('~/Content/Images/listIcon.png')" },null)

    était parce que le 3e paramètre de @Html.ActionLink consiste à ajouter de l'itinéraire valeurs. Si vous voulez ajouter d'autres attributs HTML, vous devez utiliser:

    @Html.ActionLink("List View", "listView", null, new { @style = "background-image:url('~/Content/Images/listIcon.png')" })

    En outre, comme d'autres l'ont dit, vous ne pouvez pas utiliser la ~.

    Noter que les styles en ligne sont généralement mal vu, comme la meilleure pratique serait de créer une classe CSS qui contient votre image de fond d'écran et ajouter la classe comme l'attribut HTML à la place, mais @style fonctionnellement travail ici. Plus d'info sur le pourquoi des styles en ligne sont les mauvais peuvent être trouvés ici: Ce qui est si mal à propos dans la ligne de CSS?

  4. 0

    Essayez ceci:

    Html.ActionLink(" ", "Edit", new {id = c.ID}, new { @style = "background:url('../../Images/Menu/edit.png') no-repeat center right; display:block; height: 30px; width: 50px" }