ASP.NET GridView 中的超链接图像

要解决的问题

一个常见的开发任务是在 GridView 中放置与底层数据库的数据字段中通常存储的某个“Image_URL”对应的图像，该图像“超链接”到数据库中也存储的另一个“Target_URL”。图像 OnClick 事件应打开目标网页。如果图像丢失，则替代文本应作为超链接文本。

下面描述了与 ASP.NET GridView 控件相关的三种可能的解决方案

1. 带有超链接和 img 元素的 TemplateField

列表 1

<asp:TemplateField>
    <ItemTemplate>
        <asp:HyperLink runat="server" NavigateUrl='<%# Eval("Wiki_URL") %>'
Target="_blank">
            <img src='<%# Eval("Image_URL") %>'  alt="Read online" />
        </asp:HyperLink>
    </ItemTemplate>
</asp:TemplateField>

2. 带有 ImageButton 的 TemplateField

虽然这种技术提供了最少的编码和相当可靠的结果，但并不推荐使用，因为它使用了 PostBack ，因此需要服务器“往返”，从而大大降低了 RIA 的响应速度，并对整体用户体验产生负面影响（此处主要用于教学目的）。

列表 2

<asp:TemplateField>
    <ItemTemplate>
            <asp:ImageButton runat="server" ImageUrl='<%# Eval("Image_URL") %>'
            PostBackUrl='<%# Eval("Target_URL") %>' AlternateText="Read online" />
    </ItemTemplate>
</asp:TemplateField>

3. 带有 ImageButton 和添加到 onClick 的 Javascript window.open 的 TemplateField

这种方法需要一些额外的 JavaScript 编码，但提供了在图像单击事件上打开的目标窗口格式化方面最大的灵活性

列表 3

<itemtemplate>
 <asp:ImageButton ID="ImageButton1" runat="server" 
 ImageUrl='<%# Eval("Image_URL") %>' 
                        OnClientClick='<%# String.Format
            ("javascript:return openTargetURL(\"{0}\")", 
            Eval("Target_URL")) %>'  AlternateText="Read online" />
</itemtemplate>

要添加到 head 部分的 JavaScript 代码片段

此示例 JavaScript 代码片段允许以自定义外观在新的浏览器窗口中打开目标网页

<script type="text/javascript">
    function openTargetURL(url) 
    { window.open(url, "newWindow", "resizable=1,menubar=0,toolbar=0,scrollbars=1"); }
</script>

设计说明：服务器端图像渲染

请注意，与列表 1 相关，图像渲染为“img”元素，而在其他两种情况下，它渲染为“input type="image”元素。列表 4 中相应的 CSS3 代码片段示例展示了解决这些差异的最佳实践。

列表 4

<style type="text/css">
    /* image rendered as img element within table */
    img { width:200px; }
    /* image rendered as <input> element within table */
    input[type="image"] {width:200px; }
</style>

通过 HTML5/CSS3 进行图像装饰

可以应用各种美学增强技术，即单边框和双边框、带有内阴影和颜色渐变的边框，如 [1] 中所述。

参考文献

1. 使用 HTML5/CSS3 添加图像边框[^]
2. 纯 HTML5 / CSS3 解决方案的在线幻灯片放映：无需 Javascript[^]