图片管理系统课件

图片管理系统需求分析1.创建专辑/修改专辑封皮图片及简介/删除专辑/按名称查询专辑;2.为专辑添加图片/浏览专辑图片/删除选中图片/修改图片简介及所属专辑名;3.分页查询用力图创建专辑修改专辑删除专辑查询专辑添加图片浏览图片删除图片修改图片数据表设计表名album（专辑表）列名描述数据类型（精度范围）空/非空约束条件albumID专辑编号int非空PK（自增）albumName专辑名称varchar(50)非空albumTime创建时间datetime非空logoUrl图片地址varchar(100)非空albumDesc专辑简介Varchar(100)非空表名image（图片表）列名描述数据类型（精度范围）空/非空约束条件imageID图片编号int非空PK（自增）imageName图片名称varchar(50)非空imageUrl图片地址varchar(50)非空imageTime添加时间datetime非空imageDesc图片简介varchar(100)非空albumID所属专辑编号int非空数据表设计模块类别功能创建专辑创建专辑名称，添加封面图片、添加专辑简介修改专辑修改专辑封面图片和简介信息删除专辑删除专辑信息包括专辑中图片信息查询专辑按专辑名称查询或分页查询,浏览专辑编号、专辑名称、专辑封面图片、专辑简介等信息添加图片上传图片及图片简介查询图片显示图片的名称、地址、上传时间、简介、所属专辑名以及图片本身修改图片修改图片的简介信息及所属的专辑删除图片删除图片相关信息系统模块划分利用SqlDataSource生成数据库连接字符串将SqlDataSource生成的数据库连接字符串复制到web.config中，然后就可以删除该SqlDataSource，如下所示：<connectionStrings><addname="ConnectionString"connectionString="DataSource=GUOJIA;InitialCatalog=PHOTO;IntegratedSecurity=True"/></connectionStrings>为了代码重用，为了体现分层思想，我们将数据库连接代码写在SqlHelper.cs公共类中，将数据库操作代码写在DB.cs公共类中。SqlHelper.cs中：1、右击站点—添加引用—.NET—System.Configuration2、代码中添加usingSystem.Data;usingSystem.Data.SqlClient;DB.cs代码（首先引用usingSystem.Data.SqlClient;）publicclassDB{ publicDB() { // //TODO:在此处添加构造函数逻辑

// }

//在首页上显示所有专辑信息

publicDataTableGetAll(){SqlHelperhelper=newSqlHelper();stringstrsql="select*fromalbum";SqlCommandcmd=newSqlCommand();cmd=helper.GetCommand(strsql,null);DataTabledt=newDataTable();using(SqlDataReaderrdr=cmd.ExecuteReader()){dt.Load(rdr);}returndt;}//在首页上按名称查询专辑信息

publicDataTableGetByID(intid){SqlHelperhelper=newSqlHelper();stringstrsql="select*fromalbumwherealbumID=@albumID";SqlParameter[]parm=newSqlParameter[]{newSqlParameter("@albumID",id)};SqlCommandcmd=newSqlCommand();cmd=helper.GetCommand(strsql,parm);DataTabledt=newDataTable();using(SqlDataReaderrdr=cmd.ExecuteReader()){dt.Load(rdr);}returndt;}//为首页的专辑名称下拉菜单绑定名称

publicDataTableGetAlbumName(){SqlHelperhelper=newSqlHelper();stringstrsql="selectalbumID,albumNamefromalbum";SqlCommandcmd=newSqlCommand();cmd=helper.GetCommand(strsql,null);DataTabledt=newDataTable();using(SqlDataReaderrdr=cmd.ExecuteReader()){dt.Load(rdr);}returndt;}}利用GridView显示专辑信息，用上述方法新建数据源—对象，与上述方法中不同的是，选择的DB方法不同。注意：GridView的属性设置：AllowPaging=True,AutoGenerateColumns=False,DataKeyNames=albumID,PageSize=2.给GridView编辑列，如下所示：BoundField:专辑编号、专辑名称、专辑创建时间TemplateField:专辑封面HyperLinkField:为专辑添加图片、浏览专辑图片、修改专辑CommandField:删除注意检查GridView的属性设置：AllowPaging=“True”AutoGenerateColumns=“False”DataKeyNames=“albumID”PageSize=“2”增加查询按钮Button新建ObjectDataSource,配置数据源，选择DB中的GetByID双击查询按钮buttton1，进入Default.aspx.cs代码中编辑：

protectedvoidButton1_Click(objectsender,EventArgse){GridView1.DataSourceID=ObjectDataSource3.ID;GridView1.DataBind();}对于”创建专辑”按钮按下后,应该打开新的窗体AddAlbum.aspx,实现专辑名称,专辑封面图片和专辑简介信息的添加.如下图:在DB.cs中继续添加功能块,实现添加专辑信息的功能publicvoidAddAlbum(stringalbumName,DateTimealbumTime,stringlogoUrl,stringalbumDesc){SqlHelperhelper=newSqlHelper();stringstrsql="insertintoalbum(albumName,albumTime,logoUrl,albumDesc)values(@name,@time,@logourl,@desc)";SqlParameter[]parm=newSqlParameter[]

{newSqlParameter("@name",albumName),newSqlParameter("@time",albumTime),newSqlParameter("@logourl",logoUrl),newSqlParameter("@desc",albumDesc)

};SqlCommandcmd=helper.GetCommand(strsql,parm);cmd.ExecuteNonQuery();}双击”提交”按钮,将专辑信息添加到album数据表中.

protectedvoidButton1_Click(objectsender,EventArgse){DBdb=newDB();stringalbumName=TextBox1.Text;DateTimealbumTime=DateTime.Now;stringlogourl="image/"+;stringexname=('.')[1];stringalbumDesc=TextBox2.Text;if(exname.ToLower()=="jpg"||exname.ToLower()=="gif"||exname.ToLower()=="png"){(Server.MapPath(logourl));}db.AddAlbum(albumName,albumTime,logourl,albumDesc);Response.Write("<script>alert('创建专辑成功');location.href='default.aspx';</script>");}为专辑添加图片功能的实现:右击站点添加新页面addimage.aspx,给image数据表添加信息再次给GridView编辑列，如下所示：查看HyperLinkField列:为专辑添加图片DataNavigateUrlFields:albumID绑定到超链接的NavigateUrl属性字段;DataNavigateUrlFormatString:addimage.aspx?id={0}对绑定到超链接的NavigateUrl属性的值应用的格式设置.给image数据表添加信息:表名image（图片表）列名描述数据类型（精度范围）空/非空约束条件imageID图片编号int非空PK（自增）imageName图片名称varchar(50)非空imageUrl图片地址varchar(50)非空imageTime添加时间datetime非空imageDesc图片简介varchar(100)非空albumID所属专辑编号int非空//打开DB.cs,添加方法,实现给专辑添加照片功能:publicvoidaddimage(intalbumID,stringimageName,stringimageUrl,DateTimeimageTime,stringimageDesc){SqlHelperhelper=newSqlHelper();stringaddimage="insertintoimage

(albumID,imageName,imageUrl,imageTime,imageDesc)

Values(@albumID,@imageName,@imageUrl,@imageTime,@imageDesc)";SqlParameter[]parm=newSqlParameter[]

{newSqlParameter("@albumID",albumID),newSqlParameter("@imageName",imageName),newSqlParameter("@imageUrl",imageUrl),newSqlParameter("@imageTime",imageTime),newSqlParameter("@imageDesc",imageDesc)};SqlCommandcmd=helper.GetCommand(addimage,parm);cmd.ExecuteNonQuery();}//点击addimage.aspx的“提交按钮”时:protectedvoidButton1_Click(objectsender,EventArgse){DBdb=newDB();intalbumID=Convert.ToInt32(DropDownList1.SelectedValue);DateTimeimageTime=DateTime.Now;stringimageUrl="image/"+;stringimageType=('.')[1];stringimageName=('.')[0];stringimageDesc=TextBox1.Text.ToString();if(imageType.ToLower()=="jpg"||imageType.ToLower()=="gif"||imageType.ToLower()=="png"){(Server.MapPath(imageUrl));}db.addimage(albumID,imageName,imageUrl,imageTime,imageDesc);Response.Write("<script>alert('添加成功！');location.href='default.aspx';</script>");}浏览专辑图片功能的实现:右击站点添加新页面ViewImage.aspx首先对default.aspx的GridView进行编辑列操作，使得“浏览专辑图片按钮”具有超链接功能,可链到ViewImage.aspx如下所示://在DB.cs中编写方法,实现浏览某个专辑中的所有照片首先引用命名空间:usingSystem.Text;和usingSystem.Collections;

