在 ASP.NET GridView 控件中显示图像库
3.56/5 (11投票s)
在这里，我们可以使用 GridView 控件以画廊视图显示图像，并带有内部分页。
引言
在本文中，我将尝试向您解释如何使用 ASP.NET 的 GridView 控件以画廊视图显示图像。
当我尝试使用 DataList 控件时，遇到了分页问题。在 DataList 中，我们可以定义重复列方向来以画廊视图显示图像。但主要问题是分页，您需要使用第三方控件才能在 DataList 中应用分页，而且很难使用第三方控件进行管理。
但在这里，我使用了 GridView 控件来显示图像库。并使用了内部分页。因此，我们可以在 GridView 控件上非常简单地完成所有操作。
让我们开始吧。
1. ASPX 页面的代码如下
<asp:GridView ID="gvListProperty" runat="server" AutoGenerateColumns="false" Width="100%"
border="0" AllowPaging="true" BorderColor="white" cssClass="griditem" PageSize="10" >
<PagerSettings Mode="Numeric" Position="TopAndBottom"/>
<PagerStyle CssClass="mypager" HorizontalAlign="right" />
<Columns>
<asp:TemplateField>
<HeaderStyle CssClass="dispnone" />
<ItemTemplate>
<table width="100%">
<tr>
<td class="bdr-grey">
<table width="100%" border="0" cellspacing="0" cellpadding="0" Class="griditem" >
<tr>
<td width="60px" height="60px" Class="griditem" >
<%#Container.DataItem("Column1")%>
</td>
<td width="60px" height="60px" Class="griditem" >
<%#Container.DataItem("Column2")%>
</td>
<td width="60px" height="60px" Class="griditem" >
<%#Container.DataItem("Column3")%>
</td>
<td width="60px" height="60px" Class="griditem" >
<%#Container.DataItem("Column4")%>
</td>
</tr>
</table>
</td>
</tr>
</table>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
在这里，我们使用了名为“gvListProperty”的 Gridview 控件。在这个 GridView 控件中，我使用了一个模板列。因此，我们可以在其中应用一些我们想要显示的格式。
您也可以为此模板列中的表格应用一些 CSS。在这里，我们将 AllowPaging 设置为 True。因为我们需要在此画廊视图中使用分页。此 GridView 每页显示 40 条记录。在这里，我设置了 pageSize=10，因此它的固定页面大小仅显示 40*10=400 条记录。您可以根据需要进行更改。
分页模式为数字，页码将显示在 GridView 的顶部和底部。
第一列是 4 个静态列，用粗体注明。
现在看 <%#Container.DataItem("Column1")%>, <%#Container.DataItem("Column2")%>, <%#Container.DataItem("Column3")%>, <%#Container.DataItem("Column4")%>。
我定义的这些列与数据库表列无关。数据将从代码隐藏中填充到此列。因为我遇到了以重复列方式显示图像的问题。这仅在 DataList 中才可能以重复列方向显示记录。但在这里 GridView 控件中是不可能的。并且与 DataList 控件一样，内部分页也是不可能的。
2. 代码后置操作。
声明对象变量
在这里，您可以通过将代码写入区域部分来简化代码。首先在代码后置文件中声明对象变量（在 page load 之前）。
#Region " Data Members "
Dim objPropertyForSale As New Propertyforsale
#End Region
变量 objPropertyForSale 是 Propertyforsale.vb 类文件的对象。在 propertyforsale.vb 中，您可以编写方法来从数据库表中获取数据。
调用检索数据库记录的函数
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)_
Handles Me.Load
If Not IsPostBack Then
'To set page nuber after redirecting back from detail page
If Request.QueryString("iPn") <> Nothing Or IsNumeric(Request.QueryString("iPn")) Then
gvListProperty.PageIndex = CInt(Request.QueryString("iPn"))
End If
'Call function that retrieve records from database
Call BindPropertyGallery()
End If
End Sub
在 page load 事件中，我正在调用一个函数，该函数将从表中检索记录。
这里是此函数的代码。
Public Sub BindPropertyGallery()
Dim dsProperty As DataSet
With objPropertyForSale
dsProperty = .Galleryview_PropertyList()
If dsProperty.Tables(0).Rows.Count > 0 Then
'Integrate this record with DataTable and then bind it with GridView
Call DataTableBind(dsProperty)
End If
End With
End Sub
Galleryview_PropertyList 函数写在 propertyforSale.vb 类文件中。此函数将检索记录并返回 DataSet。
DataTableBind 函数会将这些记录与 gridview 列绑定。
查看 propertyforSale.vb 类文件中编写的以下代码。
Imports Microsoft.VisualBasic
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Imports commonlib
Public Class Propertyforsale
Dim DM As New commonlib.DBManager(ConfigurationManager.ConnectionStrings(
"ConnectionString").ConnectionString)
Dim sSql As String
Dim retVal As New DataSet
#Region "Method"
Public Function Gallaryview_PropertyList() As DataSet
sSql = "Gallaryview_PropertyList"
retVal = DM.ExecuteDataSet(CommandType.StoredProcedure, sSql)
Return retVal
End Function
#End Region
End Class
这是类文件中编写的示例代码。我已经创建了我自己的 DBManager 文件，用于执行所有 DB 操作。您可以在代码后置文件中使用 DataAdepter 或 DataReader 来执行相同操作。
Classfile 函数 Gallaryview_PropertyList() 返回值为 DataSet。sSql 代表用于检索记录的过程名称。retVal dataset 将记录返回到调用此函数的代码后置文件。
现在回到代码后置文件操作。
将此记录与 DataTable 集成，然后将其绑定到 GridView
请仔细阅读此代码，因为所有显示和分页逻辑都依赖于此代码。我第一次编写代码时遇到了很多问题。编写这段简单的代码花了太多时间。
这段代码虽然长但非常简单。
在这里，我使用 DataTable 将每个图像逐一插入其 4 列中。在 4 列都有数据后，它将生成新行，带有 4 列，并以相同的方式循环直到数据集的最后一条记录。
Public Sub DataTableBind(ByVal dsProperty As DataSet)
'-- Paging Variables --'
'Due to Paging Counter == 40 Records per page
Dim iCountIncre As Integer = 40 ' Records per page
Dim iPn As Integer = 0 'Current Page Number
'-- End Paging Variables --'
Dim iCount As Integer
Dim iColumn As Integer = 1
Dim dtTable As New DataTable
Dim dtCol As DataColumn
Dim dtRow As DataRow
dtCol = New DataColumn("Column1")
dtTable.Columns.Add(dtCol)
dtCol = New DataColumn("Column2")
dtTable.Columns.Add(dtCol)
dtCol = New DataColumn("Column3")
dtTable.Columns.Add(dtCol)
dtCol = New DataColumn("Column4")
dtTable.Columns.Add(dtCol)
dtRow = dtTable.NewRow
For iCount = 0 To dsProperty.Tables(0).Rows.Count - 1
'Due to Paging Counter == 40 Records per page, On Every 40 records Page number will get increment.
If (iCount + 1) > iCountIncre Then
iCountIncre = iCountIncre + 40
iPn = iPn + 1
End If
dtRow("Column" & iColumn) = "<a href='fulladdforrent.aspx?iPn=" & iPn.ToString & _
"&QCD=GLV&QID=" & dsProperty.Tables(0).Rows(iCount).Item("iPropertyID") & _
"' class='txt-grey'> <img src='../Images/Property/thumb/" & _
dsProperty.Tables(0).Rows(iCount).Item("sImageName") & _
"' border='0' alt='Vis'/>"
'This will maintain 4 columns per row.
iColumn = iColumn + 1
'This will maintain 4 columns per row. When column get number 5, at that time it
'turns for new row
If iColumn = 5 Then
dtTable.Rows.Add(dtRow)
dtRow = dtTable.NewRow
iColumn = 1
End If
If iCount = dsProperty.Tables(0).Rows.Count - 1 And iColumn <= 5 Then
dtTable.Rows.Add(dtRow)
dtRow = dtTable.NewRow
End If
Next
'Add table to the dataset
Dim ds As New DataSet
ds.Tables.Add(dtTable)
'Now GridView get ds(dataset) as DataSource
gvListProperty.DataSource = ds
gvListProperty.DataBind()
End Sub
在函数 DataTableBind 中，我传递了一个包含记录的数据集。在这里，我使用了类型为 DataTable 的变量 dtTable。如前所述。dtTable 具有 4 列 DataColumn("Column1") 到 DataColumn("Column4")。如果您不明白我为什么这么做，请再次查看前面解释的 GridView 控件的列描述。
For
变量 iCountIncre 将在每 40 条记录时增加 40，以便我们能够管理页码的一致性。这是因为我们必须将浏览图像库页面的当前页码传递到其详细信息页面。并且在从详细信息页面返回到画廊视图时，我们必须维护此页码。
变量 iColumn 用于从第 1 列到第 4 列维护列的一致性。因为在这里我们必须在每行显示 4 张图像。
dtRow("Column" & iColumn) = "<a href='fulladdforrent.aspx?iPn=" & iPn.ToString & "&QID=" &_
dsProperty.Tables(0).Rows(iCount).Item("iPropertyID") &_
"' class='txt-grey'> <img src='../Images/Property/thumb/" &_
dsProperty.Tables(0).Rows(iCount).Item("sImageName") &_
"' border='0' alt='View'/>"
在此逻辑中，dtRow(“Column” & iColumn) 将类似于 dtRow(“Column1”) 直到 dtRow(“Column4”)。
因此，此 dtRow 具有列，该列的值将显示图像库中的图像，因为它从数据库表 dsProperty.Tables(0).Rows(iCount).Item("sImageName") 中的路径和图像名称调用该图像。
并且该图像上的链接代表链接页面名称，其中包含 iPn（页码）、iPropertyID（因为图像与该属性相关。它代表属性的唯一 ID）。
ds.Tables.Add(dtTable)
之后，将此表与数据集“ds”绑定。然后将此数据集“ds”绑定到 GridView。
以下代码用于管理 GridView 控件的分页。
Protected Sub gvListProperty_PageIndexChanging(ByVal sender As Object, _
ByVal e As System.Web.UI.WebControls.GridViewPageEventArgs) & _
Handles gvListProperty.PageIndexChanging
gvListProperty.PageIndex = e.NewPageIndex
Call BindPropertyGallary()
End Sub
当用户单击任何页码时，它将调用此事件，并且此事件内部的代码将更改当前页索引并将新页码分配给 GridView，然后再次使用记录绑定此 GridView。绑定 GridView 后，您看到的页面就是新分配的页码。
还有一件事我想与您分享，那就是我也收到了在 GridView 的 RowDataBound 事件中绑定此 GridView 的建议。要在 RowDataBound 中绑定此 GridView，我们必须将 Record Dataset 放入公共变量或 ViewState 中，然后需要进行一些额外的操作，然后才像我在函数 DataTableBind() 中写的那样。因此，公共变量或 ViewState 中的数据集将比现有代码占用更多的内存。这就是为什么我放弃了那个概念。