web-dev-qa-db-fra.com

Ajout d'images dans Html.ActionLink

J'essayais de créer une option permettant de basculer entre une vue de liste et une vue de widget dans ASP.net MVC (avec un moteur de vue rasoir). 

Cependant, j'ai du mal à essayer à la fois d'ajouter une image et de la redimensionner à la "hauteur correcte" (la même hauteur que la suivante).

Je cherchais à créer quelque chose comme:

Résultat désiré:

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

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

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

où [≡] et [+] étaient en réalité de petites images d'icônes. 

Les 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 n'affichait que le texte.

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

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

mais cela a résolu 

a) l'image ne faisait pas partie du lien; et 

b) l'image faisait presque deux fois la taille du texte (semblable au schéma ci-dessous)

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

Cela ne me dérangerait même pas d'essayer de le créer comme:

Alternative:

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

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

si je devais à.

Quelqu'un sait-il/conseille-t-il comment résoudre/créer ceci?

htmlasp.net-mvcrazorhtml.actionlink
15
user3913686

Vous pouvez utiliser Url.Action pour le lien hypertexte et Url.Content pour la source d'image.

Ensuite, vous pouvez styliser l'apparence avec CSS.

enter image description here

<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>
28
Win

Vous devez créer l’ancre à la main et installer l’aide @Html.ActinLink ... vous pouvez utiliser l’aide @Url.Action.

<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 vers votre action" . L'ActionLink crée une ancre avec le lien vers l'action.

5
Romias

La raison pour laquelle ce code n'a pas fonctionné:

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

c'était parce que le 3ème paramètre de @ Html.ActionLink est d'ajouter des valeurs de route supplémentaires. Si vous souhaitez ajouter plus d'attributs HTML, vous devez utiliser:

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

De plus, comme d’autres l’ont dit, vous ne pouvez pas utiliser le ~. 

Notez que les styles en ligne sont généralement mal vus, dans la mesure où la meilleure pratique consiste à créer une classe CSS contenant votre image d'arrière-plan et à ajouter la classe comme attribut HTML, mais @style fonctionnerait également ici. Vous trouverez plus d’informations sur la raison pour laquelle les styles en ligne sont mauvais peuvent être trouvées ici: Quel est le problème avec les CSS en ligne?

1
tarun713

Essaye ça:

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" }
0
darkwood