综合实验第六课：电子相册.ppt

综合实验第六课：电子相册,回顾：DataGrid控件相关知识目标：1、添加相片(相片上传)-重点2、显示相片(DataList)，详细显示重点,该电子相册的功能:1.添加相片(重要的是相片上传)2.相片的展示，包括:相片显示，详细显示(要有图片和文字两种链接)根据功能的要求，确定相关页面:1.添加相片的页面2.显示相片的页面3.详细显示,功能分析,电子相册实现流程,设计数据库，表，存储过程设计前台界面编写后台代码编译执行排错，优化,数据库设计,1.根据功能的需求，确定数据库（Photos)和相关表（Photos)。2.确定表的字段。相片表相片ID，相片标题，图片名称，详细描述，添加时间,存储过程设计,1.添加相片2.相片展示(标题和所有相片)3.详细展示(标题，相片，详细描述),存储过程设计,添加相片前台,界面设计(添加的内容有：相片标题、相片、相片描述)，然后添加代码。相片的添加需要上传图片，这里使用HTML控件的FileField控件，并把它作为服务器控件运行。图片上传是通过控件，让用户自己到本机上浏览，查找到要添加的图片，然后添加图片到服务器的过程。一般方法是上传图片文件的路径到数据库，图片保存到项目的文件夹下面，以将这些图片可以展示出来。,FileField控件,FileField控件，文件上传控件，用来上传文件和图片，点击浏览按钮，可以在本机上选择文件和图片。该控件使用时要先作为服务器控件运行。首先要得到用户上传的文件，调用该控件下的PostedFile属性。然后赋值给HttpPostedFile类的变量。Eg:HttpPostedFilehpf=File1.PostedFile;HttpPostedFile类提供了对作为文件集合从客户端上载的所有文件的访问，提供属性和方法获取关于个别文件的信息以及读取和保存文件。,FileField控件,1。上传文件的名称：Path.GetFileName(hpf.FileName)2。通过hpf的SaveAs方法将要上传的文件保存到服务器，其中通过Server.MapPath(“文件夹名称”)方法可以得到文件夹在服务器上的路径，再将文件夹路径和文件名称结合成要存储的该上传图片的绝对路径。,添加相片后台代码,SqlConnectioncon=newSqlConnection(server=.;uid=sa;pwd=;database=Photos);con.Open();SqlCommandcmd=newSqlCommand(AddPho,con);cmd.CommandType=CommandType.StoredProcedure;cmd.Parameters.Add(title,TextBox1.Text);HttpPostedFilehpf=UpLoad.PostedFile;stringpicName=System.IO.Path.GetFileName(hpf.FileName);cmd.Parameters.Add(picName,picName);cmd.Parameters.Add(des,TextBox2.Text);inti=cmd.ExecuteNonQuery();con.Close();if(i=1)hpf.SaveAs(Server.MapPath(Images)+/+picName);Response.Redirect(ShowPho.aspx);,“工具”菜单”文件夹选项”-”使用简单文件共享”的勾去掉存放相片的文件夹”属性”安全”选中”Everyone”-”完全控制”,相片上传不到服务器问题,第二阶段,显示相片,在首页使用DataList控件显示所有的相片。添加图片和标题链接，进一步显示详细内容。,前台设计DataList控件,电子相册案例主要是掌握DataList控件进行数据绑定和显示。首先对该控件简单了解一下:DataList控件，允许使用模板和样式定义格式显示数据，与DataGrid控件有许多相似，都非常适合显示数据和处理多条数据记录，但还有很大差别，DataList控件一定要通过模板定义其显示格式。可以使版面配置更加灵活，外观多样式。比如最大好处是可以分列显示。DataList控件包含以下模板:,这里我们重点掌握模板，这个为必选项，用来定义模板中的项的内容和布局。,DataList控件,右击DataList控件，选择”编辑模板”项模板”，在项模板界面的中自定义格式来显示数据。包括可以在里面插入表格、使用控件等，然后结束模板编辑。当然也可以直接在HTML代码中手中添加模板，设置格式。,设置DataList项模板,这里是在中插入3行1列表。第1行使用HyperLink控件显示相片标题，第二行使用Image控件显示相片，第三行使用Label控件显示相片发布时间。在HTML代码中绑定数据，HyperLink控件绑定格式如下：text=Image控件绑定格式如下：ImageUrl=Label控件绑定格式如下：text=,设置DataList项模板,在HTML代码中建立链接HyperLink控件链接代码：NavigateUrl=Image控件链接代码：,设置DataList项模板,后台代码设计,SqlConnectioncon=newSqlConnection(server=.;uid=sa;pwd=;database=Photos);con.Open();SqlCommandcmd=newSqlCommand(ShowPho,con);cmd.CommandType=CommandType.StoredProcedure;SqlDataReaderdr=cmd.ExecuteReader();DataList1.DataSource=dr;DataList1.DataBind();dr.Close();con.Close();,界面设计（显示相片标题，相片，详细描述）确定显示哪个相片的详细信息，需要从首页的相片标题（相片）链接过来，并传相片ID这个参数（这里是在HTML代码中通过手动绑定传参