在Html.ActionLink中添加图像

Question

我试图创建一个在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
|_    _|             |_    _| 

如果我有到。

有人知道/建议如何解决/创建这个吗？

Answer 1

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

Answer 2

您需要手动创建锚点，并且使用@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会创建一个锚点，其中包含指向操作的链接。

Answer 3

此代码不起作用的原因：

@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')" })

另外，和其他人一样，你不能使用〜。

请注意，内联样式通常不受欢迎，因为最佳做法是创建一个包含background-image的CSS类，并将类添加为HTML属性，但@style在这里也可以在函数中工作。有关内联样式为何不良的更多信息，请访问：What's so bad about in-line CSS?

Answer 4

试试这个：

Traceback (most recent call last):
  File "C:\Users\Rasmus\Dropbox\Portfolio\src\Main.py", line 8, in <module>
    for line in csvfile:
_csv.Error: line contains NULL byte