CSS 将图像附加到 MVC 4 中的 ActionLink
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19245343/
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
Attach image to ActionLink in MVC 4
提问by Toxic
I am using ActionLink with id in MVC 4 app and assinging actionLink id an image in css but on on earth I am doing wrong. is not working! here is my code
我在 MVC 4 应用程序中使用带有 id 的 ActionLink 并在 css 中分配 actionLink id 图像，但实际上我做错了。不管用！这是我的代码
<div class="logo_container">
@Html.ActionLink(" ", "Index", "Home", null, new { id = "_Logo" })
</div>
CSS
CSS
.logo_container {
width:339px;
height:116px;
}
#_Logo {
background-image: url("../Images/logo.png");
width:339px;
height:116px;
background-color:green;
}
回答by Andriy Gubal
This is from my application. Works ok:
这是我的申请。工作正常：
.logo{
background:no-repeat url(/Content/photo/png/sprite.png) 0 0;
height:15px;
width:20px;
overflow:hidden;
float:left;
border:none;
display:inline;
}
<a href="@Url.Action("Action", "Controller")" class="logo"></a>
回答by Dilip0165
The best way you can do for both Html.ActionLink and Ajax.ActionLink is as below
您可以为 Html.ActionLink 和 Ajax.ActionLink 执行的最佳方法如下
@Html.Raw(@Html.ActionLink("[replacetext]", "Index", "Home").ToHtmlString().Replace("[replacetext]", "<img src=\"/Content/img/logo.png\" ... />"))
@Html.Raw(@Ajax.ActionLink("[replacetext]", "Index", "Home", new AjaxOptions { UpdateTargetId="dvTest"}).ToHtmlString().Replace("[replacetext]", "<img src=\"/Contents/img/logo.png\" … />"))
additionaly you want to provide class and style so you can do as following
另外您想提供类和样式，以便您可以执行以下操作
@Html.Raw(@Ajax.ActionLink("[replacetext]", "Index", "Home", new AjaxOptions { UpdateTargetId="dvTest"}).ToHtmlString().Replace("[replacetext]", "<img src=\"/Contents/img/logo.png\" style=\"width:10%\" … />"))
回答by Hashem Aboonajmi
use your custom HtmlHelper:
使用您的自定义 HtmlHelper：
namespace Order.Web.UI.Infrastructure
{
public static class CustomHelpers
{
public static MvcHtmlString ImageActionLink(this HtmlHelper html, string imageSource, string url)
{
string imageActionLink = string.Format("<a href=\"{0},\"><img width=\"150\" height=\"150\" src=\"{1}\" /></a>",url,imageSource);
return new MvcHtmlString(imageActionLink);
}
}
}
then in your view.cshtml:
然后在您的 view.cshtml 中：
@using OrderPad2.Web.UI.Infrastructure
.
.
.
.
@Html.ImageActionLink(@app.Icon,@app.AppStoreLink)
回答by Mike
You only needed to change:
您只需要更改：
new { id = "_logo"}
to:
到：
new { @id = "_logo"}
Without the @in front of idit treats it as a parameter instead of a attribute of the html element.
如果@前面没有，id则将其视为参数而不是 html 元素的属性。
Withoutthe @, it would produce:
如果没有的@，它会产生：
www.site.com/home/index/_logo
www.site.com/home/index/_logo
Withthe @, it would produce:
随着的@，它会产生：
www.site.com/home
www.site.com/home
and the element would be:
元素将是：
<a id="_logo" href=""></a>
