专注于技术，切不可沉湎于技术

本章主要介绍DropDownExtender的使用方法。以前要做一个带DropDownList的TextBox控件可是大费周章，脚本代码一大堆，而且还要兼顾和后台的交互，否则只能做静态的DropDownList。但现在有了DropDownExtender，一切烦恼迎刃而解。

第一步：建立Ajax Control Toolkit Website

本例子需要一个TextBox控件、N个LinkButton控件、一个DropDownExtender组件和一个UpdatePanel组件。把所有组件拖进设计界面后代码如下所示：

注意：以上代码有几个要点，第一、所有组件都要放在UpdatePanel的ContentTemplate里，这样做才能在TextBox1中显示所选择的值。如果大家不需要在TextBox1中显示选择的值，那么UpdatePanel中只需要放显示值的控件即可，TextBox1、Panel1和DropDownExtender都可以放在UpdatePanel外面。第二、Panel1一定要加Style="Visibility:hidden"，否则在Ajax.net脚本库完全加载完毕之前，Panel1会显示出来，产生闪烁的不良效果。

以下是CSS样式代码，大家参考一下：

第二步：设置DropDownExtender

DropDownExtender的设置非常简单，就两个属性，代码如下所示：

TargetControlID是指激活下拉菜单的控件ID，这里是TextBox1。DropDownControlID是指下拉菜单载体的控件ID，这里是Panel1。

第三步：编写后台代码

大家发现前面的LinkButton点击后都会执行一个叫OnSelect的函数，现在我们转到CS文件编写这个函数，代码很简单，如下所示：

该函数的意思是在TextBox1显示所选择的值。

OK，运行，效果如下图：

一般状态中TextBox1只是一个平凡的TextBox。

当用鼠标点击时，下拉菜单出现了。

选择完后菜单消失，所选择的值显示在TextBox1中。

结束：

本章主要介绍了DropDownExtender的使用方法。有了DropDownExtender，我们可以把DropDownList整合到很多控件上面，包括TextBox、Label、Panel等，大家可以自己试验一下。

本章介绍AutoCompleteExtender的使用方法。用过Google的朋友都会发现，当我们在搜索框输入关键字的时候，Google会自动列出相关关键字提示。那么用Ajax.net也能做到么？答案是：Of course!

第一步：建立AJAX Control Toolkit Website

本例子只需要一个TextBox控件和一个AutoCompleteExtender组件。拖进设计界面后代码如下所示：

第二步：建立WebService

要使用AutoCompleteExtender，我们要通过WebService传递数据。在解决方案资源管理器单击项目-〉添加新项-〉Web服务。我在这里使用了默认的名称，大家有需要自己改吧。

WebService.asmx的代码如下：

注意：加亮部分大家要自行添加。[System.Web.Script.Services.ScriptService]一定要加，它告诉.net runtime这个WebService被允许从客户端调用。另外System.Collections.Generic是List的命名空间，List可以理解成物件或类别的集合，我们可以根据特殊条件在List里找到我们所需要的值，是.net 2.0新增加的类。该函数的意思是产生三个随机字母，自动添加在输入字符串的后面。另外prefixText和count这两个参数名称要严格遵守拼写格式，原因以前已经介绍过了。

第三步：设置AutoCompleteExtender

具体设置代码如下： 

<ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"

        TargetControlID="TextBox1"

        CompletionSetCount="12"

        EnableCaching="true"

        MinimumPrefixLength="3"

        ServicePath="WebService.asmx"

        ServiceMethod="GetCompleteList">

</ajaxToolkit:AutoCompleteExtender>

TargetControlID是目标控件ID，这里是TextBox1。CompletionSetCount是指列表列出输入提示的数量。EnableCaching指是否启用缓存，建议启动。MinimumPrefixLength是指输入多少个字符后开始列出输入提示列表。ServicePath是指Web服务的文件名，这里是WebService.asmx。ServiceMethod是指调用Web服务的函数名，这里是GetCompleteList。

OK，运行！效果如下图：

结束：

本章介绍了AutoCompleteExtender的使用方法。在本例子中，我只是通过简单的算法产生随机字母并添加到输入字符串后面。这种方法实用性不大，建议大家在实际使用时自行编写更复杂的算法，让AutoCompleteExtender产生更实用的效果。

