AjaxToollit3.5使用整理
未注明则下列控件皆略去runat,ID等服务器控件通用必填属性
最前端显示滚动块
使一个面板总在屏幕上；一般用于广告；
控件必须包含如下属性：
TargetControlID：要控制的控件ID;
VerticalSide：垂直停靠位置，可选项Top,Bottom,Middle;
VerticalOffset：控件垂直偏移值，正数字，表示偏移像素；
HorizontalOffset： 控件水平停靠位置，可选项Left,Right,Center;
HorizontalOffset: 控件水平偏移值，正数字，表示偏移像素；
ScrollEffectDuration：页面变动时移动到新位置所需时间，正数字，表示秒数；
动画效果 无
文本框自动填写
根据用户输入字符串时自动提供备选项，项搜索引擎的查询条件输入框；
控件必须包含如下属性：
TargetControlID：要控制的控件ID;
ServicePath：指定自动完成功能Web Service的路径 如ServicePath="AutoCompleteService.asmx" ；
ServiceMethod：指定自动完成功能Web Method的名称 ServiceMethod="GetWordList"；
MinimumPrefixLength：开始提供自动完成列表的文本框内最少的输入字符数量；
CompletionSetCount：是指列表列出输入提示即可选项的数量；
需要如下格式的WebService支持：红色部分不可更改
using System;
using System.Collections.Generic;
using System.Web.Services;
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class AutoComplete : WebService
{
public AutoComplete()
{
}
[WebMethod]
public string[] GetCompletionList(string prefixText, int count)
{
if (count == 0)
{
count = 10;
}
if (prefixText.Equals("xyz"))
{
return new string[0];
}
Random random = new Random();
List<string> items = new List<string>(count);
for (int i = 0; i < count; i++)
{
char c1 = (char) random.Next(65, 90);
char c2 = (char) random.Next(97, 122);
char c3 = (char) random.Next(97, 122);
items.Add(prefixText + c1 + c2 + c3);
}
return items.ToArray();
}
日历
在文本框上绑定一个日历控件，使文本框获得焦点时弹出日历框；
控件必须包含如下属性：
TargetControlID：要控制的控件ID;
可选属性：
PopupButtonID：控制弹出和收回的控件；一般为一个带有日历图标的按钮；
PopupPosition：日历弹出位置，相对目标控件偏移位置；
Format：选中的日期格式，字符串如"yyyy-mm-dd"；
级联控件扩展，如下拉列表
一般是在多个DropdownList控件绑定多个CascadingDropDown控件，按顺序必须选中第一个后第二个才可选并根据第一个控件的选中项加载可选项；
控件必须包含如下属性：
TargetControlID：要控制的控件ID;
Category：目标控件的数据项，会显示在目标控件前作为标题，例如：“供电公司：”
PromptText：控件默认显示项即第一项，一般为提示，例如：“选择一个供电公司”
LoadingText：加载下级控件项时显示的提示文本，例如：“[正在加载…]”;
ServicePath: 提供数据的WebService路径，例如：“CarsService.asmx”；
ServiceMethod：提供数据的WebService方法，例如：“GetDropDownContents”；
ParentControlID：父控件ID，首级控件可以不写；
页面后台添加如下命名空间和方法：
using System.Web.Services;
using AjaxControlToolkit;
//此方法内容不能更改
[WebMethod]
[System.Web.Script.Services.ScriptMethod]
public static CascadingDropDownNameValue[] GetDropDownContentsPageMethod(string knownCategoryValues, string category)
{
return new CarsService().GetDropDownContents(knownCategoryValues, category);
}
所需WebService如下：
using System;
using System.Collections.Specialized;
using System.Text.RegularExpressions;
using System.Web;
using System.Web.Services;
using System.Xml;
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class CarsService : WebService
{
//为了简单描述功能，所以采用Xml数据源
private static XmlDocument _document;
private static Regex _inputValidationRegex;
private static object _lock = new object();
// 取得数据源；
public static XmlDocument Document
{
get
{
lock (_lock)
{
if (_document == null)
{
// 从文件加载数据
_document = new XmlDocument();
_document.Load(HttpContext.Current.Server.MapPath("~/App_Data/CarsService.xml"));
}
}
return _document;
}
}
//列出数据层级，本例共三级如下：
public static string[] Hierarchy
{
get { return new string[] { "make", "model","color" }; }
}
//输入有效性验证，非必须；
public static Regex InputValidationRegex
{
get
{
lock (_lock)
{
if (null == _inputValidationRegex)
{
_inputValidationRegex = new Regex("^[0-9a-zA-Z \\(\\)]*$");
}
}
return _inputValidationRegex;
}
}
/// <summary>
/// 级联控件扩展方法，签名和内容不可更改
/// </summary>
[WebMethod]
public AjaxControlToolkit.CascadingDropDownNameValue[] GetDropDownContents(string knownCategoryValues, string category)
{
StringDictionary knownCategoryValuesDictionary = AjaxControlToolkit.CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
return AjaxControlToolkit.CascadingDropDown.QuerySimpleCascadingDropDownDocument(Document, Hierarchy, knownCategoryValuesDictionary, category, InputValidationRegex);
}
}
本例加载的xml如下：
<?xml version="1.0" encoding="utf-8" ?>
<CarsService>
<make name="Acura">
<model name="Integra">
<color name="Green" />
<color name="Sea Green" />
<color name="Pale Green" />
</model>
<model name="RL">
<color name="Red" />
<color name="Bright Red" />
</model>
<model name="TL">
<color name="Teal" />
<color name="Dark Teal" />
</model>
</make>
</CarsService>
面板控件扩展隐藏或显现面板
点击某个区域浮动隐藏或显示一块面板
控件必须包含如下属性：
TargetControlID：要控制的控件ID；
ExpandControlID：控制浮动面板的控件ID，即在该控件上点击显示面板；
CollapseControlID：控制浮动面板的控件ID，即在该控件上点击隐藏面板；
Collapsed：初始时是否显示面板，True为不显示；
可选属性：
ImageControlID：在展开和隐藏面板时变动的图标控件，一般为ImageControl，包含在TargetControl里或TargetControl本身就是TargetControl，在面板展开和隐藏时图案在ExpandedImage，CollapsedImage属性指定的图案变换；
ExpandedImage：在面板展开时ImageControlID指定的控件显示的图片；
CollapsedImage：在面板隐藏时ImageControlID指定的控件显示的图片；
确认弹出窗口
弹出模态面板，相当于JS的Confirm弹出对话框，原页面灰显；配合DisplayModalPopupID使用
控件必须包含如下属性：
TargetControlID：要控制的控件ID；
ConfirmText：弹出的对话框内容；
可选属性：
DisplayModalPopupID：控制弹出窗口的ModalPopupExtender的ID，联合使用可形成背景灰显效果；
模态面板，原页面灰显
弹出模态面板，配合CSS可使原页面灰显，突出显示模态面板；模态面板以外的控件可点击但不触发事件，可配合使用BackgroundCssClass使背景灰显不可点击；
控件必须包含如下属性：
TargetControlID：要控制的控件ID；
PopupControlID：弹出的面板的ID，一般为Panel的ID;
OkControlID：返回OK的面板上的某个控件ID，点击该控件面板返回OK；
CancelControlID：返回Canel的面板上的某个控件ID，点击该控件面板返回OK；
可选属性：
DropShadow：弹出面板是否有阴影；
BackgroundCssClass：背景CssClass的类名，使原页面灰显的CssClass 定义如下：
.background
{
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}
生成一个可拖动的Panel
控件使一个Panel可被拖到页面的任意位置；
控件必须包含如下属性：
TargetControlID：要控制的可被拖动的控件的ID;
DragHandleID：被当作拖动把手的控件ID,鼠标点击上面然后可拖动Panel；最好放到被拖动到Panel里面；
在页面任意位置加入如下JS代码，否则Panel拖动后会弹回原来位置：
<script type="text/javascript">
function setBodyHeightToContentHeight() {
document.body.style.height = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight)+"px";
}
setBodyHeightToContentHeight();
$addHandler(window, "resize", setBodyHeightToContentHeight);
</script>
注：虽然在面板外套上一个div然后指定float,width,height可以时面板不弹回，但不可靠；
使一个Label扩展为DropDownList
扩展Label使鼠标放上后形成下拉列表形式，选择一项后等于点击组成该列表项控件，激发该控件的注册事件；
控件必须包含如下属性：
TargetControlID：要控制的控件的ID;
DropDownControlID：备选项的容器ID一般为一个Panel，里面包含多个控件，如LinkButton，Button
使控件下生成阴影形成立体效果
扩展一个控件使控件下生成阴影形成立体效果；一般用于Panel；
控件必须包括如下属性：
TargetControlID：要控制的控件的ID;
可选属性：
Rounded：是否使控件角圆滑；True/False ；
Radius：控件角的圆滑程度，正整数，数字越大越接近圆形；该属性影响控件的大小；
Opacity：阴影透明度，0～1小数，数字越大越不透明；
生成Html替换掉控件
输入文本过滤
过滤掉不符合格式的字符，输入不符合格式的字母时界面无显示；
控件必须包括如下属性：
TargetControlID: 目标TextBox的ID；
FilterType： 过滤的类型，可选为：Custom，Numbers等；可多选中间用逗号隔开；
可选属性：
FilterMode：过滤模式，选InvalidChars时，配合属性InvalidChars表示禁止录入这些字符；选ValidChars时，配合属性ValidChars表示只允许这些字符录入；
ValidChars：当FilterType为Custom时并且FilterMode为ValidChars允许的字符，例如“×+-/”表示为允许录入上述字符；
InvalidChars：当FilterType为Custom时并且FilterMode为InvalidChars禁止录入的字符，例如“×+-/”表示为不允许录入上述字符；
扩展GridView鼠标放上显示编辑，删除等菜单 无
在GridView中，形成鼠标放上显示菜单项，例如显示编辑，删除选项；
类控件扩展 无
在List类无合适选项时可手动输入；
输入控件格式设置扩展
在用户输入时限制输入特定格式字符串，数字或日期；通常配合MaskedEditValidator控件使用；
控件必须包括如下属性：
TargetControlID: 目标TextBox的ID；
Mask：控件要验证的规则 通常用 9为占为符，例如“999.999.999.999”；
MaskType：验证类型，可为时间，日期，数字等；
可选属性：
MessageValidatorTip：用户输入时是否提示消息；
OnFocusCssClass：控件获得焦点是的CssClass类名；
OnInvalidCssClass： 未通过验证时的CssClass类名；
InputDirection：输入的类型，如：RightToLeft 从右到左，未搞明白干什么的；
DisplayMoney：显示钱的符号位置，左或右；不写则为不显示该符号；
AcceptNegative：未搞明白干什么的；
ErrorTooltipEnabled：未搞明白干什么的；
输入控件验证扩展，配合MaskedEditExtender使用
配合MaskedEditExtender使用，验证用户输入；
控件必须包括如下属性：
ControlExtender：要扩展的控件ID，一般为一个MaskedEditExtender控件；
ControlToValidate：要验证的控件ID;
可选属性：
AcceptAMPM：未知；
IsValidEmpty：是否可为空，true为可为空；默认允许为空；
TooltipMessage：输入时鼠标放上时提示信息；
MessageValidatorTip: 是否在鼠标放上时显示提示信息；
ErrorTooltipEnabled：未通过验证时是否在鼠标放上是显现提示信息；
EmptyValueBlurredText：空值时错误信息；
EmptyValueMessage：空值鼠标放上提示错误信息；
InvalidValueBlurredMessage：验证错误提示信息；
InvalidValueMessage：验证失败时鼠标放上提示错误信息；
Number：
MaximumValue：允许的最大值；
MinimumValue：允许的最小值；
MaximumValueMessage：超出最大值时鼠标放上提示错误信息；
MinimumValueMessage：小于最小值时鼠标放上提示错误信息
MaximumValueBlurredMessage：超出最大值时错误信息；
MinimumValueBlurredText：小于最小值时错误信息
使用CheckBox实现RadioButtonList的功能
使用该控件可以使设置在同一“Key“的多个CheckBox只有一个被选中；
控件必须包括如下属性：
ControlExtender：要扩展的控件ID；
Key：多个CheckBox只有设置为同一个Key值才能保证只有一个被选中；
无
在文本框上添加向上向下小按钮来选择
扩展文本框使其可以只能选择指定项或指定的项如图：
控件必须包括如下属性：
TargetControlID：要扩展的控件ID；
Width:文本框宽度；否则文本框宽度为零
可选属性：
数字可手动输入：
Minimum：可选最大值；
Maximum：可选最小值；
限定选项用户不可输入，如月份时：
ValuesRef="January;February;March;April;May;June;July"
调用WebService取得项，选中项Value为WebService方法的返回值：
ServiceUpPath：点击向上按钮调用的WebService路径，例如：“NumericUpDown.asmx”；
ServiceDownPath：点击向下按钮调用的WebService路径，例如：“NumericUpDown.asmx”；
ServiceUpMethod：点击向上按钮调用的WebService方法，例如：“NextValue”；
ServiceDownMethod：点击向下按钮调用的WebService方法，例如：“PrevValue”；
注：WebService方法签名必须有一个参数，调用时会将当前值传给该方法；
可以在文本框添加两个按钮作为向上/向下按钮：
TargetButtonDownID：向下按钮的ID；
TargetButtonUpID：向上按钮的ID;
扩展BulletedList使其按指定条件筛选
该控件可以从BulletedList项中筛选出符合项的首字母或多个字母的项，并按相似度排序；ClientSort为true,IndexSize为2，Separator为“-”时效果如图：
控件必须包括如下属性：
TargetControlID：要扩展的控件ID；
ClientSort：是否在客户端对生成的筛选条件排序；
IndexSize：筛选条件显示几个字母；正整数；
Separator：筛选条件的分隔符，例如：“-”；
可选属性：
SelectIndexCssClass：选择的项CssClass类ID；
UnselectIndexCssClass：为选中项的CssClass类ID；
密码强度判断
控件必须包括如下属性：
TargetControlID：要扩展的控件ID；
DisplayPosition：强度提示显示位置，相当于被扩展的文本框；多选一；
StrengthIndicatorType：强度提示模式；Text为文本，BarIndicator为进度条；
PrefixText：强度提示前缀；例如：PrefixText= “密码强度：”;
TextStrengthDescriptions: 密码强度描述；例如：“很弱;弱;一般;强;很强“；
可选属性：
PreferredPasswordLength：推荐的密码长度；正整数；配合HelpStatusLabelID使用
HelpStatusLabelID：指定一个Lable随用户输入显示离推荐长度还差几个字符；
StrengthStyles：不同强度时强度提示按不同的样式显示；CssClass类名，中间以逗号隔开；样式和TextStrengthDescriptions一一对应；
RequiresUpperAndLowerCaseCharacters：是否验证大小写；
MinimumNumericCharacters： 至少要包含的数字个数；
MinimumSymbolCharacters：至少要包含的符号个数；
MinimumUpperCaseCharacters：至少要包含的大写字母个数；
HelpHandlePosition：在文本框某个地方出现一个问号标识，点击弹出提示；
无
五个代表等级的星星选择评分
生成一列或一排星星，可以点击选中，一般用来评级，或打分
控件必须包括如下属性：
MaxRating：总共多少个星星；
CurrentRating：当前选中多少个星星；
可选属性:
RatingAlign：星星排列方式，可选水平和垂直；
RatingDirection：设置星星从左往右还是从右到左；
StarCssClass:开始的样式；例如：
.ratingStar
{
font-size: 0pt; width: 13px; height: 12px;
margin: 0px; padding: 0px; cursor: pointer;
display: block; background-repeat: no-repeat;
}
WaitingStarCssClass：等待完成时的样式；例如：
.savedRatingStar { background-image: url(Images/SavedStar.png);}
FilledStarCssClass：填充时的样式；例如：
.filledRatingStar{ background-image: url(Images/FilledStar.png);}
EmptyStarCssClass：为选中的星星样式；例如：
.emptyRatingStar { background-image: url(Images/EmptyStar.png);}
包含事件：
OnChanged(): 选中时激发；
注：通过在Onload()方法设置Orientation可以；
生成一个可以鼠标拖动排序的列表；无
生成一个可拖动改变大小的控件 无
设置控件的边角弧度 无
扩展TextBox形成一个滑块，可用鼠标拖动
效果如图：
控件必须包括如下属性：
TargetControlID：要扩展的控件ID；
Minimum：最小可选值；
Maximum：最大可选值；
Slider1_BoundControl：显现选择值的控件ID;
BehaviorID：和TargetControlID相同；
可选属性：
Steps：分段的段数，分段后不能微调，只能选指定个特定值；
Orientation：排列方式，水平还是垂直；
TooltipText：鼠标放上提示；
Decimals：默认值；
扩展Image控件生成幻灯片效果
可设置多少秒换图片，向前，向后，播放和停止；
控件必须包括如下属性：
TargetControlID：要扩展的控件ID；一般为一个Image控件；
SlideShowServiceMethod：取得图片的WebService方法；
AutoPlay：是否自动播放；
ImageTitleLabelID： 显示图片标题的控件，一般为一个Label;
ImageDescriptionLabelID：显示图片解释的控件，一般为一个Lable;
NextButtonID:翻下一页的按钮ID；
PreviousButtonID：翻前一页的按钮ID;
PlayButtonText： 播放键的文本；
StopButtonText：停止键的文本；
PlayButtonID：播放/停止键的控件ID；
Loop：是否循环播放；
PlayInterval：自动播放时间隔秒数；
服务器端必须包含如下方法：可以写入后台CS页，
如果该方法独立到WebService 时需添加属性SlideShowServicePath即WebService路径；
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public static AjaxControlToolkit.Slide[] GetSlides()
{
return new AjaxControlToolkit.Slide[] {
new AjaxControlToolkit.Slide("images/Blue hills.jpg", "Blue Hills", "Go Blue"),
new AjaxControlToolkit.Slide("images/Sunset.jpg", "Sunset", "Setting sun"),
new AjaxControlToolkit.Slide("images/Winter.jpg", "Winter", "Wintery..."),
new AjaxControlToolkit.Slide("images/Water lilies.jpg", "Water lillies", "Lillies in the water"),
new AjaxControlToolkit.Slide("images/VerticalPicture.jpg", "Sedona", "Portrait style picture")};
}
形成Tab页效果，不多写了
在填入前文本框内的提示，获得焦点后隐藏
控件必须包括如下属性：
TargetControlID：要扩展的控件ID；一般为一个TextBox控件；
WatermarkText：水印提示文本；
可选属性：
WatermarkCssClass：水印的样式；
将CheckBox前的小圆点替换成其他图标 无
更新数据时的动画效果
验证控件扩展弹出提示框动画
如图：
控件必须包括如下属性：
TargetControlID：要扩展的控件ID；一般为一个验证控件；
可选属性：
HighlightCssClass：弹出框搜样式