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

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