一、建立数据表
--==================================
--==================================
--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类型数据并显示在页面上,已经完成了, 其实,遇到问题,多上网查查,写程序,初级阶段就是比葫芦画瓢,这个方法,我也是从网上找到了。相信问题都可以解决的!
本文介绍了如何在ASP.NET应用程序中将SQL Server 2000数据库中Image类型的图片数据显示在网页上。通过建立数据表,创建分类页面,利用BulletedList控件和后台编程实现图片的展示。虽然图片加载可能较慢,但通过设置ContentType为"images/*"确保了图片的正确显示。
2289

被折叠的 条评论
为什么被折叠?



