有没有办法在<img/>标签上加上@ url.Action

时间:2015-06-01 20:45:24

标签: c# html asp.net-mvc razor

我有一个标签,我使用Razor语法。我使用@ url.Action html帮助器将参数传递给控制器​​上的方法以检索图片。但我希望将此图片作为链接,因此当用户单击图片时,它将转到控制器并打开另一个视图。所以我尝试了以下两种方式,但它告诉我它错过了一个&#34;}&#34; for&#34; Tryone&#34;。对于&#34; Trytwo&#34;它没有给我任何错误,但它没有向我显示图片作为链接。有任何关于wright方式的想法吗?

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 })" />                                                 
}

3 个答案:

答案 0 :(得分:6)

第一次尝试的问题是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>                                        
}

答案 1 :(得分:2)

trytwo无效,因为img不支持href属性。

使用正确语法的第一种方法 - 在href值的末尾添加引号(“)。

答案 2 :(得分:2)

我建议您延长<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="a-div"> <div id="b-div"><div id="d-div"><span>d</span></div></div> <div id="c-div"><span>c</span></div> </div>

这样的事情:

HtmlHelper

然后你可以在你的cshtml页面中使用它:

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());
    }}

请记住创建对您的扩展程序的引用。

参考文献:

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

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