页面范例6 - 异步的照片相簿—重要!!
图4-16与图4-17是页面范例CH4_DemoForm006.aspx的执行画面,这是一个异步的照片相簿,其功能特性说明如下:
|
|
•如图4-16所示,当您将鼠标指针移至某一个照片缩略图的上方时,会立刻显示一个立体外框以及照片的文件大小。请注意,所显示的文件大小是照片全图的文件大小,而不是照片缩略图的文件大小(请注意:事实上根本不存在照片缩略图文件)。
•如图4-17所示,您可以使用一组导航按钮来滚动照片缩略图。
•这是一个异步接口,也就是说,当您执行上述操作时,页面不会整个刷新,当然也就不会发生恼人的闪烁状况。
基本上,本页面范例与前一个页面范例的设计模式是相同的,两者主要存在以下的差异:
•前一个页面范例CH4_DemoForm005.aspx的产品相片是来自数据库,而且全图与缩略图各有一份(分别存储于“自行车产品相片”数据表的“相片全图”与“相片缩略图”字段);然而本页面范例CH4_DemoForm006. aspx的风景照片则是存放于 Images/Europe 文件夹当中,而且只有大尺寸的全图照片,并没有小尺寸的缩略图照片。因此本页面范例CH4_Demo- Form006.aspx必须自行动态产生小尺寸的缩略图照片。
•前一个页面范例CH4_DemoForm005.aspx使用默认的数字按钮来滚动缩略图(其实也就是换页),本页面范例CH4_DemoForm006.aspx则是使用自定义的一组图片按钮来滚动缩略图(其实也就是换页)。
了解了本页面范例的功能特性以及它与前一个页面范例的差异之后,我们要来研究其设计技巧。说明如下:
•其实这个异步的照片相簿是结合UpdatePanel控件与GridView控件制作出来的。从图4-18所示的设计画面可以看出,我们使用了两个UpdatePanel控件,内含于左侧UpdatePanel控件(亦即LargeImageUpdatePanel)中的Image控件用来显示照片全图,内含于右侧UpdatePanel控件(亦即SmallImageUpdatePanel)中的GridView控件则用来显示并滚动照片缩略图。
|
由于我们会通过编程方式来更新LargeImageUpdatePanel的内容(亦即调用其Update方法),因此请务必将它的UpdateMode属性设定成Conditional。此外,由于我们会为SmallImageUpdatePanel定义AsyncPostBack触发器,因此也请务必将它的UpdateMode属性设定成Conditional。
•从图4-18可以看出,我们使用一个名称为ObjectDataSource1的ObjectDataSource对象作为GridView控件的数据源。ObjectDataSource1通过PictureSupplier类的GetPictureList方法来取得 \Images\Europe 文件夹中各个照片文件的相关信息,并将这些照片文件的相关信息(例如:完整文件名称路径、文件大小等)内含于一个DataView对象后返回。
PictureSupplier类编写于App_Code文件夹内的PictureSupplier.cs中,程序代码如下:
using System; /// <summary> public static DataView GetPictureList() DirectoryInfo myDirInfo; filesTable.Columns.Add("Name", Type.GetType("System.String")); // 取得目录信息。 // 取得文件信息。 // 循环处理 FileInfo 对象以便将相关文件信息填入数据表对象中。 filesTable.Rows.Add(myDataRow); // 创建一个新的 DataView 对象。 // 根据 Name 字段的内容来加以排序。 // 将 DataView 对象返回。 |
•GridView控件不直接显示DataView对象中的信息,取而代之的是,它使用了一个模板列,并在此模板列中添加一个ImageButton控件(如图4-19所示),重要的是,我们必须设定ImageButton控件的各个属性,如下所示:
<asp:ImageButton ID="ImageButton1" runat="server" |
|
•从ImageButton控件的上述设定可以看出以下信息:
◇ 从ImageUrl属性的设定可以了解,照片文件的完整路径文件名称会被传递给泛型处理函数DisplaySmallEuropePicture.ashx,DisplaySmallEuropePicture.ashx会动态制作照片的缩略图并将其以JPEG格式返回,以便让照片缩略图显示于ImageButton控件中。
◇ 我们将文本字符串 “ShowLargPhoto” 赋给CommandName属性,此举是为了随后能够在GridView控件的RowCommand事件处理函数中判断用户是否按下的是ImageButton控件(亦即是否按下了照片缩略图)。
◇ 我们将照片文档的文件名称赋给CommandArgument属性,此举是为了随后能够在GridView控件的RowCommand事件处理函数中取得用户所按下的ImageButton控件(亦即照片缩略图)的文件名称,以便将相对路径赋给Image控件的ImageUrl属性来显示照片全图。
◇ 由于我们将‘<%# Eval(“Length”, “文档大小{0} 字节”)%>’ 赋给ToolTip属性,因此当您将鼠标指针移至某一个照片缩略图的上方时,会立刻显示出照片的文件大小(如图4-16所示)。
•我们必须为GridView控件的RowCommand事件处理函数编写下列程序代码,它会判断用户是否按下照片缩略图,如果是的话,就将CommandArgument属性所持有的文件名称加上前置的相对路径之后,赋给LargeImageUpdatePanel中的Image控件的ImageUrl属性,并随即调用LargeImageUpdatePanel的Update方法,如此即可将照片全图显示出来:
protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e) |
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) if (MyImageButton != null) |
protected void Page_Load(object sender, EventArgs e) |
•对于内含GridView控件的SmallImageUpdatePanel而言,还必须完成下列两项非常重要的设定:
◇ 当我们单击GridView控件中的照片缩略图时,必须引发异步回送并局部更新LargeImageUpdatePanel中的内容以便显示出用户所按下的照片缩略图的对应照片全图,但是它本身所在的SmallImageUpdatePanel则不需要更新以免造成无谓的数据传送和更新。欲达此目的,您必须将SmallImageUpdatePanel的ChildrenAsTriggers属性设定成False。
◇ 当我们单击GridView控件的导航按钮来滚动缩略图时,必须引发异步回送并局部更新它所在的SmallImageUpdatePanel,然而我们刚刚已经将SmallImageUpdatePanel的ChildrenAsTriggers属性设定成False,如此一来,虽然单击导航按钮会引发异步回送,然而它本身所在的SmallImageUpdatePanel并不会被更新。如何解决这个冲突呢?非常简单,您只需为SmallImageUpdatePanel控件的Trigger属性定义一个由GridView控件的PageIndexChanged事件所引发的AsyncPostBackTrigger触发器即可,其实这就是将UpdatePanel的触发器设定成由其内部的控件事件来引发的典型案例。
•泛型处理函数DisplaySmallEuropePicture.ashx会动态为Images\Europe文件夹中的照片全图文件 .jpg 制作出大小为原图15%的缩略图并将其以JPEG格式返回,以便让照片缩略图显示于ImageButton控件中。其程序代码如下:
<%@ WebHandler Language="C#" Class="DisplaySmallEuropePicture" %> using System; public class DisplaySmallEuropePicture : IHttpHandler |
| 回书目 上一节 下一节 |
|
· 网络工程师自测获奖名.. · 08年4月各大网上书店及.. · 系统分析师自测获奖名.. · Linux结课考试自测获奖.. · 上周Linux系统命令的使.. · 上周真题冲刺测试获奖.. |
· 全国计算机等考四级模.. · 08年3月各大网上书店及.. · 网络工程师模拟测试获.. · 全国计算机软考考试指.. · 3月24日WCF聊天活动 积.. · 全国计算机等级考试四.. |
|
||||
| · 二手仿冒设备与思科再.. · 汶川大地震 IT技术人为.. · 网络故障排除宝典 · 访问控制列表(ACL)介绍 · 视频访谈:网管员如何踏.. · 首届中国IT工程师生态.. · 华为路由器配置 · 企业数据恢复指南 |
· 龙芯要做中国的“奔腾” · 2008年上半年全国软考.. · 交换机故障解决指南 · Vista SP1对决XP SP3 · LAMP技术精解 · 微软出价446亿美元收购.. · AIX操作系统管理应用(.. · 华为员工自杀频频拷问.. |
|||
|
||||
| · SQL Server 2008/2005.. · SOA 面向服务架构 · SQL Server 2008/2005.. · iSCSI应用与发展 · RAID——磁盘阵列基础 · Apache技术专题 · 三层交换技术专题 · SQL Server入门到精通 |
· Apache技术专题 · 国际文档格式标准开战 · 路由器设置与口令恢复 · 打造安全服务器 · PHP开发应用手册 · SOA 面向服务架构 · 企业数据恢复指南 · ADSL应用面面俱到 |
|||
|
||||
| · iSCSI应用与发展 · SQL Server入门到精通 · SQL Server 2008/2005.. · SOA 面向服务架构 · Apache技术专题 · iSCSI应用与发展 · 三层交换技术专题 · Apache技术专题 |
· 企业数据恢复指南 · RAID——磁盘阵列基础 · 路由器设置与口令恢复 · SOA 面向服务架构 · ADSL应用面面俱到 · ADSL应用面面俱到 · 反垃圾邮件技术应用 · 访问控制列表(ACL)介绍 |
|||