publicDataTableshowImage(intalbumID){SqlHelperhelper=newSqlHelper();StringBuilderstrsql_show=newStringBuilder();strsql_show.Append("selectimageID,alb.albumID,alb.albumName,imageName,imageUrl,imageTime,imageDesc");strsql_show.Append("fromimageasimg,albumasalbwhereimg.albumID=alb.albumIDandimg.albumID=@id");SqlParameter[]parm=newSqlParameter[]{newSqlParameter("@id",albumID)};SqlCommandcmd=helper.GetCommand(strsql_show.ToString(),parm);DataTabledt=newDataTable();using(SqlDataReaderrdr=cmd.ExecuteReader()){dt.Load(rdr);}returndt;}有空格设计ViewImage.asp页面对GridView进行编辑列操作:CommandField:选择—

showselectButton:true;BoundField:HeaderText:图片编号—DataField:imageIDHeaderText:图片地址—DataField:imageUrlHeaderText:图片名称—DataField:imageNameHeaderText:所属专辑名—DataField:albumNameHeaderText:图片上传时间—DataField:imageTime,HeaderText:图片简介—DataField:imageDescHyperLinkField:Text:修改图片所属专辑TemplateField编辑模板:TemplateField,其中HeaderTemplate和ItemTemplate设计如下:注意将GridView的属性设置如下:AllowPaging:True,AutoGenergateColumns:False,PageSize:2,DataKeyNames:imageID//在DB.cs中编写方法,实现在DetailsView中显示某张照片的详细信息注意是否引用命名空间:usingSystem.Text;和usingSystem.Collections;

