Atlas 学习之002：“CollapsiblePanelExtender”和“TextBoxWatermarkExtender”

 　　近日准备把“Atlas Control Toolkit”中的针对ASP.NET 2.0 控件的扩展工具系统地学习一遍，并把学习过程中遇见的问题和解决办法完整的记录下来，也算是学习心得吧！昨天已经学习了工具包中的“ToggleButtonExtender”工具（控件），感觉这些工具（控件）很酷，基本不用编写太多的代码，就可以实现很酷的功能，何乐而不为呢？一天学习一点，坚持下去，积累下去，相信会有所收获的！

　　好了，言归正传！今天学习了两个工具：“CollapsiblePanelExtender”和“TextBoxWatermarkExtender”，同样实现了很酷的功能，先来演示稍微简单一些的“TextBoxWatermarkExtender”工具。

　　1、打开“Visual Studio 2005”，新建网站、在“我的模板”下选择““Atlas”　Web　Site”、确定。

　　2、切换到“Default.aspx”的“设计”页面，拖拽一个　TextBox　控件，再在“Atlas Control Toolkit”中拖拽一个“TextBoxWatermarkExtender”控件（工具）。

　　3、选择那个　TextBox　控件，到属性中找到“行为”下面的“TextBoxWatermarkExtender”属性，双击它，在“WaterMarkText”属性中输入“在此输入你的姓名”，回车确定。保存所有文件。

　　4、切换到“Default.aspx”的“设计”页面，右击该页面，选择“在浏览器中查看”（或者直接按“Ctrl”+F5）运行一把，结果出来后应该是这样：页面中的文本框中已经有“在此输入你的姓名”的文字显示出来，用鼠标点击文本框，文字消失了，移开鼠标，文字又出现了，一旦在文本框中输入了任何字符文字，“在此输入你的姓名”的提示不再显示出来了。

　　5、实现该功能太简单了，没有写一行代码，以前简直是不可想象呀！

 

　　好，下面演示“CollapsiblePanelExtender”控件（工具）。

　　1、往“Default.aspx”的“设计”页面中拖拽一个“Panel”控件，设置其“ID”为“Panel1”（保持不变即可），往该“Panel”控件中拖拽一个“Image”控件，设置其“ID”为“Image1”（保持不变即可），设置其“ImageUrl”属性为下面的一个图片：

：expand.jpg，

 另外等会还需要另一个图片，在此一并传入：

：collapse.jpg

　　注意：需要把以上两个图片文件下载后拷贝到这个网站的根目录下。

　　2、再往“Default.aspx”的“设计”页面中拖拽一个“Panel”控件，命名其“ID”为“Panel2”，并把上面操作中用到的那个TextBox　控件拖拽进该“Panel”控件里。

　　3、在“Atlas Control Toolkit”下拖拽一个“CollapsiblePanelExtender”控件（工具）到“Default.aspx”的“设计”页面中。

　　4、选定“Panel1”控件，点击“右键”选择“属性”，在“行为”下选择“CollapsiblePanelExtender”属性，下面挨个设置其属性：　“CollapseControlID”属性设置为“Panel1”，　在“CollapsedImage”属性栏输入“expand.jpg”，　“ExpandControlID”属性设置为“Panel1”，　在“ExpandedImage”属性栏输入“collapse.jpg”，　“ImageControlID”属性设置为“Image1”。

　　5、注意：设置完所有属性后，切换到“Default.aspx”的“源”页面中，检查一下代码，确保所有控件的代码实在<form>和 </form>之间的，另外最重要的一点是：把“CollapsiblePanelProperties”中“TargetControlID”的属性由原来的“Panel1”改成　"Panel2"。

　　6、简单设置一下两个“Panel”控件的“BackColor”属性，要设置成不一样的，以示区别。

　　7、保存所有文件。最后的代码应该和下面差不多：

 

<% ... @ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"  %>

<% ... @ Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="cc1"  %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head  runat ="server" >
     < title > Untitled Page </ title >
</ head >
< body >
     < form  id ="form1"  runat ="server" >
         < atlas:ScriptManager  ID ="ScriptManager1"  runat ="server"   />
         < cc1:CollapsiblePanelExtender  ID ="CollapsiblePanelExtender1"  runat ="server" >
             < cc1:CollapsiblePanelProperties  CollapseControlID ="Panel1"  CollapsedImage ="expand.jpg"
                ExpandControlID ="Panel1"  ExpandedImage ="collapse.jpg"  ImageControlID ="Image1"
                TargetControlID ="Panel2"   />
         </ cc1:CollapsiblePanelExtender >
         < div >     
     < cc1:TextBoxWatermarkExtender  ID ="TextBoxWatermarkExtender1"  runat ="server" >
                 < cc1:TextBoxWatermarkProperties  TargetControlID ="TextBox1"  WatermarkText ="在此输入你的姓名"   />
             </ cc1:TextBoxWatermarkExtender >
         </ div >
         < asp:Panel  ID ="Panel1"  runat ="server"  Height ="20px"  Width ="251px"  BackColor ="#FFFFC0" >
         < asp:Image  ID ="Image1"  runat ="server"  ImageUrl ="~/expand.jpg"   /></ asp:Panel >
     < asp:Panel  ID ="Panel2"  runat ="server"  Height ="81px"  Width ="251px"  BackColor ="#FF8080" >
         < asp:TextBox  ID ="TextBox1"  runat ="server" >
         </ asp:TextBox >
     </ asp:Panel >            
     </ form >     
</ body >
</ html >

　　8、按“Ctrl”+F5　运行一把，结果出来后，点击第一个“Panel”，下面的“Panel”马上就消失了，再点击第一个“Panel”，下面的“Panel”又重新出现了，并且测试那个文本框，效果依旧，酷呀！

　　太简单了，从头到尾没有写一行代码，却实现了以前需要写很多代码才能实现的功能，就像操作"word"和"excel"一样，只需“设计”，不需“代码”，技术无极限呀，大家共同努力！