有沒有一種方法可以在<img>標籤上擁有@ url.Action

Question

我有一個標籤，我使用的是Razor語法。即時通訊使用@ url.Action HTML幫助器將參數傳遞給控制器​​上的方法來檢索圖片。但我希望將這張圖片作爲鏈接，因此當用戶點擊圖片時，它會轉到控制器並打開不同的視圖。所以我嘗試了以下兩種顯示方式，但它告訴我它缺少「Tryone」的「}」。對於「Trytwo」，它不會給我任何錯誤，但它不會將圖片顯示爲鏈接。任何想法的方式來做到這一點？

tryone

@foreach (var p in Model) 
{ 
    <a href= "@Url.Action("Index","Home")>   
    <img width="50" height="50" 
      src= "@Url.Action("GetImage", "Sells", new {p.ItemID })" /> 
    </a>           
} 

trytwo

@foreach (var p in Model) 
{      
    <img href="@Url.Action("Index","Home")" width="50" height="50" 
      src= "@Url.Action("GetImage", "Sells", new {p.ItemID })" />             
} 

Answer 1

你的第一個嘗試的一個問題是，href屬性缺少終止角度括號前右引號。

@foreach (var p in Model) 
{ 
    <a href= "@Url.Action("Index","Home")">   
    <img width="50" height="50" 
      src= "@Url.Action("GetImage", "Sells", new {p.ItemID })" /> 
    </a>           
} 

Answer 2

trytwo不工作，因爲img不支持href屬性。

用你的第一種方法用正確的語法 - 在href值的末尾加上引號（「）

Answer 3

我會建議您擴展HtmlHelper

事情是這樣的：

public static class HtmlHelperExtensions 
{ 

    public static MvcHtmlString ActionImageLink(this HtmlHelper helper, string controller, string action, object parameters, object linkHtmlAttributes, string src, object imageHtmlAttributes) 
    { 
     var urlHelper = new UrlHelper(helper.ViewContext.RequestContext); 
     var url = String.IsNullOrWhiteSpace(controller) ? action : urlHelper.Action(action, controller, parameters); 

     var imgTagBuilder = new TagBuilder("img"); 
     var imgUrl = urlHelper.Content(src); 

     imgTagBuilder.MergeAttribute("src", imgUrl); 

     if (imageHtmlAttributes != null) 
     { 
      var props = imageHtmlAttributes.GetType().GetProperties(); 
      props.ToList().ForEach(prop => { imgTagBuilder.MergeAttribute(
       prop.Name, 
       imageHtmlAttributes.GetType().GetProperty(prop.Name).GetValue(imageHtmlAttributes, null) as String); 
      }); 
     } 

     var image = imgTagBuilder.ToString(TagRenderMode.SelfClosing); 

     var aTagBuilder = new TagBuilder("a"); 

     aTagBuilder.MergeAttribute("href", url); 

     if (linkHtmlAttributes != null) 
     { 
      var props = linkHtmlAttributes.GetType().GetProperties(); 
      props.ToList().ForEach(prop => 
      { 
       aTagBuilder.MergeAttribute(
        prop.Name, 
        linkHtmlAttributes.GetType().GetProperty(prop.Name).GetValue(linkHtmlAttributes, null) as String); 
      }); 
     } 

     aTagBuilder.InnerHtml = image; 

     return MvcHtmlString.Create(aTagBuilder.ToString()); 
    }} 

。

然後你可以在你的cshtml頁面中使用它：

@Html.ActionImageLink("Controller", "action/url", null, null, Url.Content("image/location"), null) 

記得創建一個對你的擴展類的引用。

參考文獻：

擴展HtmlHelpers： http://www.codeproject.com/Tips/720515/Custom-HTML-Helper-for-MVC-Application

擴展方法： https://msdn.microsoft.com/en-us/library/bb383977.aspx