publicDataTableshowMoreImage(intid){SqlHelperhelper=newSqlHelper();StringBuilderstrsql_show=newStringBuilder();strsql_show.Append("selectimageID,alb.albumID,alb.albumName,imageName,imageUrl,imageTime,imageDesc");strsql_show.Append("fromimageasimg,albumasalbwhereimg.albumID=alb.albumIDandimg.imageID=@id");SqlParameter[]parm=newSqlParameter[]{newSqlParameter("@id",id)};SqlCommandcmd=helper.GetCommand(strsql_show.ToString(),parm);DataTabledt=newDataTable();using(SqlDataReaderrdr=cmd.ExecuteReader()){dt.Load(rdr);}returndt;}空格设计ViewImage.aspx增加Button和DetailsView控件给DetailsView控件编辑字段添加模板给DetailsView控件编辑模板,如下所示:Label1—Text:Eval(“imageName”)Label2—Text:Eval(“albumName”)Image1—imageUrl:Eval(“imageUrl”)Label3—Text:Eval(“imageTime”)Label4—Text:Eval(“imageDesc”)并将DetailsView的AutoGenerateRows属性设为False修改专辑功能的实现为站点添加新页面updateAlbum.aspx,然后在Default.aspx中单击“修改专辑”导航到updateAlbum.aspx页面在DB.cs中编写updateAlbum方法实现修改专辑信息的功能

