Gridview - 单击时在另一个框中弹出图像
Posted
技术标签:
【中文标题】Gridview - 单击时在另一个框中弹出图像【英文标题】：Gridview - Pop-up Image in another box when clicked on 【发布时间】：2022-01-20 20:06:06 【问题描述】：我正在使用带有 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 确实允许我单击图片（大声笑），但我不知道要在其后面放置什么代码，因此图像会在弹出窗口中出现。我很感激你能给我的任何帮助。提前谢谢你。
【问题讨论】：
【参考方案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>
【讨论】：
以前从未使用过 jquery。我确实安装了 JQuery-UI。遇到错误，并试图研究但感到困惑。当我单击 gridview 中的图片时，我收到未捕获的引用错误：在 HTMLInputElement.onclick (default.aspx:76) 的 popimage (default.aspx:100) 处未定义 $。有任何想法吗？谢谢！ Jquery.ui 始终假定已安装 jquery。引导程序也是如此。所以除了jquery.ui之外还需要jquery。如果您可以在没有弹出窗口的情况下生活，那么后面的简单代码就足以显示在页面上，我们隐藏网格。但是对于弹出窗口，是的，那么 jquery.ui 是一个相当不错的选择 正如我所说，我们可以在后面使用大约 5 行 vb 代码来执行此操作，但它不会是弹出窗口，而是会并且可以只显示图像全屏（或接近全屏）使用确定按钮单击并返回网格 - 我们不需要任何客户端 js 代码。但是你的问题已经说明并且想要一个弹出窗口。我可以发布解决方案而不必使用 jquery + jquery.ui，但话又说回来，它不会是一个弹出窗口。而且我并不都相信弹出窗口比使用确定按钮全屏显示图片要好得多-但是对于弹出窗口？是的，jQuery.ui 是最好的主意。 去管理 NuGet，它确实显示安装了 jQuery 和 jQuery.UI。有一个 jQuery 的更新 - 运行它，但现在我得到一个 System.InvalidCastException: Unable to cast object of type 'System.DBNull' to type 'System.Byte []' on line - Dim IBytes() As Byte = gData.Item("图像")。啊！应该在我运行更新之前告诉你！ 小心！！！ - 注意我是如何在 RowDataBound 事件中使用我得到 DATABASE 行的！！！！！！不是 GV 行！！！ （你可以同时得到）。但是，在行数据绑定期间，您必须使用非“读取器”对象加载 GV - 例如 DataTable。如果您直接使用阅读器加载 GV，则 e.Row.DataItem 将为空。并且“dataItem”仅在数据绑定过程中有效。因此，您不能例如稍后循环 GV 并使用 DataItem（数据源）。因此，这可能是您如何加载 GV 的问题。但是，即使查看您的代码 - 您确实使用了数据表 (dt)，所以您没问题，GV 加载是否正常？以上是关于Gridview - 单击时在另一个框中弹出图像的主要内容，如果未能解决你的问题，请参考以下文章
Swift：在带有完成按钮的文本框中弹出 DatePicker