将图像附加到MVC 4中的ActionLink

时间:2013-10-08 10:33:49

标签: css asp.net-mvc razor actionlink

我在MVC 4应用程序中使用带有id的ActionLink,并在css中为actionLink id分配一个图像,但在地球上我做错了。不管用!这是我的代码

 <div class="logo_container">
            @Html.ActionLink(" ", "Index", "Home", null, new { id = "_Logo" })
 </div>

CSS

.logo_container {
width:339px;
height:116px; 
}

#_Logo {
background-image: url("../Images/logo.png");
 width:339px;
height:116px;
background-color:green;
}

4 个答案:

答案 0 :(得分:6)

这是我的申请。工作正常:

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

答案 1 :(得分:6)

你可以为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\" … />"))

另外,您希望提供类和样式,以便您可以执行以下操作

@Html.Raw(@Ajax.ActionLink("[replacetext]", "Index", "Home", new AjaxOptions { UpdateTargetId="dvTest"}).ToHtmlString().Replace("[replacetext]", "<img src=\"/Contents/img/logo.png\" style=\"width:10%\" … />"))

答案 2 :(得分:5)

使用您的自定义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);
        }
    }
}

然后在你的view.cshtml中:

@using OrderPad2.Web.UI.Infrastructure
.
.
.
.
@Html.ImageActionLink(@app.Icon,@app.AppStoreLink) 

答案 3 :(得分:0)

您只需要更改:

new { id = "_logo"}

为:

new { @id = "_logo"} 

如果@前面没有id,则会将其视为参数而不是html元素的属性。

没有 @,就会产生:

  

www.site.com/home/index/_logo

@,会产生:

  

www.site.com/home

,元素将是:

<a id="_logo" href=""></a>