上一篇文章说了如何把图片保存到数据库中,所以做了个例子,将图片显示在DATAGRID。前面说过了用Response.BinaryWrite()只可以显示一张图片,现在用一个DATAGRID控件,将图片显示在DATAGRID中的IMAGE控件里。(提示:下面的例子没有做分页功能)
里面用了两个图片控件,一个是服务器端的ImageButton,另一个是客户端的Image控件。
前台代码:
<%@ Page language="c#" Codebehind="DataGridImage.aspx.cs" AutoEventWireup="false" Inherits="NetTest.DataGridImage" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>DataGridImage</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<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">
<table align="center" border="1" width="60%">
<TBODY>
<tr>
<td align="center"><font style="FONT-WEIGHT: bold; FONT-SIZE: 11pt">DataGrid中显示数据库中的图片</font></td>
</tr>
<tr>
<td>
<asp:DataGrid id="DataGrid1" runat="server" AutoGenerateColumns="False" width="100%">
<Columns>
<asp:TemplateColumn>
<ItemTemplate>
<FONT face="宋体">
<TABLE id="Table1" cellSpacing="1" cellPadding="1" width="100%" border="0">
<TR>
<TD colspan="2"><FONT style="FONT-SIZE: 10pt">图片名称:</FONT> <FONT style="FONT-SIZE: 10pt">
<asp:Label id="lbImageName" runat="server" Text='<%# DataBinder.Eval(Container,"DataItem.ImageName")%>'>
</asp:Label></FONT></TD>
</TR>
<TR>
<TD><FONT style="FONT-SIZE: 10pt">图片:</FONT>
<asp:Image id=Imagebutton1 Width=100 Height=100 runat="server" ImageUrl='<%# "ReadImage.aspx?ImageID="+DataBinder.Eval(Container,"DataItem.ID")%>'>
</asp:Image>
</TD>
<td>
<IMG width=100 height=100 alt="" src='<%# "ReadImage.aspx?ImageID="+DataBinder.Eval(Container,"DataItem.ID")%>'">
</td>
</TR>
</TABLE>
</FONT>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid></td>
</tr>
</TBODY>
</table>
</form>
</body>
</HTML>
后台代码: using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
namespace NetTest
{
/// <summary>
/// DataGridImage 的摘要说明。
/// </summary>
public class DataGridImage : System.Web.UI.Page
{
protected System.Web.UI.WebControls.DataGrid DataGrid1;
private string str="server=localhost;uid=sa;pwd=;database=northwind";
private void Page_Load(object sender, System.EventArgs e)
{
if(!IsPostBack)
{
FillData();
}
}
#region Web 窗体设计器生成的代码
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
//
InitializeComponent();
base.OnInit(e);
}
/// <summary>
/// 设计器支持所需的方法 - 不要使用代码编辑器修改
/// 此方法的内容。
/// </summary>
private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
private void FillData()//绑定DATAGRID
{
SqlConnection cn=new SqlConnection(str);
SqlCommand cmd=new SqlCommand();
cmd.CommandText="SELECT * from UpImage";
cmd.Connection=cn;
cn.Open();
SqlDataAdapter da=new SqlDataAdapter();
da.SelectCommand=cmd;
DataSet ds=new DataSet();
da.Fill(ds,"Images");
DataGrid1.DataSource=ds.Tables["Images"];
DataGrid1.DataBind();
cn.Close();
}
}
}
ReadImage.aspx(根据传过来的图片的编号,取得图片。只要建一个页面就可以了,不用放置任何控件)
后台代码: using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
namespace NetTest
{
/// <summary>
/// ReadImage 的摘要说明。
/// </summary>
public class ReadImage : System.Web.UI.Page
{
private void Page_Load(object sender, System.EventArgs e)
{
string conn="server=localhost;uid=sa;pwd=;database=northwind";
SqlConnection cn=new SqlConnection(conn);
SqlCommand cmd=new SqlCommand();
cmd.CommandText="select Image from UpImage where ID='"+this.Request["ImageID"]+"'";
cmd.Connection=cn;
cn.Open();
this.Response.ContentType="image/*";
SqlDataReader dr=cmd.ExecuteReader();
while(dr.Read())
{
this.Response.BinaryWrite((byte[])dr["Image"]);
}
cn.Close();
}
#region Web 窗体设计器生成的代码
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
//
InitializeComponent();
base.OnInit(e);
}
/// <summary>
/// 设计器支持所需的方法 - 不要使用代码编辑器修改
/// 此方法的内容。
/// </summary>
private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
}
}