web-dev-qa-db-ja.com

Html.ActionLink内に画像を追加する

ASP.net MVCでリストビューとウィジェットビューを切り替えるオプションを作成しようとしていました（カミソリビューエンジンを使用）。

しかし、画像を追加すると同時に、「正しい高さ」（その隣の高さと同じ高さ）に拡大縮小するのに苦労しています。

私は次のようなものを作成しようとしていました：

望ましい結果：

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

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

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

どこ [≡]および[+]は実際には小さなアイコン画像でした。

これまでの試みには以下が含まれます：

アクションリンクは次のようなものでした：

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

テキストのみを表示しました。

私も次のようなアクションリンクを作成してみました：

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

しかし、これは

a）画像はリンクの一部ではありませんでした。そして

b）画像はテキストのほぼ2倍のサイズでした（下図と同様）

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

私はそれを次のように作成しようとしても気にしません：

代替案：

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

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

ihadへ.

誰もこれを解決/作成する方法を知っていますか？

htmlasp.net-mvcrazorhtml.actionlink
16
user3913686

rl.Actionをハイパーリンクに、rl.Contentを画像ソースに使用できます。

次に、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>
31
Win

手でアンカーを作成する必要があり、@Html.ActinLinkヘルパー... @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/>

画像のサイズはCSSで変更できます。

Url.Actionは、「アクションへのリンク」を提供します。 ActionLinkは、アクションへのリンクを持つアンカーを作成します。

5
Romias

このコードが機能しなかった理由：

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

@ Html.ActionLinkの3番目のパラメーターが追加のルート値を追加するためだからです。 HTML属性をさらに追加する場合は、次を使用する必要があります。

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

さらに、他の人が言ったように、〜は使用できません。

背景画像を含むCSSクラスを作成し、代わりにHTML属性としてクラスを追加することをお勧めしますが、@ styleはここでも機能します。インラインスタイルが悪い理由の詳細については、こちらを参照してください： インラインCSSの何が悪いのですか？

1
tarun713

これを試して：

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