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

2024-07-10 13:07:15

字体：大中小

来源：转载

供稿：网友

本文来源于网页设计爱好者web开发社区http://www.html.org.cn收集整理，欢迎访问。

在数据表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"
     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绑定.