Ajax Control Toolkit 34个服务器端控件.docx
《Ajax Control Toolkit 34个服务器端控件.docx》由会员分享,可在线阅读,更多相关《Ajax Control Toolkit 34个服务器端控件.docx(24页珍藏版)》请在冰豆网上搜索。
AjaxControlToolkit34个服务器端控件
1.Accordion
【功能概述】
Accordion可以让你设计多个panel并且一次只显示一个Panel.在页面上的显示效果就像是使用了多个CollapsiblePanels只不过每一次只展开其中一个CollapsiblePanel.Accordion控件内部包含了若干个AccordionPane,每一个AccordionPane的template里包括了对其Header和Content的定义。
我们可以在后台代码中通过SelectedIndex属性取得当前展开的哪一个Panel,还可以控制哪一个Panel展开。
经常可以见到类似的效果,比如QQ、Msn好友分类的折叠效果。
【细节】
(1)不要把Accordion放在Table中而又把FadeTransitions设置为True,这将引起布局混乱
(2)在AccordionPane模板中的Content中可以定义任何Web元素,表现的就像一个容器
(3)AccordionPane内容模板自动改变大小有三种AutoSizemodes:
None(推荐)Limit Fill
(4)$find('ctl00_ContentPlaceHolder1_MyAccordion_AccordionExtender')这里找到的是Behavior.什么是Behavior呢?
在AAjax框架中包含一组动作并完成一个功能.Accordion的一个Behavior就是淡入淡出.
找到Behavior的引用,behavior.set_FadeTransitions()behavior.get_FadeTransitions()的方式来实现具体某一个Behavior的访问和修改.
varbehavior=$find('ctl00_SampleContent_MyAccordion_AccordionExtender');这种写法是不好的,我们在自动测试的页面中发现了更好的写法:
varbehavior=$find("<%=MyAccordion.ClientID%>_AccordionExtender");
【代码示意】
function toggleFade() {
var behavior = $find('ctl00_ContentPlaceHolder1_MyAccordion_AccordionExtender');
if (behavior) {
behavior.set_FadeTransitions(!
behavior.get_FadeTransitions());
}
}
function changeAutoSize() {
var behavior = $find('ctl00_ContentPlaceHolder1_MyAccordion_AccordionExtender');
var ctrl = $get('autosize'); //这里找的是下拉列表控件,不是Behavior
if (behavior) {
var size = 'None'; // 这里顺便看看怎么使用Select
switch (ctrl.selectedIndex) {
case 0 :
behavior.get_element().style.height = 'auto';
size = AjaxControlToolkit.AutoSize.None;
break;
case 1 :
behavior.get_element().style.height = '400px';
size = AjaxControlToolkit.AutoSize.Fill;
break;
case 2 :
behavior.get_element().style.height = '400px';
size = AjaxControlToolkit.AutoSize.Limit;
break;
}
behavior.set_AutoSize(size);
}
if (document.focus) {
document.focus();
}
}
Accordion ID="MyAccordion" runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader"
ContentCssClass="accordionContent" FadeTransitions="false" FramesPerSecond="40"
TransitionDuration="250" AutoSize="None">
AccordionPane ID="AccordionPane1" runat="server">
1. Accordion
AccordionPane>
Accordion>
2.AlwaysVisibleControl
【功能概述】
AlwaysVisibleControl是一个简单的扩展控件可以让一部分内容浮动在页面上,当滚动页面或者改变浏览器大小时总是可见的。
它可以扩展任意一个A控件,并可按照要求设置水平竖直方向上的相对距离.
最多的应用是在线阅读的目录和不胜其烦的浮动小广告。
【细节】
(1) 避免控件闪烁,要扩展的控件要使用absolutelyposition
(2) HorizontalSide="Center"VerticalSide="Top"使用这个方式控制浮动的位置
(3) Varlabel=ocument.getElementById('ctl00_SampleContent_currentTime');这行代码我们可以使用更简单的方法:
varlabel=$get('ctl00_SampleContent_currentTime');
【代码示意】
代码示意:
AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1" HorizontalSide="Center" VerticalSide="Top" TargetControlID="Panel1" runat="server">
3.Animation
【功能概述】
28个控件种效果最酷的!
顾名思义实现动画效果。
它是一个插入式,可扩展的框架可以方便的为你的页面添加动画效果。
【细节】
请参考页面代码阅读下面的细节内容:
(1)Sys.UI.DomElement.getLocation(b)取得控件位置的函数,常用!
!
!
(2)动画分为两种:
AnimationAction后者的强大让我很兴奋
(3) 顺序执行的动画脚本
(4) 并发执行的动画脚本
(5)【Action】控制目标元素外观样式,属性--值的格式修改,一个元素可以应用多个StyleAction
(6)【Action】控件是否可用使用的方式跟上面是一样的,当前控件可省略AnimationTarget
(7)【Action】执行一段脚本的Action
(8)【Action】隐藏目标的控件
(9)【Action】设置透明度的Action
(10)【Animation】 淡入淡出
(11)【Animation】 控制目标元素的大小但是注意:
IfscaleFontistrue,thesizeofthefontwillalsoscalewiththeelement. Ifcenteristrue,thentheelement'scenterwillnotmoveasitisscaled.Itisimportanttonotethatthetargetmustbepositioned(i.e.absolutely)sothatsettingsitstop/leftpropertieswillchangeitslocationinorderforcentertohaveaneffect.
(12)【Animation】 脉搏跳动效果
(13)【Animation】 颜色渐变效果,设置起始结束颜色就可以
(14) 【Animation】改变元素的大小Action
(15)动画效果是在用户某一个动作发生的时候触发,触发的时机包括:
OnLoad OnClick OnMouseOverOnMouseOutOnHoverOverOnHoverOut
正式版的页面文件为动画脚本添加了注释更加清晰易懂.上面列出的是常用的一些动画效果,全部资料参见AnmationReference。
仔细阅读Animation的页面代码,其实我们已经提前触摸到了Xaml的编程风格。
AAjax之后的下一代WEB界面是WPF/E,WPF/E现在支持的是”javascript+Xaml”还不支持”C#+Xaml”。
下一代的WEBUI会是怎样的?
下一个版本的A会怎样安排Ajax的位置?
WPF/E会不会被整合在新版本的A中呢?
期待中……
【示意代码】
代码示意:
AnimationExtender ID="ae"
runat="server" TargetControlID="ctrl">
AnimationExtender>
4.AutoCompleteNEW!
!
!
【功能概述】
AutoComplete控件是对A文本框控件的扩展,当用户词汇前面的字母时以弹出区域的形式给出备选词。
这个功能的完成依赖于特定的WebService。
在正式版的AjaxControlToolkit中看到自动完成扩展控件有一种感觉:
它终于出现在了它应该出现的地方。
之前AutoComplete控件是在CTP版本中以核心组件的形式出现的,这个功能极为明确的控件被归类到核心组件,我还是比较迷惑。
正式版中它终于成为了一个扩展控件。
Google的自动完成功能,新浪网易等信箱的收件人自动完成功能是这个功能的成功应用。
【细节】
从Atlas的版本开始,AutoComplete的使用方法就没有太大的改变,只要注意:
(1)调用的WebService方法签名有要求:
[WebMethod]
publicstring[]GetCompletionList(stringprefixText,intcount){...}
(2)MinimumPrefixLength最短前缀字符数,就是说你至少要键入几个字符才会出现提示
5.CalendarNEW!
!
!
【功能概述】
Calendar同样是对文本框的扩展,当点击文本框的时候弹出日期选择选项。
现在的版本提供的功能已经和WinForm中的日期控件一样,可以通过点击日期选择,点击箭头在年月之间切换。
【细节】
(1)同样是对文本框的扩展,文本框获得焦点就会出现日期选择,样式是可以自定义的
(2)虽然一定是对文本框的扩展但是我们还是可以指定弹出按钮PopupButtonID,一旦这个值设定了,文本框获得焦点也不会弹出日期选择
(3)不需要把它放在UpdatePanel中
6.CascadingDropDown
【功能概述】
CascadingDropDown控件是对ASP.NETDropDownListcontrol的扩展,实现对一个DropDownList操作时其它DropDownList发生相应的变化。
这个功能的实现依赖于WebService。
【细节】
(1)如果使用Webservice方法签名必须符合下面的形式:
[WebMethod]
publicCascadingDropDownNameValue[]GetDropDownContents(
stringknownCategoryValues,stringcategory){...}
(2)在阅读代码的时候请关注:
Category属性。
官方说法ThenameofthecategorythisDropDownListrepresents实打开~/App_Data/CarsService.xml你就发现这是Xml的元素标签。
从这个角度我们就解决了为什么联动,即联动的本质;同时也明白了调用Service的参数约定。
【示意代码】
CascadingDropDown ID="CascadingDropDown1" runat="server" TargetControlID="DropDownList1" Category="Make" PromptText="Please select a make" LoadingText="[Loading makes]" ServicePath="CarsService.asmx" ServiceMethod="GetDropDownContents"/>
CascadingDropDown ID="CascadingDropDown2" runat="server" TargetControlID="DropDownList2" Category="Model" PromptText="Please select a model" LoadingText="[Loading models]" ServiceMethod="GetDropDownContentsPageMethod" ParentControlID="DropDownList1"/>
CascadingDropDown ID="CascadingDropDown3" runat="server" TargetControlID="DropDownList3" Category="Color" PromptText="Please select a color" LoadingText="[Loading colors]" ServicePath="~/CascadingDropDown/CarsService.asmx" ServiceMethod="GetDropDownContents" ParentControlID="DropDownList2"/>
另外页面上还有一段定义UpdatePanel的代码很典型,可以作为参考:
UpdatePanelID="UpdatePanel1"runat="server"UpdateMode="Conditional"RenderMode="inline">
LabelID="Label1"runat="server"Text="[Noresponseprovidedyet]"/>
AsyncPostBackTriggerControlID="DropDownList3"EventName="SelectedIndexChanged"/>
UpdatePanel>
7.CollapsiblePanel
【功能概述】
这个控件几乎在每一个页面上都出现了。
它是非常灵活的一个控件,可以扩展任何ASP.NETPanelcontrol。
在页面上轻松实现展开收缩效果。
这种效果我们最熟悉的恐怕就是XP的文件任务栏了。
【细节】
(1) CollapsiblePanel默认认为使用了标准CSSboxmodel早期的浏览器要!
DOCTYPE中设置页面为自适应方式提交数据renderedinIE'sstandards-compliantmode.
(2) 可以自动展开自动收缩Autoexpand="true"AutoCollapse="true"但是这两个本身是互斥的不能同时为True;如果设置了这两个属性其中一个为True就不要在设置Collapsed="True",这样就没有意义了。
(3) TextLabelID="Label1"这个属性有什么深意\高级的操作么?
我还在研究。
。
。
代码示意:
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"
OpenedText="Hide Details"
ImageControlID="Image1"
ExpandedImage="~/images/collapse.jpg"
CollapsedImage="~/images/expand.jpg"
ExpandDirection="Height"/>
8.ConfirmButton
【功能概述】
这个控件是对Button和