天天看点

ajax 控件

确实让我没有想到的是AJAX居然是在2007年才真正走上了历史的舞台,而且是伴随着一系列的新技术而来。其实,真正让我感叹的不是因为它是一种“新”的技术,而是发展之迅速。

所以,学习AJAX是相当有必要的,因为它在微软Web开发技术占据着重要的位置:

微软Web开发技术:

Asp.net

代码在后端运行,可轻松连接数据库,访问服务器,让用户动态交换数据,动态产生网页。

Silverlight

代码在浏览器端通过Silverlight Player运行,可利用Xaml代码生成互动的矢量对象和动画,并通过Javascript控制

Asp.net AJAX

在前后端都有代码,可集成前后端的开发技术(Javascript和Asp.net),实现两端之间的非同步通信,数据交换和协作。

当然,上面估计是针对Silverlight1.0或者1.1说的,如今已经发展到4.0,而且WPF似乎也有心往WEB插足,而且是相当容易的,因为Silverlight本来就是其一个子集。

其实,我还在考虑一个问题,那就是.NET中的另一个WCF,似乎与AJAX“有染”,估计在未来的发展也不能小觑。

下面开始愉快的学习之旅。

首先介绍由VS提供的AJAX控件列表:

ScriptManager:最常用的一个,而最“没用(不需要你用)”的一个。

ScriptManagerProxy:在编写自定义控件的时候使用。

Timer:定时回发。

UpdatePanel:指定内容为更新区域。

UpdaeProgress:显示更新进度条。

显然,只有这几个控件是不能满足我们的要求的,下面介绍AJAX ControlToolkit中的控件列表:

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很合适

呵呵,在使用这个控件的时候,不适用控件之前就有自动提示功能,使用了之后反而没有了,而且添加控件之后会出现一个编译错误。需“Add AutoComplete page method”添加自动完成页的方法。如果采用这种方法,可以在该页的.cs文件中创建如下代码:

[System.Web.Services.WebMethodAttribute(),System.Web.Script.Services.ScriptMethodAttribute()]//由于要在客户端调用web服务器

    public static string[] GetCompletionList1(string prefixText, int count, string contextKey)

    {

        return default(string[]);

    }

然后,我们就可以使用一个文件来存放要自动提示的字符串,编写代码访问并返回。

当然,一种更常用的方法是单独建立一个Web服务,在里面添加该方法。需在其前面添加[System.Web.Script.Services.ScriptService]

在网上摘录的一个该方法的完整代码如下:

[System.Web.Script.Services.ScriptService]

public class AutoComplete : System.Web.Services.WebService {

    public AutoComplete() {

        //Uncomment the following line if using designed components

        //InitializeComponent();

    }

    private static string[] autoCompleteWordList = null;

    [WebMethod]//这里就是提取自动提示字符串的方法,在ServeiceMethod中调用

    public string[] GetCompleteList(string prefixText, int count)

    {

        if (autoCompleteWordList == null)

        {

            string[] temp = File.ReadAllLines(Server.MapPath("~/App_data/CompleteList.txt"));

            Array.Sort(temp,new CaseInsensitiveComparer());

            autoCompleteWordList = temp;

        }

        int index = Array.BinarySearch(autoCompleteWordList,prefixText,new CaseInsensitiveComparer());

        if (index < 0)

        {

            index = ~index;

        }

        int matchingCount;

        for (matchingCount = 0; matchingCount < count && index + matchingCount < autoCompleteWordList.Length; matchingCount++)

        {

            if (!autoCompleteWordList[index + matchingCount].StartsWith(prefixText, StringComparison.CurrentCultureIgnoreCase))

            {

                break;

            }

        }

        string[] returnValue = new string[matchingCount];

        if (matchingCount > 0)

        {

            Array.Copy(autoCompleteWordList,index,returnValue,0,matchingCount);

        }

        return returnValue;

    }

2.FilteredTextBox过滤控件

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

属性:

1.       TargetControlID:被控制文本的ID

2.       FilterType:过滤类型,提供4中类型。可以使用“,”间隔设置多种类型

3.       ValidChars:当FilterType的属性包含“Custom”时,此属性有效,表示有效的字符。

3.MaskedEdit编辑验证控件

