asp:Image 在 asp:HyperLink 中根本不呈现答案

【问题标题】：asp:Image is not rendered at all inside asp:HyperLinkasp:Image 在 asp:HyperLink 中根本不呈现
【发布时间】：2014-09-06 02:24:44
【问题描述】：

我在 ASP.NET 4.5 / VS 2013 中有这段代码

<asp:HyperLink ID="ht" runat="server" NavigateUrl='<%# Eval("Url") %>'>
   <asp:Image ID="img" runat="server" CssClass="img-responsive" 
    ImageUrl='<%# Eval("Image") %>'></asp:Image>
</asp:HyperLink>

超链接里面的图片根本没有渲染，为什么？我也尝试过使用静态图片链接，但得到了相同的结果。

我需要超链接内的图像，因为我需要一个自定义的图像 css 类

【问题讨论】：

生成的客户端标记是什么？ Eval("Image")的值是多少？
查看图片
我不确定asp:HyperLink 是否可以包含这样的标记。尽管asp:HyperLink 标记具有ImageUrl 属性，但设置应该大致相同（尽管您需要进行一些修改才能了解如何设置结果图像的CssClass，而不是父锚点）。您也可以尝试使用普通的锚标签而不是 asp:HyperLink，因为锚标签肯定可以包含其他标签。
您的代码应该可以工作。你能交叉检查你的 '' 是否有价值。为此，为它分配一个标签控件。
如果您有 jpg 类型的图像，请更改您的代码。

标签： asp.net image hyperlink

【解决方案1】：

asp:HyperLink Web 控件呈现为锚标记，<asp:HyperLink> ... </asp:HyperLink> 之间的任何内容都将成为 Text 属性的值。

我建议您尝试使用 asp:ImageButton 来代替您的目的。

<asp:ImageButton ID="ibtnMyControl" CssClass="img-responsive" PostBackUrl="<%# Eval("Url") %>" ImageUrl="<%# Eval("Image") %>" />

ImageButton API reference

【讨论】：

谁告诉你超链接之间的任何东西，都会变成那个文字。我有工作的例子。你也可以检查 asp:HyperLink> 此代码显示图像。
没用，因为我需要设置图片的CSS属性为img-responsive
您需要图像可在服务器端访问吗？为什么不在超链接中使用<img src='<%# Eval("Image") %>' />？
我不想使用 imagebutton 在照片库上进行 50 次回发，我尝试了 img src='' /> 但它没有工作，超链接内根本没有出现img标签
@danyim 我已经尝试过了，但在超链接标签内没有呈现任何内容

【解决方案2】：

我测试了您的代码，它可以正确呈现图像。最坏的情况，你可以使用DataList.ItemDataBound Event来绑定数据。

ASPX

<asp:DataList ID="DataList1" runat="server" 
     OnItemDataBound="DataList1_ItemDataBound">
    <ItemTemplate>
        <asp:HyperLink ID="ht" runat="server">
            <asp:Image ID="img" runat="server" CssClass="img-responsive"/>
        </asp:HyperLink>    
    </ItemTemplate>
</asp:DataList>

代码背后

public class MyClass
{
    public string Url { get; set; }
    public string Image { get; set; }
}

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        DataList1.DataSource = new List<MyClass>
        {
            new MyClass
            {
                Url = "http://www.google.com",
                Image = "https://www.google.com/images/srpr/logo11w.png"
            },
            new MyClass
            {
                Url = "http://www.msn.com",
                Image = "http://col.stb00.s-msn.com/i/80/53CAC6A10B6248682CF221B24A92.gif"
            },
        };
        DataList1.DataBind();
    }
}

protected void DataList1_ItemDataBound(object sender, DataListItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item ||
        e.Item.ItemType == ListItemType.AlternatingItem)
    {
        var item = e.Item.DataItem as MyClass;

        var ht = e.Item.FindControl("ht") as HyperLink;
        ht.NavigateUrl = item.Url;

        var img = e.Item.FindControl("img") as Image;
        img.ImageUrl = item.Image;
    }
}

如果使用 DataSet 或 DataTable，则需要将 DataItem 强制转换为 DataRowView。 var dr = e.Item.DataItem as DataRowView;。 look at this example.

【讨论】：

你为什么不用eval？