publicvoidupdateAlbum(intid,stringalbumDesc,stringalbumName,DateTimealbumTime,stringlogourl){SqlHelperhelper=newSqlHelper();stringstrsql="updatealbumsetalbumName=@albumName,albumTime=@albumTime,albumDesc=@albumDesc,logoUrl=@logourlwherealbumID=@albumID";SqlParameter[]parm=newSqlParameter[]{newSqlParameter("@albumID",id),newSqlParameter("@albumDesc",albumDesc),newSqlParameter("@albumName",albumName),newSqlParameter("@logourl",logourl),newSqlParameter("@albumTime",albumTime)};SqlCommandcmd=helper.GetCommand(strsql,parm);cmd.ExecuteNonQuery();}Textbox:TextMode:SingleLineImageTextbox:TextMode:MultiLinebutton因为进行修改时，要先把旧的数据显示在控件中，在此基础上修改再提交，所以要先按照从Default.aspx传过来的albumID查找出该专辑的所有信息，然后再修改提交。我们在DB.cs中写入新的方法select_albumMore,代码如下：publicDataTableselect_albumMore(intid){SqlHelperhelper=newSqlHelper();stringstrsql="selectalbumName,logoUrl,albumDescfromalbumwherealbumID=@albumID";SqlParameter[]parm=newSqlParameter[]{newSqlParameter("@albumID",id)};SqlCommandcmd=helper.GetCommand(strsql,parm);DataTabledt=newDataTable();using(SqlDataReaderrdr=cmd.ExecuteReader()){dt.Load(rdr);}returndt;}当点击default.aspx的修改专辑时，会打开updateAlbum.aspx页面，并触发该页面的Page_Load事件，代码如下所示：

protectedvoidPage_Load(objectsender,EventArgse){if(!IsPostBack){DBdb=newDB();intalbumID=Convert.ToInt32(Request.QueryString["id"]);TextBox1.Text=

db.select_albumMore(albumID).Rows[0][0].ToString();TextBox2.Text=

db.select_albumMore(albumID).Rows[0][2].ToString();Image1.ImageUrl=

db.select_albumMore(albumID).Rows[0][1].ToString();}}

在updateAlbum.aspx中点击”提交修改“按钮时，触发以下方法：protectedvoidButton1_Click(objectsender,EventArgse){DBdb=newDB();intalbumID=Convert.ToInt32(Request.QueryString["id"]);stringalbumDesc=TextBox2.Text.ToString();stringalbumName=TextBox1.Text.ToString();DateTimealbumTime=DateTime.Now;stringlogourl="image/"+;stringexname=('.')[1];if(exname.ToLower()=="jpg"||exname.ToLower()=="png"||exname.ToLower()=="gif"){(Server.MapPath(logourl));}db.updateAlbum(albumID,albumDesc,albumName,albumTime,logourl);Response.Write("<script>alert('修改成功');location.href='default.aspx?';</script>");}在default.aspx中点击“删除”按钮时，删除专辑的方法在DB中：

publicvoiddeleteAlbum(intalbumID){SqlHelperhelper=newSqlHelper();stringstrsql="deletefromimagewhereimage.albumID=@albumID;deletefromalbumwherealbumID=@albumID";SqlParameter[]parm=newSqlParameter[]{newSqlParameter("@id",albumID)};SqlCommandcmd=helper.GetCommand(strsql,parm);cmd.ExecuteNonQuery();}在objectdatasource2中的DELETE方法中选择DB中的deleteAlbum方法。删除专辑功能的实现，在default.aspx中编辑列时，将删除按钮启动注意：如果通过查询按钮查出某个专辑后，再点删除按钮，不能实现删除，因为查询功能是通过ObjectDataSource3实现的，而它不支持CommandField的删除钮，除非再编写相应的删除方法。修改图片所属专辑和简介给站点添加新页面update.aspx,用于修改图片所属的专辑名和修改图片简介。在DB.cs中编写需要的方法，因为修改先要显示旧的专辑名和专辑简介信息，所以要有一个按imageID查找所属albumID和imageDesc的方法select_Desc(),代码如下所示：