         MaskedEditValidator

MaskedEditExtender

功能:用来设置文本框显示时的一些格式。

属性:

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控件可实现简单的弹出菜单效果

参考网站:http://msdn.microsoft.com/zh-cn/dd553520.aspx

用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控件时的常用属性标签

属性标签名 描  述
SelectedIndex 该控件初次加载时展开的AccordionPane面板的索引值
HeaderCssClass 该Accordion中包含的所有AccordionPane面板的标题区域所应用的CSS Class
ContentCssClass 该Accordion中包含的所有AccordionPane面板的内容区域所应用的CSS Class
AutoSize

在展开具有不同高度的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面板时,该标签内将定义每个面板的正文区域中的内容模板

需要注意的是FadeTransitions和FramesPerSecond属性。自然,将FadeTransitions设置为true将让面板展开/折叠的过程显得非常酷,且将FramesPerSecond属性值设置得比较高也会让展开/折叠的动画变得更加平滑,但这样也同时会加重客户端程序执行时的负担,我们应该综合考虑各种情况合理地配置这两个属性。一般来讲,若是Accordion的大小适中,且其中也没有太多的AccordionPane面板,那么可以将FadeTransitions设置为true(即显示淡入淡出效果),并将FramesPerSecond设置为40(即每秒40帧)左右,让动画效果更加流畅眩目。而若是对于较大的,甚至全屏的Accordion,或是其中包含了许多个复杂的AccordionPane面板,那么就应该将FadeTransitions设置为false,且将FramesPer Second设置为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类似“Fade Animation”的属性主要有4个:

l duration:动画效果的时间间隔。

l Fps:帧/秒的显示速度。

l maximumOpacity:最大透明度。

l minimumOpacity:最小透明度。

假如学习了WPF或者Silverlight的话,使用Expression Blend制作的时间帧动画,就很容易理解了。

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

14. DropShadow阴影控件

功能:实现阴影

属性:

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

Rounded:是否锐化目标控件边角

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

15. RounderCorners锐化边角控件

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

属性:

Radius:锐化幅度

Corners:锐化的边角,All表示所有边角

16. ToggleButton个性化按钮控件

功能:该控件只能应用于CheckBox,主要功能是以自定义图片的形式显示复选框的选中和未选中状态。

属性:

CheckedImageAlternateText:选中状态下的提示文本

UnCheckedImageAltenateText:未选中状态下的提示文本

UncheckedImageUrl:未选中状态下显示图片地址

CheckedImageUrl:选中状态下显示的图片地址

DisabledCheckedImageUrl:控件为不可用状态时,默认时要显示的图片

17. UpdatePanelAnimation局部刷新动画控件

功能:该控件用来装饰UpdatePanel更新的效果,提供对UpdatePanel更新时和更新后的特效,并允许用户自定义这些特效。

Animation 控件不仅仅是一个控件,它是一个可向控件添加动画的框架。

属性:

OnUpdating:更新时应用的特效

OnUpdated:更新后应用的特效

18. AlwaysVisibleControl始终显示控件

功能:创建一个始终显示的内容,通常用来显示菜单、消息和广告等。

属性:

VerticalSide:显示控件时垂直位置,上中下

VerticalOffset:显示控件时与最上方的距离,相对坐标

HorizontalSide:显示控件的水平位置:左中右

HorizontalOffset:显示控件与最左侧的距离,相对坐标

ScrollEffectDuration:当滚动条滚动时,显示控件的显示延迟,默认时0.1秒

ProfileBindings:要绑定的个性化配置的属性

19. Calendar日历控件

功能:可以选择到文本框中的日历控件

属性:

Format:日历显示的日期格式

PopupButtonID:当日期是通过选择某个按钮弹出的时候

可以使用PopupButtonID指向一幅图片,放在文本框后面,点击图片就可以弹出日历控件选择日期。呵呵,由于是测试,放置了一幅大的图片。

20. CascadingDropDown级联下拉列表控件

功能:级联菜单,当第一级可用时,第二级可用,第二级可用时,第三级不可用,依次类推。

Category:当前下拉框的类别

PromptText:当下拉框无数据和未选中数据时,给用户提示。

在使用此控件的时候,由于涉及到数据库,故按提交按钮需验证,如果将EnableEventValidation="false",也就是不验证可以解决这个问题,但是这样就不安全了。这一点需要注意。