本章主要介绍CalendarExtender的使用方法。CalendarExtender组件比.net原来自带的Calendar控件效果更Cool，使用方法也丰富了很多。

第一步：建立AJAX Control Toolkit Website

为了演示CalendarExtender丰富的使用方法，本例子一共使用了两个TextBox控件、一个Image控件和两个CalendarExtender组件。我会通过两个TextBox演示CalendarExtender两种不同的使用方法。我们将以上控件都拖进设计界面，代码如下：

 当然我们还需要准备一个简单的样式表，让Calendar显得更漂亮，具体代码如下所示：

注意：以上样式套用了页面输出客户端后系统为Calendar自动生成的ID，大家不需要理解这部分代码，只需要按照相应的位置设置好风格就可以了。

第二步：设置CalendarExtender

由于我演示了CalendarExtender的两种用法，因此设置有两种，但差别不大，具体代码如下所示：

CalendarExtender1是最基本用法，我们直接把它的TargetControlID设为TextBox1，当TextBox1获得焦点时，CalendarExtender1就会自动展开，直到TextBox1失去焦点为止。而CalendarExtender2的用法有些特别，它比CalendarExtender1多了个PopupButtonID属性，值为Image1。它指我们可以通过点击Image1来激活CalendarExtender2控件，但选择完日期后，值还是返回到TargerControl即TextBox2那里。当选择完日期后，CalendarExtender2会自动消失。同时我们还定义了时间的显示格式，Format="yyyy-MM-dd"。

OK，运行，效果如下图：

点击TextBox1后CalendarExtender1自动展开。

点击Image1后CalendarExtender2会自动展开，选择完日期后CalendarExtender2会自动消失，并且日期的显示格式是我们所指定的格式。

结束：

本章主要介绍了CalendarExtender的使用方法。作为Ajax.net的日期控件，CalendarExtender还有很多很炫的功能，这需要大家自行研究一一发掘出来。

本章主要介绍HoverMenuExtender的使用方法。我们以前要做一个js下拉菜单会很麻烦，不但要写很多代码，而且写出来的代码不好管理，扩展性也很难做到很好。但现在我们有了HoverMenuExtender，一切都将迎刃而解，我们的口号是：不编码！

第一步：建立AJAX Control Toolkit Website

本例子只需要一个Panel控件、N个Linkbutton控件和一个HoverMenuExtender组件，把他们都拖进设计界面，代码如下所示：

在这里LinkButton1主要负责激活下拉菜单，而Panel1则是下拉菜单的载体。

完成控件布局后我们还需要写一个简单的样式，令界面更美观，具体代码如下：

注意：大家可以想象，既然Panel1是下拉菜单的载体，那么当菜单未被激活的时候，Panel1应该是隐藏着的，这些都通过ScriptManager来控制。但当页面第一次加载，Ajax.net的脚本库还没完全加载完毕的时候，Panel1就会处于短暂的失控状态。如果网速较慢，我们会发现Panel1会先出现一下，然后再隐藏起来，这会影响页面的美观。所以我们应该在Panel1的样式上加上visibility:hidden，让Panel1一开始就处于隐藏状态。

第二步：配置HoverMenuExtender

HoverMenuExtender同样是只需配置即可使用的组件，具体配置如下所示：

OffsetX和OffsetY是指菜单在当前对齐方式下所处位置的偏移距离，OffsetX越大，菜单向左偏得移越大，OffsexY越大，菜单向下偏移得越大，单位是像素。PopDelay是指菜单消失的延迟时间，单位是毫秒。TargetControlID是指激活菜单的控件ID，这里应该是LinkButton1。PopupControlID是指菜单载体的控件ID， 这里是Panel1。最后的PopupPosition是指菜单相对于激活控件对齐方式，大家按照需要选择。

OK，运行，效果如下图：

鼠标移开后，菜单消失。

结束：

本章主要介绍了HoverMenuExtender的使用方法。HoverMenuExtender令我们可以轻松制作下拉菜单，而无需编写大量脚本代码。由于我们可以从后台访问菜单项，这使我们可以轻松从数据库中取出数据，并制作成下拉菜单。本章只是一个比较粗陋的例子，如果大家想把下拉菜单做得更炫，那需要对HoverMenuExtender进行更复杂的设置并结合更复杂的CSS样式。

本章介绍TabContainer和TabPanel的使用方法，这两个是一套组件，两者结合使用，使用方法非常十分相当简单，我在这里简单演示一下。

