在Html.ActionLink中添加图片

Question

在Html.ActionLink中添加图片

htmlasp.net-mvcrazorhtml.actionlink

21

我想在ASP.net MVC（使用razor视图引擎）中创建一个选项，可以在列表视图和小部件视图之间切换。

然而，我遇到了一些问题，试图同时添加一张图片，并将其缩放到“正确的高度”（与旁边的相同高度）。

我想创建类似于下面的东西:

期望结果：

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

[≡] 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) 图像几乎是文本大小的两倍（类似于下图）。

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

我甚至不介意尝试像这样创造它：

替代方案：

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

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

如果我必须这样做。

有人知道/能否建议如何解决/创建这个问题？

- user3913686

首先，删除 background-image:url 中的 ~，这样您至少应该能看到您的图标。您需要一些其他的 CSS 将图标移动到您想要的正确位置。 - tweray

波浪号不需要编写完整的文件路径，是吗？ - user3913686

波浪号只适用于Razor视图引擎可以识别为链接的某些字段。在您的情况下，“@style =”仅被视为普通字符串，Razor视图引擎不会对其进行任何转换。您必须传递一个浏览器可以直接理解的路径。 - tweray

4个回答

6

您需要手动创建锚点，而不是使用@Html.ActionLink助手... 您可以使用@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则创建带有指向该操作的链接的锚点。

- Romias

我认为这也是一个很好的解释，尽管我认为SO在这种情况下可能应该允许多个“接受答案”。谢谢！ - user3913686

2

有趣的事实：如果你误读并使用 @Html.Action，会导致程序崩溃。无限循环万岁！ - Brian P

2

这段代码没有生效的原因是：

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

之所以要使用@Html.ActionLink的第三个参数是为了添加额外的路由值。如果您想添加更多的HTML属性，您需要使用:

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

此外，正如其他人所说，你不能使用~。请注意，内联样式通常被视为不好的做法，最佳实践是创建一个包含背景图像的CSS类，并将该类作为HTML属性添加，但@style在这里也可以起到功能作用。有关为什么内联样式不好的更多信息，请参见此处：什么是内联css的坏处？

- tarun713

1

试试这个：

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

- darkwood

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Win · Accepted Answer

您可以使用 Url.Action 来创建超链接，Url.Content 用于设置图片的来源。

接着您可以使用 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>