AJAX控件整理完整版.docx

AJAX控件整理完整版.docx

《AJAX控件整理完整版.docx》由会员分享，可在线阅读，更多相关《AJAX控件整理完整版.docx（17页珍藏版）》请在冰点文库上搜索。

AJAX控件整理完整版

本文由冬_寒季贡献

doc文档可能在WAP端浏览体验不佳。

建议您优先选择TXT，或下载源文件到本机查看。

AJAX

确实让我没有想到的是AJAX居然是在2007年才真正走上了历史的舞台,而且是伴随着一系列的新技术而来.其实,真正让我感叹的不是因为它是一种"新"的技术,而是发展之迅速.所以,学习AJAX是相当有必要的,因为它在微软Web开发技术占据着重要的位置:

微软Web开发技术:

A代码在后端运行,可轻松连接数据库,访问服务器,让用户动态交换数据,动态产生网页.Silverlight代码在浏览器端通过SilverlightPlayer运行,可利用Xaml代码生成互动的矢量对象和动画,并通过Javascript控制AAJAX在前后端都有代码,可集成前后端的开发技术（Javascript和A）,实现两端之间的非同步通信,数据交换和协作.

当然,上面估计是针对Silverlight1.0或者1.1说的,如今已经发展到4.0,而且WPF似乎也有心往WEB插足,而且是相当容易的,因为Silverlight本来就是其一个子集.其实,我还在考虑一个问题,那就是.NET中的另一个WCF,似乎与AJAX"有染",估计在未来的发展也不能小觑.下面开始愉快的学习之旅.首先介绍由VS提供的AJAX控件列表:

ScriptManager:

最常用的一个,而最"没用（不需要你用）"的一个.ScriptManagerProxy:

在编写自定义控件的时候使用.Timer:

定时回发.UpdatePanel:

指定内容为更新区域.UpdaeProgress:

显示更新进度条.显然,只有这几个控件是不能满足我们的要求的,下面介绍AJAXControlToolkit中的控件列表:

Accordion:

折叠菜单目录AlwaysVisibleControlExtender:

始终显示的控件-类似悬浮窗口AnimationExtender:

动画效果控件AutoCompleteExtender:

自动完成功能Calendar:

日历控件CascadingDropDown:

级联菜单控件CollapsiblePanel:

折叠面板控件ConfirmButtonExtender:

确认按钮DragPanelExtender:

可拖拽面板DropDownExtender:

下拉菜单DropShadowExtender:

阴影控件DynamicPopulateExtender:

动态填充控件FilteredTextBoxExtender:

过滤控件

HoverMenuExtender:

菜单控件MaskedEditExtender:

编辑验证控件ModalPapupExtender:

具有关机效果的弹出式控件MutuallyExclusiveCheckBoxExtender:

互斥复选框控件NoBot:

反BOT控件NumericUpDownExtender:

加减数值控件PagingBulletedListExtender:

带项目符号的列表控件PasswordStrength:

密码强度提示控件PopupControlExtender:

弹出式控件Rating:

等级控件ReorderList:

可拖拽数据控件ResizableControlExtender:

可伸缩控件RounderCornerExtender:

锐化边角控件SilderExtender:

滑块控件TabContainer:

选项卡控件TextBoxWatermarkExtender:

文本框水印控件ToggleButtonExtender:

个性化按钮控件UpdatePanelAnimationExtender:

局部刷新动画控件ValidatorCaloutExtender:

验证提醒控件事实上ControlToolkit当中的控件我只用过ConfirmButton和Calendar这两个之外,好像别的都没用过,这次主要的目的就是熟悉其他控件的使用.估计有一些控件也没有多大用途,在以后估计也没什么地方会用到,所以我都不用担心,你还担心什么呢?

呵呵,继续,GO!

1.AutoComplete自动完成控件:

功能:

该控件实现自动提示,相信大家在上网的时候都遇到过在填写TextBox内容的时候,会自动提示以前输入过的数据,这个控件就是这样的功能.属性:

1.TargetControlID:

指定要实现提示功能的控件;2.ServicePath:

WebService的路径,提取数据的方法是写在一个WebService中的;3.ServeiceMethod:

写在WebService中的用于提取数据的方法的名字;4.MinimumPrefixLength:

用来设置用户输入多少字母才出现提示效果;5.CompletionSetCount:

设置提示数据的行数;6.CompletionInterval:

从服务器获取书的时间间隔,单位是毫秒.似乎去100很合适呵呵,在使用这个控件的时候,不适用控件之前就有自动提示功能,使用了之后反而没有了,而且添加控件之后会出现一个编译错误.需"AddAutoCompletepagemethod"添加自动完成页的方法.如果采用这种方法,可以在该页的.cs文件中创建如下代码:

[System.Web.Services.WebMethodAttribute（）,System.Web.Script.Services.ScriptMethodAttribute（）]//由于要在客户端调用web服务器publicstaticstring[]GetCompletionList1（stringprefixText,intcount,stringcontextKey）

{returndefault（string[]）;}

然后,我们就可以使用一个文件来存放要自动提示的字符串,编写代码访问并返回.当然,一种更常用的方法是单独建立一个Web服务,在里面添加该方法.需在其前面添加[System.Web.Script.Services.ScriptService]在网上摘录的一个该方法的完整代码如下:

[System.Web.Script.Services.ScriptService]publicclassAutoComplete:

System.Web.Services.WebService{publicAutoComplete（）{//Uncommentthefollowinglineifusingdesignedcomponents//InitializeComponent（）;}privatestaticstring[]autoCompleteWordList=null;在[WebMethod]//这里就是提取自动提示字符串的方法,ServeiceMethod中调

用

publicstring[]GetCompleteList（stringprefixText,intcount）{if（autoCompleteWordList==null）{string[]temp=File.ReadAllLines（Server.MapPath（"~/App_data/CompleteList.txt"））;Array.Sort（temp,newCaseInsensitiveComparer（））;autoCompleteWordList=temp;}intindex=Array.BinarySearch（autoCompleteWordList,prefixText,newCaseInsensitiveComparer（））;if（index<0）{index=~index;}intmatchingCount;for（matchingCount=0;matchingCount

autoCompleteWordList[index+matchingCount].StartsWith（prefixText,StringComparison.CurrentCultureIgnoreCase））{break;}

}string[]returnValue=newstring[matchingCount];if（matchingCount>0）{Array.Copy（autoCompleteWordList,index,returnValue,0,matchingCount）;}returnreturnValue;}

2.FilteredTextBox过滤控件

功能:

过滤文本框中指定的内容,用于防止用户输入不合法的字符.

属性:

1.TargetControlID:

被控制文本的ID2.FilterType:

过滤类型,提供4中类型.可以使用","间隔设置多种类型3.ValidChars:

FilterType的属性包含当"Custom"时,此属性有效,表示有效的字符.

3.MaskedEdit编辑验证控件

MaskedEditValidatorMaskedEditExtender

功能:

用来设置文本框显示时的一些格式.

属性:

1.Mask:

类似正则表达式2.MessageValidatorTip:

是否提示验证信息3.OnFocusCssClass:

当被验证的控件获取焦点时,应用的样式4.OnInvalidCssClass:

当被验证的控件验证失败时,应用的样式5.MaskType:

验证类型,提供四种:

None,Number,Date和Time

6.InputDirection:

文本输入方向7.AcceptNegative:

是否接受负数的符号"-"8.DisplayMoney:

显示金额符号的位置9.PromptCharacter:

未输入完时的提示字符.一般包含两个控件同时使用!

另一个参考验证控件.

4.PasswordStrength密码强度提示控件

功能:

在用户输入密码的时候,密码在文本框后面会有一个提示,说明用户输入密码的强度.

属性:

DisplayPosition:

提示信息显示的位置

StrengthIndicatorType:

强度提示方式,文本和进度条

PreferredPasswordLength:

最合适的密码长度

PrefixText:

提示信息的前缀

TextCssClass:

提示信息的样式

MinimumNumbericCharacters:

密码中最少要包含的数字个数

MinimumSymbolCharacters:

密码中最少要包含的特殊字符个数

RequiresUpperAndLowerCaseCharacters:

是否要求大小写混合

TextStrengthDescriptions:

密码强度的提示信息内容,最少2个,最多10个,排列顺序由弱到强

CalculationWeightings:

4种类型的衡量标准

BarBorderCssClass:

提示进度条样式

HelpStatusLabelID:

帮助信息ID

HelpHandPosition:

帮助信息的位置

5.TextBoxWatermark文本水印控件

功能:

当文本中没有数据时,可以使用非常特殊的样式填充在文本框中,当用户开始输入内容时,这些特色样式自然消失.当用户没有输入内容,文本框失去焦点后,又出现该样式.

属性:

WatermarkText:

水印效果提示的文本

WatermarkCssClass:

水印效果应用的样式

6.ValidatorCallout验证提醒控件

功能:

验证未通过时,弹出一个类似模式对话框的小窗口,提醒用户发生的错误.更加醒目的验证方式!

属性:

Width:

弹出式信息的宽度

WarmingIconImageUrl:

弹出信息中的经过图片地址

CloseImageUrl:

弹出信息中使用的关闭图片地址

7.HoverMenu菜单控件

功能:

使一些菜单该出现时才出现,当鼠标移动到指定地点时不会影响其他元素

属性:

PopupControlID:

作为弹出式菜单的控件ID

HoverCssClass:

鼠标滑过时的样式

PopupPosition:

弹出式菜单坐在的位置

OffsetX:

菜单举例目标控件的位置--横坐标

OffsetY:

纵坐标

PopDelay:

弹出菜单的延迟时间

实例:

实例:

HoverMenu控件可实现简单的弹出菜单效果

参考网站:

用Repeater控件从数据库中取出数据,在ItemTemplate模板中使用PopupControl控件,PopupControlID指向一个弹出式菜单面板,这个弹出式面板我由Panel改为HyperLink.这里出现一个小问题,就是鼠标放在弹出式面板上,弹出式面板会跳动,不是呆在鼠标指定的那个地方.

8.PopupControl弹出式控件

功能:

弹出任意类型的控件,不管是服务器控件还是Html控件

属性:

弹出式菜单属性均相似,见上.

9.Accordion（手风琴）折叠菜单目录

功能:

将一组功能相似,任务相同的内容放在不同的选项卡中,然后通过选项卡的Header实现各组内容的查看.

我们可以逐一地编写Accordion中的AccordionPane控件,每个AccordionPane控件即代表一个可折叠的面板.还可以使用数据绑定的方式,分别为其指定标题和内容区域的绑定模板以及数据源,让ASP.NET中的数据绑定为我们自动生成其中的若干个折叠面板.Accordion还能够把当前正处于展开状态的面板自动记录下来,并在页面回送之后恢复其提交前的样式.属性:

SelectedIndex:

在Accordion中设计的多个Pane,此属性用来判断当前选择的是哪个Pane

HeaderCssClass:

AutoSize:

设计Accordion中Pane的显示方式,主要有3种:

None,Limit和Fill;None可以无限制收缩,Limit限制内容的高度,超出部分出现滚动条,Fill表示和设置的高度一致,超出部分不会显示.

FadeTransitions:

是否使用透明样式的褪色特效

TransitionDuration:

特效时间间隔,单位为毫秒

FramesPerSecond:

帧/秒,折叠特效的速度

Panes:

是Accordition内容所在,其包装必须是"AccordionPane"控件,可以是多个Panes和AccordionPane表声明Accordion控件时的常用属性标签属性标签名SelectedIndexHeaderCssClassContentCssClassAutoSize描述

该控件初次加载时展开的AccordionPane面板的索引值该Accordion中包含的所有AccordionPane面板的标题区域所应用的CSSClass该Accordion中包含的所有AccordionPane面板的内容区域所应用的CSSClass在展开具有不同高度的AccordionPane面板时,Accordion的该总高度的变化方式.可选如下3个值:

rNone:

该Accordion将随着当前展开的AccordionPane面板的高度自由伸长/缩短rLimit:

该Accordion将随着当前展开的AccordionPane面板的高度自由伸长/缩短,不过最高不会超过Accordion的

Height属性设定值.若是其内容高度超过了Height属性设定值,则将自动显示滚动条rFill:

该Accordion的高度将固定为Height属性的设定值,不随当前展开的不同高度的AccordionPane面板而变化.若是某个AccordionPane的内容高度超过了Height属性设定值,则将自动显示滚动条FadeTransitionsTransitionDurationFramesPerSecondDataSourceID

若该属性值设置为true,则在切换当前展开的AccordionPane面板时,将带有淡入淡出效果展开/折叠一个AccordionPane面板的过程所花费的时间,单位为毫秒播放展开/折叠AccordionPane面板动画的每秒钟帧数页面中某个DataSource控件的ID,用于通过数据绑定自动生成AccordionPane面板该标签内将包含一系列的标签,即Accordion-Pane的声明,用来表示Accordion中包含的面板在使用数据绑定功能自动生成AccordionPane面板时,该标签内将定义每个面板的标题区域中的内容模板在使用数据绑定功能自动生成AccordionPane面板时,该标签内将定义每个面板的正文区域中的内容模板

需要注意的是FadeTransitions和FramesPerSecond属性.自然,将FadeTransitions设置为true将让面板展开/折叠的过程显得非常酷,且将FramesPerSecond属性值设置得比较高也会让展开/折叠的动画变得更加平滑,但这样也同时会加重客户端程序执行时的负担,我们应该综合考虑各种情况合理地配置这两个属性.一般来讲,若是Accordion的大小适中,且其中也没有太多的AccordionPane面板,那么可以将FadeTransitions设置为true（即显示淡入淡出效果）,并将FramesPerSecond设置为40（即每秒40帧）左右,让动画效果更加流畅眩目.而若是对于较大的,甚至全屏的Accordion,或是其中包含了许多个复杂的AccordionPane面板,那么就应该将FadeTransitions设置为false,且将FramesPerSecond设置为25左右,尽可能地避免对客户端执行效率产生过多的影响.与DataSourceID属性相关的还有DataSource和DataMember属性,分别表示将绑定到该控件上的数据源（一般在代码中设置）和DataSource中数据成员的名称.DataSourceID,DataSource和DataMember属性是ASP.NET中每一个支持模板化数据绑定的控件都包含的.

DropDown下拉菜单控件功能:

为任意控件指定下拉菜单,这个下拉菜单必须存在.

属性:

略

为按钮等控件执行下拉列表实现快速选择.

10.CollapsiblePanel折叠面板控件

功能:

折叠面板就是实现一个Panel的显示和隐藏,可以定义Panel的样式.属性:

CollapsedSize:

折叠后的尺寸

ExpandedSize:

伸展后的尺寸Collapsed:

默认打开页面时,Panel是否处于折叠状态

ScrollContents:

是否在Panel中显示滚动条

ExpandDirection:

伸展方向,水平或垂直

CollapseControlID/ExpandControlID:

该属性指定控制折叠/扩展的控件ID.d）TextLabelID:

指定一个控件,可以在扩展或折叠Panel时显示CollapsedText/ExpandedText中的内容.CollapasedText/ExpandedText:

Panel折叠/扩展时的文本.Collapsed:

指定页面导入时Panel是折叠还是扩展.ImageControlID:

指定一个控件,在扩展时显示ExpandedImage中的图像;在折叠时显示CollapsedImage中的图像.ExpandedImage/CollapsedImage:

在扩展/折叠时显示不同的图像.SuppressPostBack:

禁止回传.将Panel中的内容显示或隐藏.使用两个Panel,一个Panel用于扩展控件的ID,另一个用于折叠控件的ID.

11.DragPanel可拖曳面板控件

功能:

这是一个简单的Ajax控件,不支持拖拽前和拖拽后的事件操作属性:

DragHandleID:

实现拖拽的控件,即当拖拽DragHandleID时,实际上移动的是TargetControlID

这个控件最好配合样式表使用.

12.Tabs选项卡控件

功能:

在C/S中,有各种选项卡控件,B/S中没有,要在一个页面显示多组内容,可以通过CSS样式来显示和隐藏以达到选项卡的效果.

属性:

OnClientActiveTabChanged:

单击选项卡标题时触发的事件

ActiveTabIndex:

默认显示的选项卡

ScrollBars:

是否显示滚动条这个控件非常棒哦!

13.Animation动画控件

功能:

显示小动画

属性:

OnLoad:

页面加载时触发

OnClick:

单击控件时触发

onMouseOver:

鼠标滑过时触发

OnMouseOut:

鼠标移走时触发OnHoverOver:

与OnMouseOver类似

OnHoverOut:

与OnMouseOut类似"FadeAnimation"的属性主要有4个:

lduration:

动画效果的时间间隔.lFps:

帧/秒的显示速度.lmaximumOpacity:

最大透明度.lminimumOpacity:

最小透明度.假如学习了WPF或者Silverlight的话,使用ExpressionBlend制作的时间帧动画,就很容易理解了.

说明一下:

似乎AJAX的这些控件,和WPF已经在接近了,但还是相差甚远哈,有这种趋势而已.

14.DropShadow阴影控件

功能:

实现阴影

属性:

Opacity:

透明度,最大值为1,不透明,默认值为0.5

Rounded:

是否锐化目标控件边角

TrackPosition:

追随目标控件的位置,此属性一般应用在控件被拖动的时候

15.RounderCorners锐化边角控件

功能:

该控件同样其锐化作用,缺点是没有阴影效果,有点事可以锐化4个边角的任意一个或多个.

属性:

Radius:

锐化幅度