在弹出的网格中显示二进制图像答案

【问题标题】：Display binary image in grid with popup在弹出的网格中显示二进制图像
【发布时间】：2014-05-13 19:44:04
【问题描述】：

我的页面上有一个 asp.net 数据网格。这个网格将有三列。身份证、日期和照片。

照片列是表 VARBINARY(MAX) 上的实际列。

当用户单击照片（将是文本或图标）时，我想打开一个带有完整尺寸照片的 jquery 模式。用户可以根据需要右键单击并保存。

我以前从未这样做过。试图在网上搜索，但我只找到将图像显示到列中的示例，这不是我想要的。

【问题讨论】：

检查这个：aspsnippets.com/Articles/…
谢谢！那种引导我显示对话框的方式。但是现在，如何在对话框上显示图像？如果我确实在列本身上显示图像，我可以在对话框中重新创建更大的图像吗？
看看我的回答。不要忘记投票并将其标记为答案。

标签： c# jquery asp.net datagrid

【解决方案1】：

请参阅下面的代码示例，以在网格中显示小图像并通过单击将其大显示。

<asp:GridView runat="server" ID="gvData" AutoGenerateColumns="False">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <img src='<%# "data:image/gif;base64," + Eval("Data")  %>' onclick="DisplayImage(this)" height="10" width="10" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

<%--Popup dialog to display large image--%>
<div id="dialog" style="display: none">
    <img height="100" width="100" id="imgLargeImage" />
</div>

注意：这里我的图片类型是gif，所以请根据您的图片类型更新它。

JavaScript 在弹出窗口中显示图像：

<script type="text/javascript">
    function DisplayImage(ctrl) {

        document.getElementById('imgLargeImage').src = ctrl.src;

        $("#dialog").dialog({
            title: "View Details",
            buttons: {
                Ok: function () {
                    $(this).dialog('close');
                }
            },
            modal: true
        });
    }
</script>

【讨论】：

谢谢。对于将来的参考，就我而言，我做了一些小的差异。我使用 http 处理程序来获取图像的字节。这两个例子指导了我：bit.ly/1pRq5vc 和 bit.ly/1ecyynE
那是好事。我应该提出相同的建议，但我认为这将是您的下一个问题:)