产品展示系统介绍.pptVIP

第十五课:产品展示系统 回顾： DataGrid控件相关知识 目标： 通过实现产品展示系统,达到以下目标: 1.理解方法封装、调用(图片上传) 2.掌握图片上传技术--重点 3。掌握DataList数据绑定控件的基本用法—重点 4。掌握图片和文字两种链接方式 功能分析 该产品展示系统的功能: 1.主要是产品的展示(图片),包括: 产品显示,详细显示(要有图片和文字两种链接) 2.添加产品(重要的是图片上传) 流程 1.数据库设计 2.页面确定和设计 3.代码编辑 4.编译执行 数据库,表 1.根据功能的需求,确定数据库和相关表 因为是产品展示系统,一定需要一张产品表 2.确定每个表的字段 产品表[产品ID,产品名称, 产品图片,详细描述,添加时间] 确定项目的相关页面 根据功能需求来确定相关的页面文件 1.显示产品 显示所有产品的标题和图片----首页(Index.aspx) 详细显示----ProductDetails.aspx 2.添加产品----AddProducts.aspx 配置文件 配置文件是指包含在项目中的Web.config文件,它是一个XML文本文件，它用来储存 ASP.NET Web 应用程序的配置信息，它可以出现在应用程序的每一个目录中。新建一个Web应用程序后，默认情况下会在根目录自动创建一个默认的Web.config文件 web.config配置文件 中，所有的代码都应该位于＜configuration＞ ＜system.web＞ 和 ＜/system.web＞＜/configuration＞。 演示配置数据库连接 方法封装 添加一个类文件,将所有对数据操作的方法封装在里面 1.添加相片 2.显示相片 添加产品 首先让我们的数据库产品表有内容,先完成添加产品页面 页面顶部我们使用一个自定义控件布置外观 中部放添加产品的表格,添加的内容有产品名称,图片,详细描述. 图片的添加需要上传图片,这里使用HTML控件的File Field控件,并把它作为服务器控件运行 图片上传 图片上传是通过控件,让用户自己到本机上浏览,查找到要添加的图片,然后添加图片到服务器的过程 一般方法是上传图片文件的路径到数据库,图片保存到项目的文件夹下面.以将这些图片可以展示出来. File Field控件 File Field控件,文件上传控件,用来上传文件和图片,点击浏览按钮,可以在本机上选择文件和图片. 该控件使用时要先作为服务器控件运行. 首先要得到用户上传的文件,调用该控件下的PostedFile属性.然后赋值给HttpPostedFile类的变量. HttpPostedFile类提供了对作为文件集合从客户端上载的所有文件的访问,提供属性和方法获取关于个别文件的信息以及读取和保存文件. Eg: HttpPostedFile hpf=File1. PostedFile; File Field控件 上传文件的名称: Path.GetFileName(hpf.FileName) 通过hpf的SaveAs方法将要上传的文件保存到服务器,其中通过Server.MapPath(“文件夹名称”)方法可以得到文件夹在服务器上的路径,再将文件夹路径和文件名称结合成要存储的该上传图片的绝对路径. 添加产品代码 演示 练习 首页显示产品 页面顶部我们使用一个自定义控件布置外观 中部使用DataList控件显示产品. 具体显示产品时,显示产品图片,标题,并添加图片和标题链接,进一步显示详细内容. DataList控件 这个产品展示系统主要是学习掌握DataList控件进行数据绑定和显示.首先对该控件简单了解一下: DataList控件,允许使用模板和样式定义格式显示数据,与DataGrid控件有许多相似,都非常适合显示数据和处理多条数据记录,但还有很大差别, DataList控件一定要通过模板定义其显示格式.可以使版面配置更加灵活,外观多样式.比如最大好处是可以分列显示. DataList控件包含以下模板: HeaderTemplate/HeaderTemplate ItemTemplate/ItemTemplate FooterTemplate/FooterTemplate AlternatingItemTemplate/AlternatingItemTemplate SeparatorTemplate/SeparatorTemplate SelectedItemTemplate/SelectedItemTemplate EditItemTemplate/EditItemTemplate 这里我们重点掌握ItemTemplate/ItemTemplat