[Image] 動作圖像MVC3剃刀



Answers

您可以使用適用於所有鏈接的Url.Content ,因為它會將代Url.Content轉換為根URI。

<a href="@Url.Action("Edit", new { id=MyId })">
    <img src="@Url.Content("~/Content/Images/Image.bmp")", alt="Edit" />
</a>
Question

在MVC3中使用Razor替換圖像鏈接的最佳方式是什麼? 我現在只是在做這件事:

<a href="@Url.Action("Edit", new { id=MyId })"><img src="../../Content/Images/Image.bmp", alt="Edit" /></a> 

有沒有更好的辦法?




幻燈片修改更改幫助器

     public static IHtmlString ActionImageLink(this HtmlHelper html, string action, object routeValues, string styleClass, string alt)
    {
        var url = new UrlHelper(html.ViewContext.RequestContext);
        var anchorBuilder = new TagBuilder("a");
        anchorBuilder.MergeAttribute("href", url.Action(action, routeValues));
        anchorBuilder.AddCssClass(styleClass);
        string anchorHtml = anchorBuilder.ToString(TagRenderMode.Normal);

        return new HtmlString(anchorHtml);
    }

CSS類

.Edit {
       background: url('../images/edit.png') no-repeat right;
       display: inline-block;
       height: 16px;
       width: 16px;
      }

創建鏈接只需傳遞類名稱

     @Html.ActionImageLink("Edit", new { id = item.ID }, "Edit" , "Edit") 



這個擴展方法也可以工作(放置在一個公共靜態類中):

    public static MvcHtmlString ImageActionLink(this AjaxHelper helper, string imageUrl, string altText, string actionName, object routeValues, AjaxOptions ajaxOptions)
    {
        var builder = new TagBuilder("img");
        builder.MergeAttribute("src", imageUrl);
        builder.MergeAttribute("alt", altText);
        var link = helper.ActionLink("[replaceme]", actionName, routeValues, ajaxOptions);
        return new MvcHtmlString( link.ToHtmlString().Replace("[replaceme]", builder.ToString(TagRenderMode.SelfClosing)) );
    }



這將是非常好的工作

<a href="<%:Url.Action("Edit","Account",new {  id=item.UserId }) %>"><img src="../../Content/ThemeNew/images/edit_notes_delete11.png" alt="Edit" width="25px" height="25px" /></a>



那麼,你可以使用@Lucas解決方案,但也有另一種方法。

 @Html.ActionLink("Update", "Update", *Your object value*, new { @class = "imgLink"})

現在,將此類添加到CSS文件或您的頁面中:

.imgLink
{
  background: url(YourImage.png) no-repeat;
}

有了這門課,任何鏈接都會有你想要的形象。






Links