频 道 直 达 - 新闻 - 培训 - 软件 - 教程 - 前沿 - 组网 - 系统应用 - 安全 - 编程 - 存储 - 操作系统 - 数据库 - 服务器 - 专题 - 产品 - 案例库 - 读书 - 博客 - BBS
51CTO.COM_中国最大的网络技术网站
找资料:

页面范例6 - 异步的照片相簿—重要!!

作者: 章立民研究室 出处:机械工业出版社  2008-05-06 10:37    砖    好    评论   进入论坛
阅读提示:《ASP.NET AJAX 经典范例168(VC#版)》第4章为您介绍的是一切尽其在我,探讨UpdatePanel的可编程功能,本节为页面范例6 - 异步的照片相簿—重要!!

页面范例6 - 异步的照片相簿—重要!!

图4-16与图4-17是页面范例CH4_DemoForm006.aspx的执行画面,这是一个异步的照片相簿,其功能特性说明如下:

 
•如图4-16所示,当您使用鼠标单击右侧的照片缩略图时,照片全图就会在左侧显示出来。
 

•如图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;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.IO;

/// <summary>
/// PictureSupplier 的摘要描述
/// </summary>
public class PictureSupplier
{
public PictureSupplier()
{
...
}

public static DataView GetPictureList()
{
string strPath = "./Images/Europe";

DirectoryInfo myDirInfo;
Array arrFileInfo;
DataTable filesTable = new DataTable();
DataView myDataView;
DataRow myDataRow;

filesTable.Columns.Add("Name", Type.GetType("System.String"));
filesTable.Columns.Add("FullPath", Type.GetType("System.String"));
filesTable.Columns.Add("Length", Type.GetType("System.Int32"));
filesTable.Columns.Add("LastWriteTime", Type.GetType("System.DateTime"));
filesTable.Columns.Add("Extension", Type.GetType("System.String"));

// 取得目录信息。
myDirInfo = new DirectoryInfo(HttpContext.Current.Server.MapPath(strPath));

// 取得文件信息。
arrFileInfo = myDirInfo.GetFiles("*.jpg");

// 循环处理 FileInfo 对象以便将相关文件信息填入数据表对象中。
foreach (FileInfo myFileInfo in arrFileInfo)
{
myDataRow = filesTable.NewRow();
myDataRow["Name"] = myFileInfo.Name;
myDataRow["FullPath"] =
HttpContext.Current.Server.UrlEncode(myFileInfo.FullName);
myDataRow["Length"] = myFileInfo.Length;
myDataRow["LastWriteTime"] = myFileInfo.LastWriteTime;
myDataRow["Extension"] = myFileInfo.Extension;

filesTable.Rows.Add(myDataRow);
}

// 创建一个新的 DataView 对象。
myDataView = filesTable.DefaultView;

// 根据 Name 字段的内容来加以排序。
myDataView.Sort = "Name";

// 将 DataView 对象返回。
return myDataView;
}
}

•GridView控件不直接显示DataView对象中的信息,取而代之的是,它使用了一个模板列,并在此模板列中添加一个ImageButton控件(如图4-19所示),重要的是,我们必须设定ImageButton控件的各个属性,如下所示:

<asp:ImageButton ID="ImageButton1" runat="server" 
CommandArgument='<%# Eval("Name") %>'
CommandName="ShowLargPhoto"
ImageUrl=
'<%# Eval("FullPath",
"~/DisplaySmallEuropePicture.ashx?PictureFilePath={0}") %>'
ToolTip='<%# Eval("Length", "文档大小{0} 字节") %>' />
 


•从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)
{
// 如果用户按下照片缩略图。
if (e.CommandName == "ShowLargPhoto")
{
this.LargeImage.ImageUrl = "~/Images/Europe/" + e.CommandArgument.ToString();
// 调用 LargeImageUpdatePanel 的 Update 方法来更新其内容。
this.LargeImageUpdatePanel.Update();
}
}
•请为GridView控件的RowDataBound事件处理函数编写下列程序代码,如此一来,当您将鼠标指针移至某一个照片缩略图的上方时,照片缩略图会立刻显示一个立体外框:
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
// 此处不可以用 UpdatePanel.FindControl
ImageButton MyImageButton = (ImageButton)(e.Row.FindControl("ImageButton1"));
  if (MyImageButton != null)
{
MyImageButton.Attributes.Add("onMouseOver", "SetNewBorder(this);");
MyImageButton.Attributes.Add("onMouseOut", "SetOldBorder(this);");
}
}
}
•我们必须为页面的Load事件处理函数编写下列程序代码,以便在页面打开后而用户尚未按下任何一个照片缩略图时,显示第一个照片全图:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
this.LargeImage.ImageUrl = "~/Images/Europe/_DSC0926.JPG";
}
}