第一步：建立Ajax Control Toolkit Website

这个例子我们只需要TabContainer和TabPanel组件，不需要其他控件。具体代码如下：

注意：TabPanel2多了HeaderTemplate标签，它的作用是丰富简单的HeaderText。另外TabPanel标签中还有OnClientClick等属性，能支持Javascript，大家自己挖掘一下。

OK，运行看一下效果。

选择标签后即可切换内容

注意：成功运行后我们看一下该页面的源文件，发现有如下代码：

<div id="TabContainer1_body">
  <div id="TabContainer1_TabPanel1">
   一大段内容A...<br />
                一大段内容A...<br />
                一大段内容A...<br />
                一大段内容A...<br />
                一大段内容A...<br />
  </div><div id="TabContainer1_TabPanel2" style="display:none;visibility:hidden;">
   一大段内容B...<br />
                一大段内容B...<br />
                一大段内容B...<br />
                一大段内容B...<br />
                一大段内容B...<br />
  </div><div id="TabContainer1_TabPanel3" style="display:none;visibility:hidden;">
   一大段内容C...<br />
                一大段内容C...<br />
                一大段内容C...<br />
                一大段内容C...<br />
                一大段内容C...<br />
  </div>
 </div>

这证明了所有内容都已输出到客户端，只是使用了JS暂时隐藏起来，所以大家在使用TabContainer和TabPanel的时候一定要注意性能，避免同时输出过多内容到客户端。

结束：

本章介绍了TabContainer和TabPanel的使用方法，基础用法很简单，但还有很多深度用法需要大家自行去挖掘，包括TabPanel之间的通讯问题等，有机会我也会作相关研究，和大家一起学习。

本章主要介绍DynamicPopulateExtender的使用方法。DynamicPopulateExtender提供了一种动态效果，能通过WebService或访问服务器端代码获取一段HTML文本，并替换掉目标控件上原来的内容。

第一步：建立AJAX Control Toolkit Website

为了方便解说，本例子只使用了很少的控件，包括：两个HtmlInputRadio控件，一个Panel控件和一个DynamicPopulateExtender组件。所有控件的设置如以下代码所示：

DynamicPopulateExtender的设置很简单，这里简单说明一下：TargetControlID是指目标控件的ID，这里是Panel1，说明运行后DynamicPopulateExtender会替换掉Panel1中的内容。ServiceMethod是指Web服务中的函数，该函数名是GetHtml，稍后我会给出它的代码。UpdatingCssClass是当DynamicPopulateExtender正在获取内容时Panel1所套用的CSS样式，这个属性能使Panel1的界面更友好而不只是变得一片空白。注意：还有一个很重要的属性是ServicePath，由于我没有新建WebService来写GetHtml函数，所以这里不需要指定，但如果大家需要调用单独的WebService文件时，这个属性是需要指定的，值是所调用的WebService的全名，例如：WebService.asmx。

设置完所有控件之后我们还要编写相关CSS样式。大家可以参考如下代码：

 大家要注意一下以上两个CSS样式的使用位置。一个是Panel1正常状态时的CSS样式，另一个是读取数据时的CSS样式。

第二步：编写Javascript

在以上代码中我们能看到两个Radio都调用了一个叫updateContent的Js函数，现在我列出该函数的代码：

注意：以上代码调用了Ajax.net的JS函数库，因此该函数一定要放在<asp:ScriptManager/>标签以下，否则会抛异常。"dp1"是指DynamicPopulateExtender的BehaviorID属性，大家也可以把DynamicPopulateExtender的ID属性设为"dp1"而删掉BehaviorID属性，效果是一样的。

这段JS的意思是先找到DynamicPopulateExtender组件，然后执行它的populate方法。而Sys.Application.add_load就相当于body里的onload，有关Ajax.net的JS函数库在这里不再作详细解析，大家自行测试一下。

第三步：创建WebService

这里我们要创建GetHtml函数，为了方便我直接在页面文件上创建该函数，具体代码如下：

这段代码很简单，根据不同的参数返回一段话的中文版本或英文版本，为了让效果更明显，我让程序延迟了2秒再执行。

