1. introduction:
ASP.NET的AjaxToolKit提供的这个collapsiblePanel是个非常灵活的可以让你轻松实现为你的web页面的任何一部分添加一个可折叠的按钮。开发人员需要作的,只是指定一个页面上的 Panel 控件为需要折叠展开功能的 Panel 为其TargetID, 同时还可以指定页面上的某一个控件是触发折叠展开功能的开关,或者指定当鼠标移动到某一区域的时候触发这项功能。
另外当某个panel被post-back时,collapsiblePanel控件会自动记住它所操作的Panel的客户端状态并保存下来。这就允许了你随意去让服务器端和客户端交互数据而不影响某些panel的状态。
同时web页面开发者可以去指定当目标 Panel 展开的时候,如果面对其不具有所需要的展开空间时,是否出现滚动条,并且设置该滚动条在高度或者宽度上的数据。
注意: CollapsiblePanel 必须采用标准的CSS格式, 早期的IE版本不支持这个控件的应用。因而,你再你建立一个新页面的时候采用关键字!DOCTYPE进行申明,指定该页面应该被生成为标准的IE格式。对于 ASP.Net 所新建的页面其具有这项关键字的默认设置。
2. AJAXToolKit 和Jquery中对应功能的比较:
collapsiblePanel控件和jQuery的API中介绍的Effect部分的Sliding差不多。如果你对jQuery感兴趣可以去看看这里介绍的例子。http://blog.csdn.net/dujingjing1230/archive/2009/06/08/4252990.aspx
collapsiblePanel相当于jQuery的Slidetoggle功能。不过jQuery的这个功能比较单调,需要你添加一些自定义的方法来实现更好的效果。
3. Properties:
CollapsiblePanel控件的全部属性如下所示,其中斜体属性是可选属性。
<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="Server"
TargetControlID="Panel1"
CollapsedSize="0"
ExpandedSize="300"
Collapsed="True"
ExpandControlID="LinkButton1"
CollapseControlID="LinkButton1"
AutoCollapse="False"
AutoExpand="False"
ScrollContents="True"
TextLabelID="Label1"
CollapsedText="Show Details..."
ExpandedText="Hide Details"
ImageControlID="Image1"
ExpandedImage="~/images/collapse.jpg"
CollapsedImage="~/images/expand.jpg"
ExpandDirection="Vertical
a. TargetControlID: 需要展开和折叠的Panel的ID。
b. CollapsedSize: 目标panel折叠时的大小,使用pixels来表示。
c. ExpandedSize: 当目标展开时的大小,使用pixels来表示。
d. Collapsed: 当页面初始化时是否折叠目标Panel。
e. AutoCollapse - 如果设置为 True,当鼠标指针移出 Panel 区域的时候 Panel 将自动折叠
f. AutoExpand - 如果设置为 True,当鼠标移入到 Panel 区域的时候 Panel 将自动展开
g. ScrollContents - 如果设置为 True,当 Panel 的内容大于其本身的大小的情况下,将自动出现相适应的滚动条
h. ExpandControlID/CollapseControlID - 控制目标 Panel 的折叠或者展开状态的控件 ID, 当点击该控件的时候,目标 Panel 将呈现展开或者折叠的状态, 如果它们被设置为相同的控件,那么这个控件将根据他当前的状态进行改变。
i. TextLabelID - 用于显示当前目标 Panel 折叠或者展开状态的 Label 控件 ID
j. CollapsedText - 折叠状态的描述,该描述将用于 TextLabelID 的 Text 属性,这个文本内容同样将是 ImageControlID (如果设置)的 AlternateText 属性值
k. ExpandedText - 展开状态的描述,该描述将用于 TextLabelID 的 Text 属性,这个文本内容同样将是 ImageControlID (如果设置) 的 AlternateText 属性值
l. ImageControlID - 用于用图标表示其展开或者折叠状态的 Image 控件 ID,该控件将自动根据其状态替换其图标为 CollapsedImage 属性指向的图片, 和 ExpandedImage 属性指向的图片。如果指定了 CollapsedText 和 ExpandedText 属性,它们将是该图标控件的 AlternateText 属性值
m. CollapsedImage - 当目标 Panel 被折叠的时候呈现的图片
n. ExpandedImage - 当目标 Panel 被展开的时候呈现的图片
o. ExpandDirection - 可以设置为 "Vertical"(垂直) 或者 "Horizontal(水平)" 标示目标 Panel 的展开方向
4. Example:
这里会提供两个例子,一个是比较基本的微软提供的例子。一个是一个老外写的不错的例子。后面那个例子需要用到AdventureWorks数据库(不过因为是个小例子,如果你没有安装adventureWorks也没关系,我会在代码中附上需要用到的脚本和数据,你只要执行就OK了)。
先看微软提供这个例子,当然我是把它从抽出来了,所以理解起来也比较简单了。
第一步: 创建一个ajaxtoolkit模板:
起个项目名字叫做AjaxControlToolKit_CollapsiblePanel。
第二步就是开始编辑default.aspx文件。
和前面的例子一样,先把需要的几个div给拖进来,<div class=”demoarea”><div class=”demoheading”>还有个是<div class=”demobottom”>,
上面介绍的collapsiblePanel属性中可以知道我们需要两个panel和一个label,如下图:
使用Panel2来作为Panel1展开或是折叠的控制panel.而Label1用来显示Panel1展开或者是折叠状态。这里需要注意一点就是Panel1中的文本是如何取得:
没错,如上图所示,是通过GetContentFillerText()方法来获得。也就是在default.aspx文件的后台代码cs文件中写着,如下图:
/// <summary>
/// default.aspx页面的GetContentFillerText
/// </summary>
/// <returns></returns>
public string GetContentFillerText()
{
return
"ASP.NET AJAX is a free framework for building a new generation of richer, more interactive, highly personalized cross-browser web applications. " +
"This new web development technology from Microsoft integrates cross-browser client script libraries with the ASP.NET 2.0 server-based development framework. " +
"In addition, ASP.NET AJAX offers you the same type of development platform for client-based web pages that ASP.NET offers for server-based pages. " +
"And because ASP.NET AJAX is an extension of ASP.NET, it is fully integrated with server-based services. ASP.NET AJAX makes it possible to easily take advantage of AJAX techniques on the web and enables you to create ASP.NET pages with a rich, responsive UI and server communication. " +
"However, AJAX isn't just for ASP.NET. " +
"You can take advantage of the rich client framework to easily build client-centric web applications that integrate with any backend data provider and run on most modern browsers. "+
"APS.NET AJAX是一个免费的能够基于它创建一个丰富的,动态的和更加人性化的跨浏览器的平台。这种新的Web应用程序的开发技术是基于ASP.NET 2.0平台基于服务器端的集成了跨浏览器的客户端的脚本库。"+
"也就是说ASP/NET AJAX在提供了基于服务器的页面同时也提供了基于客户端的开发平台。由于ASP>NET AJAX是一个ASP.NET的扩展,所以它能够很好的集成到.net提供的基于服务器的服务。"+
"与此同时,ASP.NET AJAX也使AJAX技术方面的应用到Web 开发,并且作出来很好的页面效果和很好的交互性.由于AJAX不只是ASP.NET可以使用,所以你可以使用其它很多的基于客户端的ajax库去创建一个可以再当今"+
"大部分浏览器运行的且可以和后台数据交互的Web应用程序。";
}
在aspx文件中添加完这些控件后,然后拖入一个本文章介绍的collapsiblePanel控件。然后设置它的属性:
<ajaxToolkit:CollapsiblePanelExtender ID="cpedemo" runat="server"
TargetControlID="Panel1"
ExpandControlID="Panel2"
CollapseControlID="Panel2"
Collapsed="true"
TextLabelID="Label1"
ImageControlID="Image1"
ExpandedText="(Hide Details...)"
CollapsedText="(Show Details...)"
ExpandedImage="collapse_blue.jpg"
CollapsedImage="expand_blue.jpg"
SuppressPostBack="true"
/>
这个比较简单就不罗嗦了。第一个例子就OK了,可以运行一下看结果了。
第二个例子介绍,我觉得如果你做一些数据库的数据展示,可能第二个例子很符合你的心意。
第一步: 右键刚才创建的站点名字,选择’Add New Item’,添加一个default2.aspx文件。
第二步:同样的方法创建一个style.css文件来存放样式代码。
第三步是新增一个images文件夹。
最后入下图所示:
然后我把图片和Css样式放进去。补贴代码了,你可以下载代码看看。
我们创建的这个页面将会使用三个collapsiblePanel,分别来显示一个Introduction, 一个employeelist和employdetail信息。
第四步我们开始添加default2.aspx文件中需要用到的控件。首先需要放入个scriptmanager控件。为了实现异步数据传输放入一个updatePanel,接着放入三个collapsiblePanel控件。如下图:
下面是三个collapsiblePanel的详细代码,因为第一个例子已介绍的很详细了,这里就不多少了,如果你看不明白可以留言给我。
<cc1:CollapsiblePanelExtender ID="cpeIntroduction" runat="server" TargetControlID="panelContentIntroduction"
ExpandControlID="panelTitleIntroduction" CollapseControlID="panelTitleIntroduction" Collapsed="false"
ImageControlID="imgBackgroundIntroduction" ExpandedImage="images/HightLightIntroduction.png"
CollapsedImage="images/HightLightIntroduction.png">
</cc1:CollapsiblePanelExtender>
<cc1:CollapsiblePanelExtender ID="cpeEmployeeList" runat="server" TargetControlID="panelContentEmployeeList"
ExpandControlID="panelTitleEmployeeList" CollapseControlID="panelTitleEmployeeList" Collapsed="true"
ImageControlID="imgBackgroundEmployeeList" ExpandedImage="images/HightLightEmployeeList.png"
CollapsedImage="images/BackgroundEmployeeList.png" SuppressPostBack="True" >
</cc1:CollapsiblePanelExtender>
<cc1:CollapsiblePanelExtender ID="cpeEmployeeDetail" runat="server" TargetControlID="panelContentEmployeeDetail"
ExpandControlID="panelTitleEmployeeDetail" CollapseControlID="panelTitleEmployeeDetail" Collapsed="true"
ImageControlID="imgBackgroundEmployeeDetail" ExpandedImage="images/HightLightEmployeeDetail.png"
CollapsedImage="images/BackgroundEmployeeDetail.png" SuppressPostBack="True">
</cc1:CollapsiblePanelExtender>
完成collapsiblepanel控件的设置后,添加一个table然后为table添加三行,每一行包含两个panel,而每一行的两个panel将会一个作为折叠展开的panel,一个作为控制panel.
我们这里第四个panel里面还用到了一个DataGrid来进行数据绑定:
后台绑定代码:C#:
还有一些后台代码用来给datagrid的每列绑定数据。可以下载下来自己看。另外要注意修改数据库连接字符串,connectstring.
OK。到这里就完成了两个例子的编写。
5. SourceCode and LayOut.
先看第一个例子的最终效果:
第二个例子的效果:
最后再加一步是sql数据的准备:
先去执行: Create database AdvertureWorks
/****** Object: Table [dbo].[Employee] Script Date: 2009-6-21 1:18:43 ******/
if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[Employee]') and OBJECTPROPERTY(id, N'IsUserTable') = 1)
drop table [dbo].[Employee]
GO
/****** Object: Table [dbo].[Employee] Script Date: 2009-6-21 1:18:44 ******/
CREATE TABLE [dbo].[Employee] (
[EmployeeID] [int] NOT NULL ,
[NationalIDNumber] [ntext] COLLATE Chinese_PRC_CI_AS NOT NULL ,
[ContactID] [int] NOT NULL ,
[LoginID] [ntext] COLLATE Chinese_PRC_CI_AS NOT NULL ,
[ManagerID] [int] NULL ,
[Title] [ntext] COLLATE Chinese_PRC_CI_AS NOT NULL ,
[BirthDate] [smalldatetime] NOT NULL ,
[MaritalStatus] [nvarchar] (1) COLLATE Chinese_PRC_CI_AS NOT NULL ,
[Gender] [nvarchar] (1) COLLATE Chinese_PRC_CI_AS NOT NULL ,
[HireDate] [smalldatetime] NOT NULL ,
[SalariedFlag] [smallint] NOT NULL ,
[VacationHours] [smallint] NOT NULL ,
[SickLeaveHours] [smallint] NOT NULL ,
[CurrentFlag] [smallint] NOT NULL ,
[rowguid] [uniqueidentifier] NOT NULL ,
[ModifiedDate] [smalldatetime] NOT NULL
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
GO
要插入表的数据:
14417807 1209 16 Production Technician - WC60
253022876 1030 6 Marketing Assistant
509647174 1002 12 Engineering Manager
112457891 1290 3 Senior Tool Designer
480168528 1009 263 Tool Designer
24756624 1028 109 Marketing Manager
309738752 1070 21 Production Supervisor - WC60
690627818 1071 185 Production Technician - WC10
695256908 1005 3 Design Engineer
912265825 1076 185 Production Technician - WC10
你也可以自己造数,这个无所谓啦。