              Category需要同从数据库中取出数据类别相同,这里是Xml数据,也就是要对应节点,在此WEB服务中的Hierarchy即存储相应类别和节点。

21. Confirm确认按钮控件

主要属性设置时ConfirmText,即显示弹出消息框的内容。

22. DynamicPopulate动态填充控件

允许程序在运行的过程中,更改指定控件的内容,类似于“document.getElementById(“ControlID”).value=”Selected Control””语句。这个控件是利用createElement和appendChild等DOM方法实现的。

属性:

BehaviorID:行为ID,用于在客户端获取Ajax控件

TargetControlID:需要动态填充的内容控件

ClearContentsDuringUpdate:在更新时是否情况内容

ServicePath:获取数据需要使用的Web服务

ServiceMethod:获取数据的方法

UpdatingCssClass:更新过程中使用的样式

ContextKey:上下文关键字,通过此关键字,判断返回的数据类型

CustomScript:一段自定义的脚本,必须为能被格式化的字符串

PopulateTriggerControlID:引发填充事件的控件

23. ModalPopup具有关机效果的弹出式控件

该弹出式控件最大的特色就是具备“模式”窗口风格,在B/S应用中,使用这样风格的好处是,当用户选择这个设置时,其他内容都会受到保护。

使用这种方法,处理弹出窗口中的事件是一件很繁琐的事情,由于不能直接在弹出控件中添加服务器端方法,因为添加了也没有反应,估计要想实现事件需在客户端使用Javascript来完成。在DynamicPopulateExtender.aspx实例中可以看出。

24.   MutuallyExclusiveCheckBox互斥复选框控件

功能:复选框实现多个项目选择,但是项目之间可以含有互斥项。含有相同Key的为同一组,同一组之间是互斥的,但与不同Key之间的组,是可以同时选择的。

属性:

TargetID:被控制的复选框。

Key:区分互斥复选框的键值。

同时使用多个BulletedList控件也可以实现此功能!

25. NoBot反Bot控件

功能:防止自动提交程序的运行。

属性:

OnGenerateChallengeAndResponse:自定义的相应事件,用于反BOT

ResponseMinimumDelaySeconds:响应的最小延迟,单位为秒

26. NumbericUpDown加减数值控件

功能:为一个文本框添加上下按钮,当单击这个按钮时,可以实现数字的加减,同时也可以提供静态数据,实现数据的上下选择。

属性:

Width:TextBox显示时的宽度,默认为0,不显示目标TextBox

RefValues:进行上下操作的一些静态值

TargetButtonDownID:进行“下”操作的按钮

TargetButtonUpID:进行“上”操作的按钮

在.cs页面中直接使用Page Method,不是在单独的asmx文件中使用:

注释掉会[System.Web.Services.WebMethod](自己添加)

或者[System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()](自动生成)会弹出错误框。

还需要注意方法中的参数的数据类型。

27. PagingBulletedList带项目符号的列表控件

功能:显示一些列表项,主要的扩展对象是BulletedList控件。

属性:

ClientSort:是否在客户端进行排序

IndexSize:标题索引的字符个数

Separator:标题索引的间隔符

将相同列表开始的IndexSize个字符作为标题,点击之后展开所有以此标题为首的列表项。

在使用服务器端代码来改变IndexSize的值时,使用TextBox时需添加AutoPostBack属性,但是这样会出现频繁刷新的问题。如果使用UpdatePanel来实现呢,使用触发的时候,也会遇到根本不访问服务器端代码的问题。这种的方案是:使用一个Button控件在UpdatePanel中触发,注意触发方式采用PostBackTrigger,不要采用异步触发AsyncPostBackTriger(注意,Button控件本来就会导致会发,所以在UpdatePanel中也没有必要添加触发器的,说得更狠一点,就是不需要UpdatePanel也可以,我使用触发器,不过是为了熟悉它而已。呵呵,但是这样实现的就不是使用局部刷新了。)。。所以,最佳解决方案,还是在客户端用Javascript来实现。

28. Rating显示等级控件

功能:显示等级信息,可以以图片的形式显示。

属性:

·         CurrentRating — 所使用的初始评分

·         MaxRating — 最高评分

·         EmptyStarCssClass — 评分项(“星号”)为空时使用的 CSS 类

·         FilledStarCssClass — 评分项(“星号”)已填写时使用的 CSS 类

·         StarCssClass — 为一个 visible stat 使用的 CSS 类

·         WaitingStarCssClass — 将星级评分发送回服务器时使用的 CSS 类

·         AutoPostBack :当单击"评级"这个控件时,是否回送。默认不回送。

·         OnChanged :在完成评级之后,触发"客户端回调"事件以便执行某一段程序代码。

准备两种图像,一种用于显示填写过的评分项,另一种显示空白评分项

29. ReorderList可拖曳数据控件

功能:ReorderList控件用来显示数据,其功能相当于GridView、DataList和Repeater等,都可以绑定数据,并支持各种模板。ReorderList的优势在于,其允许用户自定义行的显示,即用户可以拖行到任意位置,同时还支持客户端的排序,这样可以减少回调,提高性能。

ReorderList控件时的常用属性标签

属性标签名 描  述
DataSourceID 页面中某个DataSource控件的ID,用于通过数据绑定自动生成列表项目
DataKeyField 数据源中键字段的名称,该字段中的值应该在所在记录中是唯一且不变的,ReorderList将用条目中该字段的值作为记录的标志,将在更新/删除中使用
AllowReorder 是否允许用户对列表中的项目进行重新排序,若指定了<ReorderTemplate>,则该属性将自动设置为true
SortOrderField 数据源中作为排序字段的名称。在用户进行重新排序之后,ReorderList将自动修改需要更新的条目的该字段
DragHandleAlignment 条目的可拖动区域与条目之间的相对位置关系,可选Top(上部)、Bottom(下部)、Left(左边)和Right(右边)
PostBackOnReorder 若该属性值设置为true,则当用户对列表中的项目进行重新排序之后,将自动引发一次整页的回送;否则将以异步回调的方式向服务器端发送请求
EditItemIndex 列表中当前处于编辑模式下的项目的索引值
ShowInsertItem 若该属性值为true,则列表中将显示出一个用来添加新条目的特殊行,即<InsertItemTemplate>模板中定义的内容
ItemInsertLocation 插入的新行在整个列表中的位置,可选Beginning(第一项)或End(最后一项)
<ItemTemplate> 该标签内将定义列表中普通条目的模板
<DragHandleTemplate> 该标签内将定义列表条目中可拖放区域的模板。用户只有在该区域中拖放才能够对该条目进行重排序
<ReorderTemplate> 该标签内将定义拖动列表条目时列表中可投放区域的模板
<InsertItemTemplate> 该标签内将定义用来添加新条目的特殊行的模板
<EditItemTemplate> 该标签内将定义处于编辑状态中的列表条目的模板
<EmptyListTemplate> 该标签内将定义空列表的模板。若列表中没有任何条目,则将显示该模板中定义的内容

对于PostBackOnReorder属性,若该ReorderList控件将只提供对项目重新排序的功能,则应该将其设置为false,这样可以充分利用ReorderList自带的异步回调功能。若是该ReorderList控件同样支持对条目的添加、删除、编辑等复杂功能,则应该将PostBackOn- Reorder属性设置为true,并用UpdatePanel包围该ReorderList,以期得到Ajax的异步回送功能。

使用这个真难拖动,真是太难了!这让我想起了WebParts,可惜我原本打算在那上面花点功夫的,但是没有,真是遗憾。好不容易实现了拖动吧,费了好大劲都不能拖动一次,只有当你自己做练习的时候才知道,估计这个以后不怎么使用。

30. ResizableControl可伸缩控件

功能:该控件可以改变其他控件的高度和宽度。

属性:

HandleCssClass:在控件中支持改变的位置所使用的样式

ResizableCssClass:改变控件大小时应用的样式

MinmumWidth/MaxmumWidth/MaxmumHeight/MinmumHeight:允许控件伸缩的最小、最大宽度和高度

OnClientResize:控件伸缩后,客户端触发的事件

HandleOffsetX/HandleOffsetY:在控件中支持改变的位置(X/Y位置),一般是控件的右下角相对坐标

这个控件实现的是伸缩,不是放大和缩小。也就是只能看见你整个图片的局部,你可以拖动使得像窗口那样改变窗口大小来查看内容,注意内容大小时没有改变的。

31. Slider滑块控件

功能:该控件可以个性化地显示当前的数字值,用户还可以通过文本框,控制滑块的数据值。

属性:

TargetControlID:该控件的目标控件,即其要扩展的控件。

