wake-up-neo.com

Hinzufügen von Bildern in Html.ActionLink

Ich habe versucht, eine Option zum Wechseln zwischen einer Listenansicht und einer Widgetansicht in ASP.net MVC (mit Razor View Engine) zu erstellen.

Ich habe jedoch einige Probleme beim Versuch, ein Bild hinzuzufügen und es auf die richtige Höhe (die gleiche Höhe wie die nächste daneben) zu skalieren.

Ich wollte etwas schaffen wie:

Erwünschtes Ergebnis:

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

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

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

wo der [≡] und der [+] eigentlich kleine symbolbilder waren.

Bisherige Versuche umfassen:

Der Aktionslink war so etwas wie:

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

die nur den Text angezeigt.

Ich habe auch versucht, den Actionlink wie folgt zu erstellen:

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

aber dies löste sich in

a) das Bild war nicht Teil des Links; und

b) das Bild war fast doppelt so groß wie der Text (ähnlich wie in der Abbildung unten)

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

Es würde mir nicht einmal etwas ausmachen, es so zu erstellen:

Alternative:

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

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

wenn ich hätte zu.

Würde jemand wissen/beraten, wie man dies löst/schafft?

htmlasp.net-mvcrazorhtml.actionlink
15
user3913686

Sie können Url.Action für Hyperlink und Url.Content als Bildquelle verwenden.

Dann können Sie das Erscheinungsbild mit CSS gestalten.

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

Sie müssen den Anker von Hand erstellen und den @Html.ActinLink-Helfer verwenden. Sie können den @Url.Action-Helfer verwenden

<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/>

Die Größe des Bildes kann über CSS geändert werden.

Die Url.Action gibt Ihnen den "Link zu Ihrer Aktion" . Der ActionLink erstellt einen Anker mit dem Link zur Aktion.

5
Romias

Der Grund, warum dieser Code nicht funktioniert hat:

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

der dritte Parameter von @ Html.ActionLink dient dazu, zusätzliche Routenwerte hinzuzufügen. Wenn Sie weitere HTML-Attribute hinzufügen möchten, müssen Sie Folgendes verwenden:

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

Außerdem können Sie, wie andere schon sagten, das ~ nicht verwenden. 

Beachten Sie, dass Inline-Stile im Allgemeinen nicht gern gesehen werden, da die beste Vorgehensweise darin besteht, eine CSS-Klasse zu erstellen, die Ihr Hintergrundbild enthält, und die Klasse stattdessen als HTML-Attribut hinzuzufügen. @Style funktioniert jedoch auch hier funktional. Weitere Informationen dazu, warum Inline-Stile schlecht sind, finden Sie hier: Was ist so schlecht an Inline-CSS?

1
tarun713

Versuche dies:

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