Gridview - 单击时在另一个框中弹出图像

Question

我正在使用带有 vb.net 的 Visual Studio 2017。我有一个gridview，其中一列是图像。我想单击图像并在另一个框中弹出图像，并用关闭按钮显示更大的图片。我没有永远编程，我正在重新学习 vb.net，当然，我的老板昨天需要这个。所以，只显示网格的图像部分，我的代码是：

<asp:TemplateField HeaderText="Image" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="50px">
    <ItemTemplate>
        <asp:Imagebutton ID="Img" runat="server" ImageUrl='<%# Eval("ImageBase64", "{0}") %>' ControlStyle-Width="100" ControlStyle-Height = "100" />
    </ItemTemplate>
</asp:TemplateField>

所以，图像显示在网格中：

Imports System.Configuration
Imports System.Data.SqlClient
Imports System.Drawing
Imports System.IO

Public Class _default
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

        Dim connectionStr As String = ConfigurationManager.ConnectionStrings("ictsqlConnection").ConnectionString

        Using con As SqlConnection = New SqlConnection(connectionStr)
            'open
            con.Open()

            Using cmd As SqlCommand = New SqlCommand("SELECT SurplusId, Department, Category, Item, VehicleMileage, SerialNo, AgeValueinYrs, AgeValueinMons, Visible, Image FROM Surplus", con)
                Using da As SqlDataAdapter = New SqlDataAdapter(cmd)

                    Dim dt As DataTable = New DataTable()

                   'fill DataTable with data from database
                    da.Fill(dt)

                   'add column that will store the image as a base64 string
                    dt.Columns.Add("ImageBase64", GetType(System.String))

                    For i As Integer = 0 To dt.Rows.Count - 1
                        'convert image Byte() from database to base64 string and store in a new column in the DataTable
                        dt(i)("ImageBase64") = "data:image/jpg;base64," & Convert.ToBase64String(CType(dt(i)("Image"), Byte()))

                    Next

                    'remove column that contains Byte() from DataTable
                    dt.Columns.Remove("Image")

                    GridView1.DataSource = dt
                    GridView1.DataBind()
                End Using
            End Using
        End Using
    End Sub
End Class

我搜索了如何在弹出窗口中显示图片，但没有任何效果。 ImageButton 确实允许我单击图片（大声笑），但我不知道要在其后面放置什么代码，因此图像会在弹出窗口中出现。我很感激你能给我的任何帮助。提前谢谢你。

Answer 1

我建议你使用 jQuery.UI。 （无论如何，你可能有 jQuery 可用）。

因此，我们将客户端单击事件附加到 Grid。

我们的标记是这样的：

    <div style="width:50%">
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
            DataKeyNames="ID" CssClass="table" >
            <Columns>
                <asp:BoundField DataField="Fighter" HeaderText="Fighter"  />
                <asp:BoundField DataField="Engine" HeaderText="Engine"  />
                <asp:BoundField DataField="Thrust" HeaderText="Thrust"  />
                <asp:BoundField DataField="Description" HeaderText="Description" />

                <asp:TemplateField HeaderText="View">
                    <ItemTemplate>
                    <asp:ImageButton ID="btnImage" runat="server" Height="68px" Width="149px"
                        OnClientClick ="popimage(this);return false"
                        />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

我们加载网格的代码——从数据库中提取图像（使用的行数据绑定）是这样的：

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    If Not IsPostBack Then
        LoadGrid
    End If

End Sub

Sub LoadGrid()

    Using conn As New SqlConnection(My.Settings.TEST4)
        Using cmdSQL As New SqlCommand("SELECT * FROM Fighters", conn)

            conn.Open()
            Dim rstData = New DataTable
            rstData.Load(cmdSQL.ExecuteReader)
            GridView1.DataSource = rstData
            GridView1.DataBind()

        End Using
    End Using

End Sub

Protected Sub GridView1_RowDataBound(sender As Object, e As GridViewRowEventArgs) Handles GridView1.RowDataBound

    If e.Row.RowType = DataControlRowType.DataRow Then

        Dim btnImage As ImageButton = e.Row.FindControl("btnImage")
        Dim gData As DataRowView = e.Row.DataItem
        Dim IBytes() As Byte = gData.Item("Image")
        btnImage.ImageUrl = "Data:Image/jpg;base64," + Convert.ToBase64String(IBytes)

    End If

End Sub

现在我们有了这个：

所以，我们需要为弹出对话框添加一个 div - 所以我们添加它，以及弹出窗口的 js 代码。

