VB.net技巧之五------在DataGrid中显示图片

2022-07-15 80酷酷网 80kuku.com

　　datagrid|技巧|显示

在数据表userlist 中有一个字段 foto 用来存放图片的路径(包括图片文件名)，为了在 DataGrid 的 Cell 中显示实际的图片，我们可以定义一个模板列，然后给该列赋予字段foto 的值，就可以在 DataGrid 的 Cell 中显示图片.
首先请看如下代码:
WebForm2.aspx 文件：

<% Page Language="vb" AutoEventWireup="false" Codebehind="WebForm2.aspx.vb" Inherits="house.WebForm2"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>WebForm2</title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
   <FONT face="宋体">
    <asp:DataGrid id="DataGrid1" 101; LEFT: 224px; POSITION: absolute; TOP: 16px"
     runat="server" Width="272px" Height="350px">
     <Columns>
      <asp:TemplateColumn>
       <ItemTemplate>
        <asp:Image id="Image1" runat="server" Width="96px" ImageUrl='<% #DataBinder.Eval(Container,"DataItem.foto") %>'>
        </asp:Image>
       </ItemTemplate>
      </asp:TemplateColumn>
     </Columns>
    </asp:DataGrid></FONT>
</form>
</body>
</HTML>

WebForm2.aspx.vb 文件

Public Class WebForm2
Inherits System.Web.UI.Page

#Region " Web 窗体设计器生成的代码 "

'该调用是 Web 窗体设计器所必需的。
<System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()

End Sub
Protected WithEvents DataGrid1 As System.Web.UI.WebControls.DataGrid

    '注意: 以下占位符声明是 Web 窗体设计器所必需的。
    '不要删除或移动它。
    Private designerPlaceholderDeclaration As System.Object

    Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init
        'CODEGEN: 此方法调用是 Web 窗体设计器所必需的
        '不要使用代码编辑器修改它。
        InitializeComponent()
    End Sub

#End Region

    Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        '在此处放置初始化页的用户代码
        Dim sql As String = " select * from userlist "
        Dim dataset1 As New DataSet
        dataset1 = New DataSet("dataset1")

        Dim ConnectionString As String
        ConnectionString = "Jet OLEDB:Global Partial Bulk Ops=2;Jet OLEDB:Registry Path=;Jet OLEDB:Database L" & _
        "ocking Mode=1;Data Source=""labrecord.mdb"";Jet OLEDB:Engine Type=5;Provider=""Mic" & _
        "rosoft.Jet.OLEDB.4.0"";Jet OLEDB:System database=;Jet OLEDB:SFP=False;persist sec" & _
        "urity info=False;Extended Properties=;Mode=Share Deny None;Jet OLEDB:Encrypt Dat" & _
        "abase=False;Jet OLEDB:Create System Database=False;Jet OLEDB:Don't Copy Locale o" & _
        "n Compact=False;Jet OLEDB:Compact Without Replica Repair=False;User ID=Admin;Jet" & _
        " OLEDB:Global Bulk Transactions=1"

        Dim oledbconnection1 As New OleDb.OleDbConnection(ConnectionString)
        Dim oledbDataAdapter1 As New OleDb.OleDbDataAdapter(sql, oledbconnection1)
        oledbDataAdapter1.Fill(dataset1, "userlist")
        oledbDataAdapter1 = Nothing

        DataGrid1.DataSource = dataset1
        DataGrid1.DataBind()
        oledbconnection1.Close()
        oledbconnection1 = Nothing

End Sub

End Class

综述与总结:

以前不知道如何在datagrid中如何显示图片的时候,在网上搜查相关技术资料的时候,很多.但是
往往写得很多,很杂乱.甚至把人引入误区.
下面我用简要的话来说明这个主题的关键: 首先要在一个页面(如本例中的WebForm2.aspx )中添加一个datagrid1然后给datagrid1添加一个模板列.然后再往这个模板列中加入一个image控件. 最关键的地方来了,那就是

<asp:TemplateColumn>
       <ItemTemplate>
        <asp:Image id="Image1" runat="server" Width="96px" ImageUrl='<% #DataBinder.Eval(Container,"DataItem.foto") %>'>
        </asp:Image>
       </ItemTemplate>
      </asp:TemplateColumn>
      中蓝色的部分.即将图片的路径与 userlist 中的 foto字段绑定. 至于 WebForm2.aspx.vb 文件的作用是将
数据库中的表userlist 的数据与datagrid1绑定.