在Html.ActionLink添加图像 [英] Adding images within Html.ActionLink

问题描述

我试图创建一个选项列表视图和widget视图在ASP.net MVC（剃刀视图引擎）之间切换。

I was trying to create an option to switch between a list view and widget view in ASP.net MVC (with razor view engine).

不过，我有一些麻烦，试图既增加图像，以及它的规模要正确的高度（相同的高度为下一旁边）。

However, I am having some trouble trying to both add an image, as well as scale it to the 'correct height' (the same height as the next next to it).

我一直在寻找创造类似：

I was looking to create something like:

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

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

其中 [≡] 和 [+] 实际上是小图标的图像。

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

where the [≡] and [+] were actually small icon images.

尝试到目前为止，包括：

操作链接是这样的：

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

只显示文本。

我也尝试创建ActionLink的，如：

I also tried creating the actionlink like:

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

但是这解决了

A）的形象是不是链接的一部分;和

a) the image wasn't part of the link; and

b）该图像是文本的大小差不多（类似下面的原理图）两次

b) the image was almost twice the size of the text (similar to diagram below)

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

我甚至不介意尝试创建它像：

I wouldn't even mind trying to create it like:

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

如果我的中有的到。

请问谁知道/建议如何解决/创建这个？

Would anyone know/advise how to solve/create this?

推荐答案

您可以使用 Url.Action 作为超链接和 Url.Content 作为图像源。

You can use Url.Action for hyperlink and Url.Content for image source.

然后就可以使用样式CSS的外观。

Then you can style the appearance with CSS.

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

这篇关于在Html.ActionLink添加图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！