注意：GetHtml的参数名contextKey和参数的数量都是不可修改的，它是AjaxControlToolkit的规定签名格式，因此DynamicPopulateExtender的ServiceMethod属性只需要定义为GetHtml，而不需要填写参数。如果要修改该名称则必须重新编译AjaxControlToolkit的Dll文件，否则会返回500错误。但GetHtml这个函数名则是可以随意更改的，大家一定要注意！

OK，运行，效果如下图：

选择“英文”后，Panel1进入Updating状态。

成功读取数据后Panel1又回到了正常状态。

结束：

本章主要介绍了DynamicPopulateExtender的使用方法。大家可以自行编写更复杂的WebService，让DynamicPopulateExtender发挥更好的作用。同时再次提醒大家一定要注意AjaxControlToolkit的规定签名格式的问题，不要随意更改指定参数名称和参数数量。

本章主要介绍CollapsiblePanelExtender的使用方法。CollapsiblePanelExtender和上一章的Accordion有些类似，也是可以控制指定区域的缩放。但Accordion是管理一个区域群，群中每个区域之间能够产生互动，关闭一个能打开另一个，而CollapsiblePanelExtender主要是控制单个区域的缩放。

第一步：建立AJAX Control Toolkit Website

在这个例子里我们主要需要两个Panel控件和一个CollapsiblePanelExtender组件，另外还有一些辅助控件，这里就不一一列出了。如下所示：

以上是Panel1的代码，Panel1是控制区域，它负责控制Panel2的状态。在Panel1里我们定义了一个Image控件和一个Label控件。这两个控件能根据Panel2的状态显示不同的图片和文字。

注意：这里一定要用服务器控件，否则CollapsiblePanelExtender会找不到相关控件。

Panel2的内容只要一篇文章就可以了，这里就不再列出。

附上相关CSS样式：

注意：上面的CSS样式中，collapsePanel是Panel2使用的样式，在这个样式中我们不能指定高度，否则Panel2就不能正常显示和隐藏了，大家可以自行测试。

第二步：设置CollapsiblePanelExtender

由于要设置的属性太多，请参考如下代码：

CollapseControlID是指控制隐藏的控件ID，ExpandControlID是指控制显示的控件ID，由于本例子只有一个控制区域，因此它们的值都是Panel1。如果大家有两个控制区域，可以分别指定它们的值。TagetControlID是指需要控制的目标控件ID，这里是Panel2。ImageControlID是指显示状态图片的控件ID，这里是Image1，如果没有可以不指定。TextLabelID是指显示状态文字的控件ID，这里是Label1，如果没有也可以不指定。接下来的CollapsedText、ExpandedText、CollapsedImage和ExpandedImage就是指定不同状态下所显示的文字和图片了，大家根据实际情况设置。

设置完毕，运行！效果如下图：

点击“隐藏内容”后下面的文章就隐藏起来了。

结束：

本章主要介绍了CollapsiblePanelExtender的使用方法。CollapsiblePanelExtender和Accordion有些类似，但相比Accordion，CollapsiblePanelExtender的效果有点单调，但使用比Accordion简单，能通过设置显示不同状态的图片和文字，大家在选择的时候一定要从实际出发，选择合适的组件。

本章介绍AJAX Control Toolkit中的Accordion组件的使用方法。Accordion翻译成中文是可折叠的意思，如果你想在一个页面里显示多篇文章，但又不想分页或把页面撑得太长，那么你就应该用Accordion了。它能折叠或展开文章区域，维持页面美观的同时还能增强用户体验。

第一步：设置Accordion组件

在这个例子里我们只需要一个Accordion组件、N个AccordionPane组件以及N篇演示文章。首先我们先拖进一个Accordion组件，并作相关设置。具体设置如下。

ContentCssClass是指内容区域的样式名，而HeaderCssClass是指头部区域的样式名，具体的样式大家自行定义，稍后我也会给出我自己用的样式。FadeTransitions是指伸缩内容区域时是否播放渐变效果，FramesPerSecond是指伸缩内容区域的动画桢数，桢数越大动画就越流畅。TransitionDuration是指伸缩区域所需要的时间，单位是毫秒，时间越大，伸缩区域所需要的时间就越长。

最后附上我自己写的样式表：

第二步：添加AccordionPane

设置好Accordion之后我们可以添加内容了。注意所有内容必须在<Panes>标签内，每篇内容对应一个AccordionPane组件。本例子一共有四篇文章，所以我用了四个AccordionPane组件，所有代码如下：