在 Html.ActionLink 中添加图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26213704/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding images within Html.ActionLink
提问by Win
I was trying to create an option to switch between a list view and widget view in ASP.net MVC (with razor view engine).
我试图在 ASP.net MVC（使用剃刀视图引擎）中创建一个在列表视图和小部件视图之间切换的选项。
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:
我正在寻找类似的东西：
Desired Result:
预期结果：
---------------------------------------------------------------------------------
-------------------------------------------------- -------------------------------
[≡-] List View | [+] Widget View
---------------------------------------------------------------------------------
-------------------------------------------------- -------------------------------
where the [≡]and [+]were actually small icon images.
其中[≡]和[+]实际上是小图标图像。
Attempts so far include:
迄今为止的尝试包括：
The action link was something like:
操作链接类似于：
@Html.ActionLink("List View", "listView",
new { @style = "background-image:url('~/Content/Images/listIcon.png')" },null)
which only displayed the text.
只显示文本。
I also tried creating the actionlink like:
我还尝试创建操作链接，如：
<img src="~/Content/Images/listIcon.png" />@Html.ActionLink("List View", "Index")
but this resolved in
但这解决了
a) the image wasn't part of the link; and
a) 图片不是链接的一部分；和
b) the image was almost twice the size of the text (similar to diagram below)
b) 图像几乎是文本大小的两倍（类似于下图）
_ _ _ _
| | | |
| icon | | icon |
|_ _| List View | |_ _| Widget View
I wouldn't even mind trying to create it like:
我什至不介意尝试像这样创建它：
Alternative:
选择：
---------------------------------------------------------------------------------
-------------------------------------------------- -------------------------------
_ _ _ _
| | | |
| icon | List View | | icon | Widget View
|_ _| |_ _|
if I hadto.
如果我不得不。
Would anyone know/advise how to solve/create this?
有谁知道/建议如何解决/创建这个？
回答by Win
You can use Url.Actionfor hyperlink and Url.Contentfor image source.
您可以使用Url.Action作为超链接，使用Url.Content作为图像源。
Then you can style the appearance with CSS.
然后，您可以使用 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>
回答by Romias
You need to create the anchor by hand, and insted of using the @Html.ActinLinkhelper... you can use the @Url.Actionhelper
您需要手动创建锚点，并使用@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/>
The size of the image can be modified via CSS.
可以通过 CSS 修改图像的大小。
The Url.Action gives you the "link to your action". The ActionLink, creates an anchor with the link to the action.
Url.Action 为您提供“指向您的操作的链接”。ActionLink，使用指向操作的链接创建一个锚点。
回答by tarun713
The reason this code did not work:
此代码不起作用的原因：
@Html.ActionLink("List View", "listView", new { @style = "background-image:url('~/Content/Images/listIcon.png')" },null)
was because the 3rd parameter of @Html.ActionLink is to add additional route values. If you want to add more HTML attributes, you need to use:
是因为@Html.ActionLink 的第三个参数是添加额外的路由值。如果要添加更多 HTML 属性，则需要使用：
@Html.ActionLink("List View", "listView", null, new { @style = "background-image:url('~/Content/Images/listIcon.png')" })
Additionally, like others have said, you can't use the ~.
此外，正如其他人所说，您不能使用 ~.
Note that inline styles are generally frowned upon, as the best practice would be to create a CSS class that contains your background-image and add the class as the HTML attribute instead, but @style would functionally work here as well. More info on why inline styles are bad can be found here: What's so bad about in-line CSS?
请注意，内联样式通常不受欢迎，因为最佳实践是创建一个包含背景图像的 CSS 类，并将该类添加为 HTML 属性，但 @style 在这里也可以正常工作。更多关于为什么内联样式不好的信息可以在这里找到：内联CSS 有什么不好？
回答by darkwood
Try this:
尝试这个：
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" }
