9-3(gridview显示图片列).docVIP

株洲职业技术学院 教师授课教案 第9周 第1-4课时 课程名称 nit-pro考试实训 授课课题 .net三层架构设计 授课专业班级 高软件0901 教学目标 使用asp.net的GridView完成性别的图片显示 教学要点 教学重点 模板列的使用、后台获取图片路径方法的编写 教学难点 模板列的综合运用 课型 讲学做一体化 教法与学法 （教具） 任务驱动、讲学做一体化，多媒体教学设备 课后作业 教学后记 （教师课后填写） 授课教师 崔曙光 备课时间 2011年10月19日 ( 课堂案例一 使用图片显示性别 【案例学习目标】 学习使用模板列显示用户性别 【案例知识要点】 绑定字段向模板字段的转化、ItemTemplate添加控件、Image控件的ImageUrl的绑定 【案例效果】 【案例完成步骤】 准备素材：表示“男”和“女”的图片 将“性别”列转为模块字段 在模块里添加Image控件 绑定ImageUrl 后台编写GetSexImgPath方法 protected string GetSexImgPath(object sex) { string sexPath = sex.ToString() == 1 ? boy.gif : girl.gif; return ~/image/ + sexPath; } ( 课堂案例二 使用ImageField显示用户照片 【案例学习目标】 学习使用ImageField列显示用户照片 【案例知识要点】 ImageField列的使用、DataImageFormatString的设置、路径的正确设置、文件是否存在的判断 【案例效果】 【案例完成步骤】 准备素材：用户的照片放到“网站”\image\photo下。注意图片的文件名和表中的用户编号相同。并准备一张默认图片。 在GridView中添加ImageField字段。并将DataImageField设置为“用户编号”。DataImageFormatString用来拼接图片的正确路径。 设置图片的width和height 如果没有对应的图片，则显示默认图片的解决方法 4.1）将ImageField列转为模板列 4.2）自定义绑定ImageUrl 4.3）编写GetPhotoUrl protected string GetPhotoUrl(object url) { string defaultPhotoPath = ~/image/photo/nophoto.jpg; if (url == null) return defaultPhotoPath; bool exists = System.IO.File.Exists(Server.MapPath(url.ToString())); if (!exists) { return defaultPhotoPath; } return url.ToString(); } 5