一、建立数据表
-- ================================== --================================== --TABLE NAME: E_PHOTO --AUTHOR:XIAOPENG CHENG --CREATE DATE: 2006-11-1 --DESCRIPTION:SAVE PHTO INFORMATION --================================== --================================== if exists ( select * from sysobjects where id = object_id ( ' dbo.E_PHOTO ' )) drop table dbo.E_PHOTO GO create table E_PHOTO ( USER_NAME NVARCHAR ( 40 ) NOT NULL , -- USER NAME PHOTO_TYPE_ID int NOT NULL , -- PHOTO TYPE PHOTO_ID NVARCHAR ( 30 ) NOT NULL , -- PHOTO NAME PHOTO IMAGE NOT NULL , -- PHOTO INFORMATION PHOTO_DESC NVARCHAR ( 3000 ), -- PHOTO DESCRIPTION INFORMATION UPLOAD_DATE SMALLDATETIME , -- UPLOAD DATE CONSTRAINT PHOTO PRIMARY KEY ( USER_NAME ,PHOTO_ID,PHOTO_TYPE_ID) -- PRIMARY KEY ) GO -- ================================== --================================== --TABLE NAME: E_PHOTO_TYPE --AUTHOR:XIAOPENG CHENG --CREATE DATE: 2006-11-3 --DESCRIPTION:SAVE PHTO TYPE INFORMATION --================================== --================================== if exists ( select * from sysobjects where id = object_id ( ' dbo.E_PHOTO_TYPE ' )) drop table dbo.E_PHOTO_TYPE GO create table E_PHOTO_TYPE ( USER_NAME NVARCHAR ( 40 ) NOT NULL , -- USER NAME PHOTO_TYPE_CODE int identity ( 1 , 1 ) NOT NULL , -- PHOTO TYPE CODE PHOTO_TYPE_NAME NVARCHAR ( 30 ) NOT NULL , -- PHOTO TYPE NAME IF_USING INT DEFAULT 0 , -- IF USING //USING:0;NOT USING 1; CONSTRAINT PHOTO_TYPE PRIMARY KEY ( USER_NAME ,PHOTO_TYPE_CODE) -- PRIMARY KEY ) GO
二、建立页面,对图片类型进行分类 由于本人,在上传图片时,对图片进行了分类,因此当用户进行图片浏览的时候,对图片进行了分类,当用户单击“ALL Photo”时,将在另外的一个页面进行显示,以下是进行图片类型分类的HTML页面代码:
<% ... @ Page Language = " C# " MasterPageFile = " ~/MasterPage2.master " AutoEventWireup = " true " CodeFile= " ListPhotoType.aspx.cs " Inherits = " ListPhotoType " Title = " List Photo Type " %> < asp:Content ID ="Content1" ContentPlaceHolderID ="ContentPlaceHolder1" runat ="Server" > < strong > List The Photo Type: < br /> </ strong > < br /> < asp:BulletedList ID ="BulletedList1" runat ="server" BulletStyle ="Numbered" DisplayMode ="LinkButton" OnClick="BulletedList1_Click" > </ asp:BulletedList > </ asp:Content >
从上面的代码,我们可以看出,我们用了模板页,在页面中,我们只用了一个BulletedList控件,显示的模式是用的连接an钮,列表的模式是用在左边有一些标题,在页面上有个对每一项都有一个单击事件发生。以下是此页面对应的后台编程页面:
using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; public partial class ListPhotoType : System.Web.UI.Page ... { PhotoManage manage; protected void Page_Load( object sender, EventArgs e) ... { if ( ! (Convert.ToBoolean(Session[ " isLogin " ]))) ... { Response.Redirect( " Login.aspx " ); } if ( ! Page.IsPostBack) ... { manage = new PhotoManage(Session[ " name " ].ToString()); this .BulletedList1.DataSource = manage.GetUserPhotoType(Session[ " name " ].ToString()); this .BulletedList1.DataTextField = " Photo_Type_Name " ; this .BulletedList1.DataValueField = " Photo_Type_Code " ; this .BulletedList1.DataBind(); this .BulletedList1.Items.Insert( 0 , new ListItem( " ALL Photo " , " A " )); } } protected void BulletedList1_Click( object sender, BulletedListEventArgs e) ... { string strURL = string .Format( " ListPhoto.aspx?code={0} " , Server.UrlEncode( this .BulletedList1.Items[e.Index].Value)); // this.BulletedList1.Attributes.Add("onclick", string.Format("window.open('{0}','newwinow');",strURL)); Response.Redirect(strURL); } }
从此后台页面编程,我们可以看出,首先设置数据源,进行了数据绑定,可以让数据从数据库中读取, 显示在页面,为了将全部数据显示出来,我们在BulletedLista控件的第一个位置添加了"ALL Photo",其中的值是“A”,在控件的单击事件中,我们将值取出,之后传递到ListPhoto.aspx页面进行处理。以下是ListPhoto.aspx页面的HTML代码:
<% ... @ Page Language = " C# " MasterPageFile = " ~/MasterPage2.master " AutoEventWireup = " true " CodeFile= " ListPhoto.aspx.cs " Inherits = " ListPhoto " Title = " List Photo " %> < asp:Content ID ="Content1" ContentPlaceHolderID ="ContentPlaceHolder1" runat ="Server" > < asp:DataList ID ="dlPhoto" runat ="server" RepeatColumns ="4" RepeatDirection ="Horizontal" CellPadding="0" Width ="790px" OnItemCommand ="dlPhoto_ItemCommand" OnItemDataBound ="dlPhoto_ItemDataBound" > < ItemTemplate > < asp:ImageButton Width ="185" ID ="ibtnPhoto" ImageUrl ='<%# FormatURL(DataBinder.Eval(Container,"DataItem.user_name"),DataBinder.Eval(Container, "DataItem.photo_type_id"),DataBinder.Eval(Container, "DataItem.photo_id")) % > ' runat="server" AlternateText="click list Details information!" CommandName="Detail" CommandArgument="Detail" /> < br /> < asp:Label ID ="lblPhotoType" runat ="server" Text ='<%# DataBinder.Eval(Container, "DataItem.photo_type_id")% > ' Visible="false"> </ asp:Label >< br /> < asp:Label ID ="lblPhotoName" runat ="server" Text ='<%# DataBinder.Eval(Container, "DataItem.photo_id")% > ' Visible="false"> </ asp:Label > </ ItemTemplate > </ asp:DataList > </ asp:Content >
在此页面,我们可以看出,在此页面,我们只用了一个DataList控件,其中里面用了一个ImageButton用来显示图片,两个标签,一个是此种图片的类型,一个是图片的名称,我们可以从HMTL中我们可以看出,ImageButton控件的ImageUrl属性是通过调用一个函数实现的,里面传递了三个参数,都是通过绑定表达式,输入的。下面是两个标签,用来保存信息。下面的代码是,此页面对应的后台编程页面:
using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; public partial class ListPhoto : System.Web.UI.Page ... { protected void Page_Load( object sender, EventArgs e) ... { if ( ! Page.IsPostBack) ... { if ( ! (Convert.ToBoolean(Session[ " isLogin " ]))) ... { Response.Redirect( " Login.aspx " ); } else ... { System.Data.SqlClient.SqlConnection conn = new System.Data.SqlClient.SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings[ " DogsManagerConnectionString " ].ToString()); string code,strSQL; code = Request.QueryString[ " code " ].ToString(); if (code == " A " ) ... { strSQL = string .Format( " select user_name,photo_type_id,photo_id,photo from E_Photo where user_name='{0}' " , Session[ " name " ].ToString()); } else ... { strSQL = string .Format( " select user_name,photo_type_id,photo_id,photo from E_Photo where user_name='{0}' AND photo_type_id={1} " , Session[ " name " ].ToString(),code); } System.Data.SqlClient.SqlCommand cmd = new System.Data.SqlClient.SqlCommand(strSQL, conn); try ... { conn.Open(); this .dlPhoto.DataSource = cmd.ExecuteReader(CommandBehavior.CloseConnection); this .dlPhoto.DataBind(); } catch (System.Data.SqlClient.SqlException sql) ... { Response.Write( " wrong information:<br> " + sql.Message); } finally ... { cmd.Dispose(); conn.Close(); } } } } protected string FormatURL( object userName, object typeID, object photoID) ... { return string .Format( " ReadImage.aspx?userName={0}&typeID={1}&photoID={2} " , userName.ToString(), typeID.ToString(), photoID.ToString()); } protected void dlPhoto_ItemCommand( object source, DataListCommandEventArgs e) ... { if (e.CommandArgument.ToString() == " Detail " ) ... { string userName = Session[ " name " ].ToString(); string typeId = ((Label)e.Item.FindControl( " lblPhotoType " )).Text; string photoId = ((Label)e.Item.FindControl( " lblPhotoName " )).Text; ImageButton ibtnDetail = (ImageButton)e.Item.FindControl( " ibtnPhoto " ); string Format = string .Format( " ListPhotoDetail.aspx?userName={0}&typeID={1}&photoID={2} " , userName, typeId, photoId); ibtnDetail.Click += new ImageClickEventHandler(ibtnDetail_Click); } } void ibtnDetail_Click( object sender, ImageClickEventArgs e) ... { Response.Redirect( " http://www.baidu.com " ); } protected void dlPhoto_ItemDataBound( object sender, DataListItemEventArgs e) ... { // string userName = Session["name"].ToString(); // string typeId = ((Label)e.Item.FindControl("lblPhotoType")).Text; // string photoId = ((Label)e.Item.FindControl("lblPhotoName")).Text; // ImageButton ibtnDetail = (ImageButton)e.Item.FindControl("ibtnPhoto"); // string Format = string.Format("ListPhotoDetail.aspx?userName={0}&typeID={1}&photoID={2}", // userName, typeId, photoId); // ibtnDetail.Attributes.Add("onclick", "Response.Write(" + Format + ")"); } }
此,后台代码也是比较的多的,在这些代码中,我们可以看到一个FormatURL函数,这和我们在HTML代码中看到的一致,用来将每绑定一个,定位到一个页面,将数据图片信息从数据库中读取出来。这个页面是ReadImage.aspx页面,这个过会再说。在这个后台编程页面中,我们在PageLoad中我们可以看到了我们把传递过来的参数code进行了判断,主要是使判断,是将某个类型的显示出来,还是将所有的显示出来,如果是"A",则是此用户的相关的所有图片信息显示出来,如果是其他,将此类的从数据库中读取,显示出来。读者可以看到,本人之所以用ImageButtonk控件,主要还是想实现另外一个功能,单击图片将此图片的详细信息显示出来,可以我还没有调出来,调出来后,再写吧。在此页面,主要工作是,当绑定一个时,调用FormatURL函数,跳转到ReadImage.aspx页面对图片读取,之后,一次类推。以下是:ReadImage.aspx页面的后台编程代码,此页面仅此作个处理,没有HTML代码了:
using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; public partial class ReadImage : System.Web.UI.Page ... { protected void Page_Load( object sender, EventArgs e) ... { if ( ! Page.IsPostBack) ... { string username = Request.QueryString[ " userName " ].ToString(); string typeid = Request.QueryString[ " typeID " ].ToString(); string photoid = Request.QueryString[ " photoID " ].ToString(); System.Data.SqlClient.SqlConnection conn = new System.Data.SqlClient.SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings[ " DogsManagerConnectionString " ].ToString()); string strSQL = string .Format( " select photo from E_Photo where user_name='{0}' and photo_type_id= " + " {1} and photo_id='{2}' " , username, typeid, photoid); System.Data.SqlClient.SqlCommand cmd = new System.Data.SqlClient.SqlCommand(strSQL, conn); try ... { conn.Open(); System.Data.SqlClient.SqlDataReader reader = cmd.ExecuteReader(CommandBehavior.CloseConnection); if (reader.Read()) ... { Response.Clear(); Response.ContentType = " images/* " ; Response.BinaryWrite(( byte [])reader[ " photo " ]); } conn.Close(); } catch (System.Data.SqlClient.SqlException sql) ... { throw sql; } Response.End(); } } }
此页面,接受传递过来的三个参数,是为了准确定位一条记录,我们从数据表中,我们也就看到,这个表示三个联合主键,之后,进行读取,并且设置ContentType为“images/*”类型,之后输出。至此,我们的图片也就可以从数据库中读取出来了,并显示在页面上,但图片毕竟是从数据库中读取出来的,因此,有时我们会感觉,我们的图片显示的有点慢,但毕竟是一个一个从数据库中读取出来的,肯定是慢了点。以下几个页面时我测试用的读取的图片信息:
至此,我的从SQL Server 2000数据库中读取Image类型数据并显示在页面上,已经完成了, 其实,遇到问题,多上网查查,写程序,初级阶段就是比葫芦画瓢,这个方法,我也是从网上找到了。相信问题都可以解决的!