AjaxToolKit--可折叠和展开Panel的介绍

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

 

你也可以自己造数，这个无所谓啦。

 

 

 

代码下载: http://download.csdn.net/source/1425371