网站编程第十五课：产品展示系统

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