第3章Ajax ToolKit的使用 AJAX 工具箱（Control Toolkit）是在微软的倡导下采用”开源”的方式，由各个“社区”（Communities）的开发人员或业余爱好者共同进行开发,并且用最快的速度发布,以便更广泛地发动群众参与,并吸取群众智慧。
目前已经发布的比较成熟的成果四十多个，微软还将不断发布新成果（预计每两个月发布一次）。
这些成果中有的是浏览器端控件，也有的是服务器端控件，有的是对原有控件功能的增强，也有的是独立的新控件。
3.1安装 AJAX Control Toolkit控件为了使用 AJAX 的Ajax Control Toolkit控件，需要下载并安装相关控件，步骤如下：1.下载并解压Toolkit控件选择下列URL: /releases/view/33804下载,并将下载的文件解压到指定的目录中。
[注]：按照上面的url下载原来的版本（Original Ajax Control Toolkit）.请注意,在这里不要下载 Library Beta 0911。
因为这个版本只能适用于VS 2010版。
2.安装Toolkit控件安装的步骤如下：1）先创建一个网站，并打开一张网页；2）右击工具箱，然后在工具箱中建立一个新标签（Add Tag）,例如取名为“Ajax Control Toolkits”；3）右击该标签，选用“选择项目”（Choose Items）,并在打开的对话窗口右下方，通过“浏览按钮”（Browse）,在前面解压的目录中用鼠标双击“AjaxControlToolkit.dll文件”,最后按“确定”按钮，此时在网站的工具箱中将自动增加40多个Toolkit控件。
下面摘要介绍几个常用的Toolkit控件的使用方法。
需要时可以通过以下网站进一步学习其他控件的使用方法：/ajaxtoolkit/3.2 设计Accordion：可折叠面板Accordion是一个独立的控件. 它是英文＂手风琴＂的意思，代表这个控件能像手风琴那样折叠或展开．当一个列表中的项目很多，不便于阅读时，可以将列表项先归类到不同的面板中，并允许随时折叠或展开，阅读起来非常方便．网站中的＂工具箱＂中的控件本身就是用这种方式组织的．3.2.1 Accordion的嵌套结构使用Accordion的关键是，将文档正确地归类并组织成嵌套的结构．１．控件的嵌套结构假定给三个面板进行折叠或展开，其嵌套的代码如下：<form id="form1" runat="server"><div><asp:ScriptManager ID="ScriptManager1" runat="server" /><asp:Accordion ID="Accordion1" runat="server"><Panes><!—第一块面板开始-< asp:AccordionPane ID="AccordionPane1" runat="server"><Header><a href="" onclick="return false">第一页</a></Header><Content><p> 这是第一块面板</p></Content></asp:AccordionPane><!--第二块面板开始→<asp:AccordionPane ID="AccordionPane2" runat="server"><Header><a href="" onclick="return false">第二页</a></Header><Content><p> 这是第二块面板</p></Content></asp:AccordionPane><!--第三块面板开始→<asp:AccordionPane ID="AccordionPane3" runat="server"><Header><a href="" onclick="return false">第三页</a></Header><Content><p> 这是第三块面板</p></Content></asp:AccordionPane></Panes></asp:Accordion></div></form>结果显示如下：代码中需要强调四个问题：１．每个应用Ajax的网页都要首先放入一个ScriptManager控件，其作用主要是当网页打开时将相关的JavaScript代码从服务器送到浏览器，否则控件无法运行．２．各面板的代码都被嵌入到Accordion控件中，每一块面板用AccordionPane控件表示．控件中包括两个字段：<Header></Header>与<Content></Content>前者用于撰写标题；后者撰写实际内容．３．各个面板的Header中用以下代码来实现折叠和展开的操作：<Header><a href="" onclick="return false">第＊页</a>属性标签名描述SelectedIndex 该控件初次加载时展开的AccordionPane面板的索引值HeaderCssClass 该Accordion中包含的所有AccordionPane面板的标题区域所应用的CSS ClassContentCssClass 该Accordion中包含的所有AccordionPane面板的内容区域所应用的CSS ClassAutoSize 在展开具有不同高度的AccordionPane面板时，该Accordion的总高度的变化方式。
可选如下3个值：r None：该Accordion将随着当前展开的AccordionPane面板的高度自由伸长/缩短r Limit：该Accordion将随着当前展开的AccordionPane面板的高度自由伸长/缩短，不过最高不会超过Accordion的Height属性设定值。
若是其内容高度超过了Height属性设定值，则将自动显示滚动条r Fill：该Accordion的高度将固定为Height属性的设定值，不随当前展开的不同高度的AccordionPane面板而变化。
若是某个AccordionPane的内容高度超过了Height属性设定值，则将自动显示滚动条FadeTransitions 若该属性值设置为true，则在切换当前展开的AccordionPane面板时，将带有淡入淡出效果TransitionDuration 展开/折叠一个AccordionPane面板的过程所花费的时间，单位为毫秒FramesPerSecond 播放展开/折叠AccordionPane面板动画的每秒钟帧数DataSourceID 页面中某个DataSource控件的ID，用于通过数据绑定自动生成AccordionPane面板<Panes> 该标签内将包含一系列的<ajaxToolkit:AccordionPane>标签，即Accordion- Pane的声明，用来表示Accordion中包含的面板<HeaderTemplate> 在使用数据绑定功能自动生成AccordionPane面板时，该标签内将定义每个面板的标题区域中的内容模板<ContentTemplate> 在使用数据绑定功能自动生成AccordionPane面板时，该标签内将定义每个面板的正文区域中的内容模板２．Toolkit控件以及其层次关系如下：上述代码的显示结果如下：只要点击标题,该模板即可自动打开,其他模板则自动折叠.下面再介绍几个支持原有控件的新控件.这些控件都是用JavaScript语言开发的. 它们之中有的是为了改善原有控件的外貌,有的是给原有控件增添新功能.在 3.5中设置这些新控件的方法变得更加直观和方便.3.3 几个支持Button控件的toolkit首先要在网页的form标签下所有其他控件的前面中增添ScriptManager控件.增添一Button控件.然后右击该控件,在弹出的小窗口中选择“添加扩展程序”项,将打开另一个长型窗口.里面包括有多个支持Button控件的Tool Kit控件.情况如图所示:1.增加确认功能为了给按钮增加执行前的最后确认功能,用鼠标双击ComfirmButtonExtenter控件的图标,将自动生成一ToolKit控件,并将该控件的TargetControlID属性指向被支持的控件(这里就是指向Button1).然后可以根据需要在ConfirmText的属性中填写需要确认时的提示信息.这里填写的是”确定了吗?”.控件的代码如下:<asp:Button ID="Button1" runat="server" Text="Button" /><cc1:ConfirmButtonExtender ID="Button1_ConfirmButtonExtender" runat="server" ConfirmText="确定了吗？" Enabled="True" TargetControlID="Button1"></cc1:ConfirmButtonExtender>当程序运行中用鼠标单击Button时将弹出以下提示:2. 背景中增加阴影为了给控件后面增加阴影可以使用DropShadowExtender控件.该控件有几个重要的属性:TargetControlID:支持的对象;⏹Width:阴影的宽度,缺省为5像素;⏹Opacity:阴影的透明度,从0(完全透明)到1(完全不透明);⏹trackPosition;阴影是否随控件位置的变动而改变.3.4使用几个支持TextBox的控件1. 对输入类型进行过滤为了限制只允许输入某种类型的数据时,可以选用FilteredTextBoxExtender控件.该控件有一个关键属性: FilterType代表允许输入的数据类型,共包括4种类型.它们是:⏹小写字符(LowerCaseLetters);⏹大写字符(UpperCaseLetters);⏹数字(Numbers);⏹自定义(Custom)2. 用按钮增减输入的数字双击NumericUpDownExtender图标后,给控件填写(或修改)属性.几个关键的属性如下:⏹TargetControlID:指向被支持的控件;⏹Maximum: 最大值;⏹Minimum: 最小值;⏹RefValues: 一组由数字或字符串组成的枚举型变量；⏹Width: 被支持控件的宽度,缺省值为0.⏹Step: 步进，缺省为1。