      BoundControlID:当改变值时,显示数据的控件。

      EnableHandleAnimation:当改变值时滑块是否有动画效果。值为True,则有Animation效果;值为False,则没有Animation效果。

      RaiseChangeOnlyOnMouseUp:设定是否只有在鼠标离开的时候才触发事件。值为True,则是;否则,不是。

总结:

由于AJAX(Asynchronous JavaScript and XML)技术是基于JavaScript和XML,实现的是同客户端的交互让用户没有感觉(呵呵,自己这么理解的,其实有感觉)所以,一些代码虽然可以在服务器端处理,但是更好的方式是在客户端使用JavaScript来处理。至于XML,我觉得可以不讲其单纯的理解为XML数据,而就是数据。从整理的AJAX控件就可以看出来,有好多个控件可以通过Web Service同服务器端通信,实现数据的交换。

还有一点需要注意的是:在同一页面使用过多的AJAX控件,会导致性能下降,迫使浏览器弹出对话框:

《此页面上的脚本造成Web浏览器运行速度缓慢。是否继续运行,您的计算机将可能停止响应》

不论怎样,关于AJAX控件的使用,总算整理完了。虽然,有的很粗糙,而且更多的我都是从我的角度来理解整理的,很多都是从网上查找整理出来的,代码都是参照别人的代码,亲自实现了的。

欢迎广大学习WEB编程的朋友加入!

群里迫切需要,精通C#、ASP.NET、Javascript、DIV+CSS、Photoshop的朋友加入,这里为大家提供一个交流的平台,也许还有机会大家一起合作做项目作为练习,为将来积累一些经验。

继续阅读