publicDataTableselect_Desc(intimageID){SqlHelperhelper=newSqlHelper();stringstrsql="selectimageDescfromimagewhereimageID=@imageID";SqlParameter[]parm=newSqlParameter[]{newSqlParameter("@imageID",imageID)};SqlCommandcmd=helper.GetCommand(strsql,parm);DataTabledt=newDataTable();using(SqlDataReaderrdr=cmd.ExecuteReader()){dt.Load(rdr);}returndt;}在DB.cs中编写需要的方法，因为点击提交修改按钮后，实现修改，所以要有一个修改图片所属专辑和图片简介的方法，代码如下所示：

publicvoidupdate(intalbumID,stringimageDesc,intimageID){SqlHelperhelper=newSqlHelper();stringstrsql="updateimagesetalbumID=@albumID,imageDesc=@imageDescwhereimageID=@imageID";SqlParameter[]parm=newSqlParameter[]{newSqlParameter("@albumID",albumID),newSqlParameter("@imageDesc",imageDesc),newSqlParameter("@imageID",imageID),};SqlCommandcmd=helper.GetCommand(strsql,parm);cmd.ExecuteNonQuery();}点击按钮，导航到update.aspx页面时触发该页的page_load事件，代码如下：protectedvoidPage_Load(objectsender,EventArgse){if(!IsPostBack){DBdb=newDB();intimageID=Convert.ToInt32(Request.QueryString["imageID"]);TextBox1.Text=db.select_Desc(imageID).Rows[0][0].ToString();}}当点击update.aspx的时，触发下面的事件：protectedvoidButton1_Click(objectsender,EventArgse){DBdb=newDB();intalbumID=Convert.ToInt32(DropDownList1.SelectedValue);stringimageDesc=TextBox1.Text.ToString();intimageID=Convert.ToInt32(Request.QueryString["imageID"]);

db.update(albumID,imageDesc,imageID);Response.Write("<script>alert('修改成功');location.href='default.aspx?';</script>");}通过ViewImage.aspx页面的“全选”框，实现全部选择功能，并且可以任意多选或单选，翻页可以保存选择状态。当显示图片信息的GridView1翻页时，触发以下事件，代码如下：protectedvoidGridView1_PageIndexChanging(objectsender,GridViewPageEventArgse){RememberOldValues();//调用RememberOldValues()方法，保存选中状态到session中GridView1.PageIndex=e.NewPageIndex;GridView1.DataBind();RePopulateValue();//调用RePopulateValue()方法，将session中保存的状态表现在CheckBox中e.Cancel=true;//退出事件，如果没有此动作，GridView将会再次

DataBind()，将覆盖CheckBox的选中状态

//保存选中状态到session中

privatevoidRememberOldValues(){ArrayListal=null;//声名集合

//创建一个Session并检查是否为空，这个Session用来保存集合

//这里是判断是否是第一次进行分页if(Session["checked_items"]!=null){//将Session对象保存到集合中al=(ArrayList)Session["checked_items"];

}else{al=newArrayList();}

//声明一个变量用来保存相应数据从而判断操作的是哪个check控件intindex=-1;续下页

foreach(GridViewRowrowinGridView1.Rows)//遍历GridViewRow{index=(int)GridView1.DataKeys[row.RowIndex].Value;

//从gridview中取得行的绑定值boolresult=((CheckBox)row.FindControl("CheckBox2")).Checked;

//从每行的check中取得选中状态if(result)//判断选中状态{//当check为选中,并且集合中不包含这个值时,将此绑定值添加进集合中if(!al.Contains(index)){al.Add(index);}}else{//当状态为不选中,并且集合中包含这个值时,将帮定值从集合中移除if(al.Contains(index)){al.Remove(index);}}}//最后判断集合是否为空或者没有值,如果有则将集合添加到Session中,以便保存数据

if(al!=null&&al.Count>0){Session["checked_items"]=al;}}//将session中保存的状态表现在CheckBox中

privatevoidRePopulateValue()//将Session中的值赋给集合{ArrayListal=(ArrayList)Session["checked_i