Question

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

照片列是表VARBINARY（MAX）上的实际列。

当用户点击照片（可能是文字或图标）时，我想打开一个带有完整尺寸照片的jquery模式。用户可以右键单击并保存，如果他想要的话。

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

Answer 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>

使用弹出窗口在网格中显示二进制图像

1 个答案: