有没有一种方法可以在<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