•对于内含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;
using System.Web;
using Microsoft.VisualBasic.Devices;
using System.IO;
using System.Drawing;
using System.Drawing.Imaging;
public class DisplaySmallEuropePicture : IHttpHandler 
{   
public void ProcessRequest (HttpContext context)
{
// 取得传递进来的文件路径。
string PictureFilePath =
context.Request.QueryString["PictureFilePath"].Trim();

// 改变 HTTP 头的输出格式,以便让浏览器知道所输出的文件格式是 JPEG 格式。
context.Response.ContentType = "Image/JPEG";
context.Response.Clear();
context.Response.BufferOutput = true;
Computer MyComputer = new Computer();
using (MemoryStream ms = new MemoryStream(
MyComputer.FileSystem.ReadAllBytes(PictureFilePath)))
{
using (Bitmap bmp = new Bitmap(ms))
{
// 将照片缩小。
using (Bitmap SmallerBmp =
new Bitmap(bmp, Convert.ToInt32(bmp.Width * 0.15),
Convert.ToInt32(bmp.Height * 0.15)))
{
SmallerBmp.Save(context.Response.OutputStream, ImageFormat.Jpeg);
}
}
}
}
...
}

【责任编辑:夏书 TEL:(010)68476606】

回书目   上一节   下一节
专题
ASP.NET 2.0基础开发指南
.NET移动与嵌入式技术专题
.NET Framework新手入门专题
VS.NET实用开发专题
ADO.NET实用技巧专题
我也说两句

匿名发表

(如果看不清请点击图片进行更换)


中 国 最 大 的 网 络 技 术 网 站 ·
技 术 成 就 梦 想
订阅技术快讯
电子杂志下载
名称:SQL Server数据库管理精品黄皮书
简介:书中文章经过精挑细选,便于用户能根据自己的实际工作和学习,快速在本书寻找到相关资料。内容涵盖了SQL Server的安装与升级、语句查询、数据备份和恢复、自动化任务、数据同步、数据字典、安全和预防、性能和优化、集群等各方面应用信息,以及DBA管理人员在数据库管理工作中
名称:2007路由技术大全
简介:《2007路由技术大全》由51CTO.com网站特别策划制作,该书包括路由器技术、路由器产品、路由器配置、安全设置、路由器故障处理、路由器密码恢复,以及广大网友在实践使用中的心得经验和技巧文章,内容注重实用性,适用于初学者入门,也适合多年从业者提高,是一本实践和理论完
名称:网络安全精品应用黄皮书
简介:《2007精品网络安全黄皮书》包括了9个大类24个小类, 800余篇文章,内容包含了熊猫烧香病毒、DDOS攻击、ARP病等热点问题的介绍及解决方案。从病毒查杀、防范、系统、数据等各方面的安全设置到黑客技术的了解、防范,涉及到了安全应用的全部领域, 由浅至深内容全面。
全面解析35岁技术人的价值与出路
全面解析35岁技术人的价值与..
勇闯IT培训黑色围城
勇闯IT培训黑色围城
二手仿冒设备与思科再营销谁更火
二手仿冒设备与思科再营销谁..
· 二手仿冒设备与思科再..
· 汶川大地震 IT技术人为..
· 网络故障排除宝典
· 访问控制列表(ACL)介绍
· 视频访谈:网管员如何踏..
· 首届中国IT工程师生态..
· 华为路由器配置
· 企业数据恢复指南
· 龙芯要做中国的“奔腾”
· 2008年上半年全国软考..
· 交换机故障解决指南
· Vista SP1对决XP SP3
· LAMP技术精解
· 微软出价446亿美元收购..
· AIX操作系统管理应用(..
· 华为员工自杀频频拷问..
ARP攻击防范与解决方案
ARP攻击防范与解决方案
iSCSI应用与发展
iSCSI应用与发展
SQL Server 2008/2005全解
SQL Server 2008/2005全解
· SQL Server 2008/2005..
· SOA 面向服务架构
· SQL Server 2008/2005..
· iSCSI应用与发展
· RAID——磁盘阵列基础
· Apache技术专题
· 三层交换技术专题
· SQL Server入门到精通
· Apache技术专题
· 国际文档格式标准开战
· 路由器设置与口令恢复
· 打造安全服务器
· PHP开发应用手册
· SOA 面向服务架构
· 企业数据恢复指南
· ADSL应用面面俱到
ARP攻击防范与解决方案
ARP攻击防范与解决方案
SQL Server 2008/2005全解
SQL Server 2008/2005全解
iSCSI应用与发展
iSCSI应用与发展
· iSCSI应用与发展
· SQL Server入门到精通
· SQL Server 2008/2005..
· SOA 面向服务架构
· Apache技术专题
· iSCSI应用与发展
· 三层交换技术专题
· Apache技术专题
· 企业数据恢复指南
· RAID——磁盘阵列基础
· 路由器设置与口令恢复
· SOA 面向服务架构
· ADSL应用面面俱到
· ADSL应用面面俱到
· 反垃圾邮件技术应用
· 访问控制列表(ACL)介绍