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

第十五课 产品展示系统 回顾 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控件包含以下模板 这里我们重点掌握模板 这个为必选项 用来定义模板中的项的内容和布局 设置DataList项模板 右击DataList控件 选择 编辑模板 项模板 在项模板界面的中自定义格式来显示数据 包括可以在里面插入表格 使用控件等 然后结束模板编辑 当然也可以直接在HTML代码中手中添加模板 设置格式 首页代码 演示练习 查看产品详细信息页面