（这个标记就在网格之后）

            <div id="imagepop" style="display:none;text-align:center;height:80%">
                <asp:Image ID="Image1" runat="server" ClientIDMode="Static"
                style="height:96%"/>
            </div>

        <script>
            function popimage(btn) {
                FromImage = $(btn)
                ToImage = $("#Image1")
                ToImage.attr("src", FromImage.attr("src"))

                pHeight = ($(window).height() * 0.96)
                pWidth = ($(window).width() * 0.80)

                myDialog = $("#imagepop");                    
                myDialog.dialog({
                    title: "Fighter",
                    modal: true,
                    height: pHeight,
                    width: pWidth,
                    buttons: {

                        Ok: function () {
                            myDialog.dialog("close")
                        }
                    }
                })
            }
        </script>

现在，如果我们单击网格中的图像按钮，我们会得到：

所以，代码所做的就是点击事件中的“this”传递我们点击的图像控件。然后我们抓取图片，把它塞进一个“div”，然后弹出一个 jQuery.UI 对话框——你就得到了上面的内容。

编辑：处理空图像

问题是如何处理具有空列的数据库行？ （好吧，我们可以向网格提供一个查询，该查询检查并且不包括没有图片的行）。但这可能不是一个有效的假设。因此，这将检查没有图像的行：

Protected Sub GridView1_RowDataBound(sender As Object, e As GridViewRowEventArgs) Handles GridView1.RowDataBound

    If e.Row.RowType = DataControlRowType.DataRow Then

        Dim btnImage As ImageButton = e.Row.FindControl("btnImage")
        Dim gData As DataRowView = e.Row.DataItem
        If IsDBNull(gData.Item("Image")) = False Then

            Dim IBytes() As Byte = gData.Item("Image")
            btnImage.ImageUrl = "Data:Image/jpg;base64," + Convert.ToBase64String(IBytes)

        End If
    End If

End Sub

编辑 #2 - 使用 jQuery 和 jQuery.UI

因此，作为一般规则，您下载 jQuery 和 jQuery.ui 库。将它们放在项目的文件夹中——我倾向于创建一个名为 scripts 的文件夹，并将 jQuery 和 jQuery.UI 放入该文件夹中。因此，您在该页面中的引用将看起来像这样：

 <link href="../Content/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="../Scripts/jquery-1.12.4.js"></script>
<script src="../Scripts/jquery-ui-1.12.1.js"></script>
<script src="../Scripts/bootstrap.js"></script>

但是，您可以使用 CDN（内容分发网络）代替下载。这只是一个花哨的术语，您可以参考他们的网站，而不是将这些 JavaScript 库下载并放入文件夹中。有些人喜欢这个选择，有些人不喜欢（因为您的网页现在引用外部外部 URL 来使用这些库）。所以，让我们在这个例子中使用这个选项。这是我对此页面的完整工作标记：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

     <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

     <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" />
</head>
<body>
    <form id="form1" runat="server">
        <div style="width:50%">
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
                DataKeyNames="ID" CssClass="table" >
                <Columns>
                    <asp:BoundField DataField="Fighter" HeaderText="Fighter"  />
                    <asp:BoundField DataField="Engine" HeaderText="Engine"  />
                    <asp:BoundField DataField="Thrust" HeaderText="Thrust"  />
                    <asp:BoundField DataField="Description" HeaderText="Description" />

                    <asp:TemplateField HeaderText="View">
                        <ItemTemplate>
                        <asp:ImageButton ID="btnImage" runat="server" Height="68px" Width="149px"
                            OnClientClick ="popimage(this);return false"
                            />
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
        </div>

                <div id="imagepop" style="display:none;text-align:center;height:80%">
                    <asp:Image ID="Image1" runat="server" ClientIDMode="Static"
                    style="height:96%"/>
                </div>

            <script>
                function popimage(btn) {
                    FromImage = $(btn)
                    ToImage = $("#Image1")
                    ToImage.attr("src", FromImage.attr("src"))

                    pHeight = ($(window).height() * 0.96)
                    pWidth = ($(window).width() * 0.80)

                    myDialog = $("#imagepop");                    
                    myDialog.dialog({
                        title: "Fighter",
                        modal: true,
                        height: pHeight,
                        width: pWidth,
                        closeText :"",
                        show : "fade",
                        buttons: {

                            Ok: function () {
                                myDialog.dialog("close")
                            }
                        }
                    })
                }
            </script>

    </form>
</body>
</html>