注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Start Know

自分を信じて、自分で一定でいけます

 
 
 

日志

 
 

AjaxControlToolkit的安装与使用  

2008-09-12 09:06:11|  分类: Ajax.net系列教程 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

AjaxControlToolkit下载

http://ajax.asp.net/downloads/default.aspx?tabid=47

http://www.codeplex.com/AtlasControlToolkit/Release/ProjectReleases.aspx...

环境设置如下:

下载完 ASPAJAXExtSetup.msi 安装更新后在你的系统盘下的(以C盘为例) 出现这个 文件夹:

C:\Program Files\Microsoft asp.NET\ASP.NET 2.0 ajax Extensions\v1.0.61025

安装这个后我们就可以创建Asp.net AJAXEnabledWebSite站点了,这其实就是个ajax.net网站的模板。但是我们现在还不能使用微软给我们开发好的ajax控件 。要想知道怎么使用ajax.net控件往下看。

下载AjaxControlToolkit ,上面两个一个是带源代码的 一个是不带源代码的toolkit。建议下载带源代码的 toolkit。下载完成后把该文件解压到:

C:\Program Files\Microsoft asp.NET\ASP.NET 2.0 ajax Extensions\v1.0.61025\AjaxContronlToolkit\

双击运行AjaxControlToolkit.sln。

用vs2005打开这个sln,编译TemplateVSI这个项目后,把在C:\Program Files\Microsoft asp.NET\ASP.NET 2.0 AJAX Extensions\SampleWebSite\Bin下面生成的AjaxControlToolkit.dll和 AjaxControlToolkit.pdb复制到

C:\Program Files\Microsoft asp.NET\ASP.NET 2.0 AJAX Extensions\Binaries文件夹下面,这样我们就可以在vs2005中使用ajax.net这些控件了。

新建一个Ajax ControlToolkitWebSite 类型的web项目。在工具栏中新添加一个选项卡起名:AjaxControltoolkit

在这个选项卡上右键选择项-》浏览找到刚才复制过去的AjaxControlToolkit.dll,添加进来。这样我们就ajax.net控件成功引用到vs2005中了 。

现在你可以新建一个 Ajax ControlToolkitWebSite 项目来 happy一下。今天就写到这里,后面将具体介绍每个ajax.net控件和vs2005下面的控件的具体用法。希望大家继续关注,有什么问题也可以在这里讨论研究。

1.Accordion

功能:实现了QQ、Msn好友分类的折叠效果,就像包含了多个CollapsiblePanels

细节: (1)不要把Accordion放在Table种同时又把 FadeTransitions 设置为True,这将引起布局混乱

(2)每一个 AccordionPane control 有一个Header 和Content的 template

(3)在Content中可以进行任意扩展,你什么都可以放上^_^

(4)有三种AutoSize modes :None(推荐) Limit Fill

(5)Accordion表现的更像是一个容器

代码示意:

<ajaxToolkit:Accordion runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader"

ContentCssClass="accordionContent" FadeTransitions="false" FramesPerSecond="40"

TransitionDuration="250" AutoSize="None">

<Panes>

<ajaxToolkit:AccordionPane runat="server">

<Header>

<a href="" false;" >1. Accordion</a></Header>

<Content>

</Content>

</ajaxToolkit:AccordionPane>

</Panes>

</ajaxToolkit:Accordion>

2. AlwaysVisibleControl

功能:最多的应用是在线小说的目录和不胜其烦的浮动小广告

细节: (1)避免控件闪烁,把这个控件要在目标位置时使用absolutely position

(2) HorizontalSide="Center" VerticalSide="Top" 使用这个方法控制浮动在什么位置

代码示意:

<cc1:AlwaysVisibleControlExtender HorizontalSide="Center" VerticalSide="Top" TargetControlID="Panel1" runat="server">

3.Animation

功能:28个控件种效果最酷的!顾名思义实现动画效果

细节: (1)不只是控件:pluggable, extensible framework

(2)用在什么时候:OnLoad OnClick OnMouseOver OnMouseOut OnHoverOver OnHoverOut

(3)具体使用有很多可以谈的,有理由单独写一个Animation Xml 编程介绍

代码示意:

<ajaxToolkit:AnimationExtender

runat="server" TargetControlID="ctrl">

<Animations>

<OnLoad> </OnLoad>

<OnClick> </OnClick>

<OnMouseOver> </OnMouseOver>

<OnMouseOut> </OnMouseOut>

<OnHoverOver> </OnHoverOver>

<OnHoverOut> </OnHoverOut>

</Animations>

</ajaxToolkit:AnimationExtender>

4.CascadingDropDown

功能:DropDownList联动,调用Web Service

细节: (1)DropDownList行为扩展

(2)如果使用Web service 方法签名必须符合下面的形式:

[WebMethod]

public CascadingDropDownNameValue[] GetDropDownContents(

string knownCategoryValues, string category){...}

代码示意:

<ajaxToolkit:CascadingDropDown runat="server" TargetControlID="DropDownList1" Category="Make" PromptText="Please select a make" LoadingText="[Loading makes]" ServicePath="CarsService.asmx" ServiceMethod="GetDropDownContents"/>

<ajaxToolkit:CascadingDropDown runat="server" TargetControlID="DropDownList2" Category="Model" PromptText="Please select a model" LoadingText="[Loading models]" ServiceMethod="GetDropDownContentsPageMethod" ParentControlID="DropDownList1"/>

<ajaxToolkit:CascadingDropDown runat="server" TargetControlID="DropDownList3" Category="Color" PromptText="Please select a color" LoadingText="[Loading colors]" ServicePath="~/CascadingDropDown/CarsService.asmx" ServiceMethod="GetDropDownContents" ParentControlID="DropDownList2"/>

5.CollapsiblePanel

功能:Xp任务栏折叠效果

细节: (1)可以扩展任何一个 ASP.NET Panel control

(2) CollapsiblePanel 默认认为使用了 标准 CSS box model 早期的浏览器要!DOCTYPE 中设置页面为自适应方式提交数据rendered in IE's standards-compliant mode.

代码示意:

<ajaxToolkit:CollapsiblePanelExtender 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"/>

6.ConfirmButton

功能:就是弹出来一个确定对话框

细节: 本人认为不是最简单实现的方法,我的方法:

this.Button1.Attributes["onclick"]=" confirm('确定要停止下载么?');";

不知道是不是我没有发现这个控件的其它优势。

7.DragPanel

功能:页面拖动

细节: (1)TargetControlID 要拖动的控件

(2)DragHandleID 拖动的标题栏所在的ControlID

代码示意

<ajaxToolkit:DragPanelExtender runat="server"

TargetControlID="Panel3"

DragHandleID="Panel4" />

8.DropDown

功能:什么都可以以下拉菜单的形式弹出来

细节: (1)TargetControlID要在什么控件上实现扩展

(2)DropDownControlID弹出来什么

代码示意:

<asp:Panel runat="server" CssClass="ContextMenuPanel" Style="display: none;

visibility: hidden;">

<asp:LinkButton runat="server" Text="Option 1" CssClass="ContextMenuItem"

OnClick="OnSelect" />

<asp:LinkButton runat="server" Text="Option 2" CssClass="ContextMenuItem"

OnClick="OnSelect" />

<asp:LinkButton runat="server" Text="Option 3 (Click Me!)" CssClass="ContextMenuItem"

OnClick="OnSelect" />

</asp:Panel>

<cc1:DropDownExtender runat="server" TargetControlID="TextLabel"

DropDownControlID="DropPanel" />

9.DropShadow

功能:阴影效果,其实可以放给美工实现

细节: (1)Width 单位:px 默认5px

(2)Opacity 不透明度0-1.0 默认.5

代码示意:

<ajaxToolkit:DropShadowExtender runat="server"

TargetControlID="Panel1"

Opacity=".8"

Rounded="true"

TrackPosition="true" />

10.DynamicPopulate

功能:能实用Web Service或页面方法来替换控件的内容

细节: (1)ClearContentsDuringUpdate 替换之前先清除以前的内容(默认True)

(2)PopulateTriggerControlID 触发器绑定的控件 单击时触发

(3)ContextKey传递给Web Service的随机字符串

(4) Web Service方法签名必须符合下面的形式:

[WebMethod]

string DynamicPopulateMethod(string contextKey)

{...}

Note you can replace "DynamicPopulateMethod" with a naming of your choice, but the return

type and parameter name and type must exactly match, including case.

代码示意:

<ajaxToolkit:DynamicPopulateExtender runat="server"

TargetControlID="Panel1"

ClearContentsDuringUpdate="true"

PopulateTriggerControlID="Label1"

ServiceMethod="GetHtml"

UpdatingCssClass="dynamicPopulate_Updating" />

11.FilteredTextBox

功能:文本框数据过滤

细节: (1)过滤条件Numbers LowercaseLetters UppercaseLetters Custom

(2)过滤条件也可以是Custom的组合 FilterType="Custom, Numbers"

(3)ValidChars="+-=/*()." Custom要定义这样的有效字符串

(4) 其实这是个鸡肋:你可以输入中文,聊胜于无,忍了

示意代码:

<ajaxToolkit:FilteredTextBoxExtender runat="server"

TargetControlID="TextBox3"

FilterType="Custom, Numbers"

ValidChars="+-=/*()." />

12.HoverMenu

功能:鼠标靠近时显示菜单,可以用在在线数据修改的表格上作为功能菜单

细节: (1)PopupControlID要弹出来什么

(2)PopupPostion 在哪里弹出来Left (Default), Right, Top, Bottom, Center.

(3)OffsetX/OffsetY 弹出项与源控件的距离

(4) PopDelay 弹出延时显示 单位milliseconds. Default is 100.

代码示意:

<ajaxToolkit:HoverMenuExtender runat="Server"

TargetControlID="Panel9"

HoverCssClass="popupHover"

PopupControlID="PopupMenu"

PopupPosition="Left"

OffsetX="0"

OffsetY="0"

PopDelay="50" />

13.ModalPopup

功能:Xp的关机效果,后面全部灰掉,很多邮箱的删除对话框都着种效果

细节: (1)本质上讲这是一个对话框模版,比ConfirmButton有意义有更强的扩展性!

(2)从下面的代码中我们发现 点OK的时候可以调用后台方法

(3)同时可以执行一段脚本

代码示意:

<asp:Panel runat="server" CssClass="modalPopup" style="display:none">

<p>

<asp:Label runat="server" BackColor="Blue" ForeColor="White" Style=""

Text="信息提示"></asp:Label>&nbsp;</p>

<p >确定要删除当前下载的任务么?</p>

<p style="text-align:center;">

<asp:Button runat="server" Text="OK" ></asp:Button>

<asp:Button runat="server" Text="Cancel"></asp:Button>

</p>

</asp:Panel>

<ajaxToolkit:ModalPopupExtender runat="server" TargetControlID="LinkButton1"

PopupControlID="Panel2" BackgroundCssClass="modalBackground" DropShadow="true"

OkControlID="Button1" OnOkScript="onOk()" CancelControlID="CancelButton" />

14.MutuallyExlcusiveCheckBox

功能:互斥复选框就像Radio一样

细节: (1)Key属性用来分组就像RdiolistGroup一样

(2)argetControlID用来绑定已有的CheckBox

代码示意:

<ajaxToolkit:MutuallyExclusiveCheckboxExtender runat="server"

ID="MustHaveGuestBedroomCheckBoxEx"

TargetControlID="MustHaveGuestBedroomCheckBox"

Key="GuestBedroomCheckBoxes" />

15.NoBot

功能:Captcha 图灵测试 反垃圾信息控件

细节: (1)OnGenerateChallengeAndResponse 这个属性是EventHandler<NoBotEventArgs> 调用服务器端的方法,注意方法签名

例如: protected void CustomChallengeResponse(object sender, NoBotEventArgs e) {……}

代码示意:

<ajaxToolkit:NoBot

ID="NoBot2"

runat="server"

OnGenerateChallengeAndResponse="CustomChallengeResponse"

ResponseMinimumDelaySeconds="2"

CutoffWindowSeconds="60"

CutoffMaximumInstances="5" />

16.NumericUpDown

功能:实现Winform里面的Updown

细节: (1)普通整数增减

(2)值列表循环显示比如下面的第二个例子RefValues

(3)调用Web Service的格式:

<ajaxToolkit:NumericUpDownExtender runat="server"

TargetControlID="TextBox1"

Width="100"

RefValues="January;February;March;April"

TargetButtonDownID="Button1"

TargetButtonUpID="Button2"

ServiceDownPath="WebService1.asmx"

ServiceDownMethod="PrevValue"

ServiceUpPath="WebService1.asmx"

ServiceUpMethod="NextValue"

Tag="1" />

代码示意:

<ajaxToolkit:NumericUpDownExtender runat="server"

TargetControlID="TextBox1" Width="120" RefValues=""

ServiceDownMethod="" ServiceUpMethod="" TargetButtonDownID="" TargetButtonUpID="" />

<ajaxToolkit:NumericUpDownExtender runat="server"

TargetControlID="TextBox2" Width="120" RefValues="January;February;March;April;May;June;July;August;September;October;November;December"

ServiceDownMethod="" ServiceUpMethod="" TargetButtonDownID="" TargetButtonUpID="" />

<ajaxToolkit:NumericUpDownExtender runat="server"

TargetControlID="TextBox4" Width="80" TargetButtonDownID="img1"

TargetButtonUpID="img2" RefValues="" ServiceDownMethod="" ServiceUpMethod="" />

17.PagingBulletedList

功能:扩展BulletedList的分页功能

细节: (1)可以控制每页最多显示多少条,是否排序

(2)IndexSize表示index headings 的字符数,如果MaxItemPerPage设置了概属性被忽略

(3)MaxItemPerPage分页每页最大条数

代码示意:

<ajaxToolkit:PagingBulletedListExtender BehaviorID="PagingBulletedListBehavior1" runat="server"

TargetControlID="BulletedList1"

ClientSort="true"

IndexSize="1"

Separator=" - "

SelectIndexCssClass="selectIndex"

UnselectIndexCssClass="unselectIndex" />

18.PasswordStrength

功能:验证密码强度

细节: StrengthIndicatorType两种显示方式:文字提示,进度条提示

代码示意:

<ajaxToolkit:PasswordStrength runat="server" DisplayPosition="RightSide" TargetControlID="TextBox1"

StrengthIndicatorType="Text" PreferredPasswordLength="10" PrefixText="Strength:"

HelpStatusLabelID="TextBox1_HelpLabel" TextCssClass="TextIndicator_TextBox1" TextStrengthDescriptions="Very Poor;Weak;Average;Strong;Excellent"

MinimumNumericCharacters="0" MinimumSymbolCharacters="0" RequiresUpperAndLowerCaseCharacters="false"/>

<ajaxToolkit:PasswordStrength runat="server" DisplayPosition="RightSide" TargetControlID="TextBox2"

StrengthIndicatorType="BarIndicator" PreferredPasswordLength="15" HelpStatusLabelID="TextBox2_HelpLabel"

BarIndicatorCssClass="BarIndicator_TextBox2" BarBorderCssClass="BarBorder_TextBox2"

MinimumNumericCharacters="1" MinimumSymbolCharacters="1" RequiresUpperAndLowerCaseCharacters="true" />

<ajaxToolkit:PasswordStrength runat="server" DisplayPosition="BelowLeft" TargetControlID="TextBox3"

StrengthIndicatorType="Text" PreferredPasswordLength="20" PrefixText="Meets Policy? " TextCssClass="TextIndicator_TextBox3"

MinimumNumericCharacters="2" MinimumSymbolCharacters="2" RequiresUpperAndLowerCaseCharacters="true"

TextStrengthDescriptions="Not at all;Very Low compliance;Low Compliance;Average Compliance;Good Compliance;Very High Compliance;Yes"

HelpHandleCssClass="TextIndicator_TextBox3_Handle" HelpHandlePosition="LeftSide" />

19.PopupControl

功能:任何控件上都可以弹出任何内容

细节: (1)TargetControlID - The ID of the control to attach to

(2)PopupControlID - The ID of the control to display

(3)CommitProperty -属性来标识返回的值

(4) CommitScript -把返回结果值通过脚本处理,用到CommitProperty

代码示意:

<ajaxToolkit:PopupControlExtender runat="server" TargetControlID="MessageTextBox"

PopupControlID="Panel2" CommitProperty="value" CommitScript="e.value += ' - do not forget!';" Position="Bottom" />

20.Rating

功能:级别控件

细节: 又是一个鸡肋,没有太大实用价值,看代码吧

代码示意:

<ajaxToolkit:Rating runat="server"

CurrentRating="2"

MaxRating="5"

StarCssClass="ratingStar"

WaitingStarCssClass="savedRatingStar"

FilledStarCssClass="filledRatingStar"

EmptyStarCssClass="emptyRatingStar"

OnChanged="ThaiRating_Changed" />

21.ReorderList

功能:这个控件的炫酷程度仅次于Animation ,可以动态移动数据

细节: (1)绑定数据,拖动数据之后数据将被更新到绑定源

(2)它不是已有控件的扩展是全新的服务器端控件,只是它对Ajax行为是敏感的

(3)重排的实现有两种方式:CallBack PostBack 前者的发生在页面上是没有PostBack的(也就是没有刷新页面)

(4) 而数据添加或者编辑的时候就必须要使用PostBack来同步服务器端的数据状态

(5)PostbackOnReorder就是针对两种策略进行选择

(6)可以扩展的很多,三言两语难以说尽给出基本框架吧,回头再说

代码示意:

<ajaxToolkit:ReorderList runat="server"

DataSourceID="ObjectDataSource1"

DragHandleAlignment="Left"

ItemInsertLocation="Beginning"

DataKeyField="ItemID"

SortOrderField="Priority"

AllowReorder="true">

<ItemTemplate></ItemTemplate>

<ReorderTemplate></ReorderTemplate>

<DragHandleTemplate></DragHandleTemplate>

<InsertItemTemplate></InsertItemTemplate>

</ajaxToolkit:ReorderList>

22.ResizableControl

功能:就像设计状态一样可以拖动修改大小,可是有什么实际的意义么,放大字体?没有想到

细节: (1)HandleCssClass - The name of the CSS class to apply to the resize handle 这个属性必须要有!

代码示意:

<ajaxToolkit:ResizableControlExtender runat="server"

TargetControlID="PanelImage"

HandleCssClass="handleImage"

ResizableCssClass="resizingImage"

MinimumWidth="50"

MinimumHeight="20"

MaximumWidth="260"

MaximumHeight="130"

OnClientResize="OnClientResizeImage"

HandleOffsetX="3"

HandleOffsetY="3" />

23.RoundedCorners

功能:控件圆角 纯粹是控制外观的了,什么时候审美疲劳了还要改,呵呵

细节: (1)还有一个非常非常坑人的地方:你必须要设置 CssClass="roundedPanel"要不然不起作用

(2) Radius设置弧度,默认是5

(3)好象只适用于容器

代码示意:

<ajaxToolkit:RoundedCornersExtender runat="server" TargetControlID="Panel1" Radius="6" />

24.Slider

功能:实现WinForm中的Slider控件效果

细节: (1)修改文本框的值也可以影响Slider的状态!这个反馈还是有用的!

代码示意:

<asp:TextBox runat="server"></asp:TextBox>

<cc1:SliderExtender runat="server"

BehaviorID="Slider2"

TargetControlID="Slider2"

BoundControlID="TextBox1"

Orientation="Horizontal"

EnableHandleAnimation="true"

Minimum="0"

Maximum="100"/>

25.TextBoxWatermark

功能:文本水印

细节: 没有什么说的看代码--->

代码示意:

<asp:TextBox CssClass="unwatermarked" Width="150" runat="server"></asp:TextBox>

<cc1:TextBoxWatermarkExtender runat="server" TargetControlID="TextBox1" WatermarkText="请输入用户名" WatermarkCssClass="watermarked" />

26.UpdatePanelAnimation

功能:更新动画效果

细节:代码结构简单但是要说的东西很多,回头再说写专题吧

代码示意:

<ajaxToolkit:UpdatePanelAnimationExtender

runat="server" TargetControlID="up">

<Animations>

<OnUpdating> </OnUpdating>

<OnUpdated> </OnUpdated>

</Animations>

</ajaxToolkit:UpdatePanelAnimationExtender>

27.ToggleButton

功能:就是把一个CheckBox的逻辑应用到一个按钮上,于是就有了双态按钮这么个玩意,有点意思啊

闲言少叙,看代码:

<asp:CheckBox Checked="true" Text="I like ASP.NET" runat="server"/>

<cc1:ToggleButtonExtender runat="server" TargetControlID="CheckBox1" ImageWidth="19"

ImageHeight="19" UncheckedImageUrl="Image/down.gif" CheckedImageUrl="Image/up.gif" CheckedImageAlternateText="Check"

UncheckedImageAlternateText="UnCheck" />

28.ValidatorCallout

功能:Windows系统中最常见的气泡提示,比如你磁盘空间不足的时候……

细节: 是对数据验证控件的扩展,比较新鲜

代码示意:

<asp:RequiredFieldValidator runat="server" ControlToValidate="NameTextBox" Display="None" ErrorMessage="<b>Required Field Missing</b><br />A name is required." />

<asp:RequiredFieldValidator runat="server" ControlToValidate="PhoneNumberTextBox" Display="None" ErrorMessage="<b>Required Field Missing</b><br />A phone number is required.<div style='margin-top:5px;padding:5px;border:1px solid #e9e9e9;background-color:white;'><b>Other Options:</b><br /><a href=';quot;not implemented but you get the idea;)&quot;);'>Extract from Profile</a></div>" />

<asp:RegularExpressionValidator runat="server" ControlToValidate="PhoneNumberTextBox" Display="None" ErrorMessage="<b>Invalid Field</b><br />Please enter a phone number in the format:<br />(###) ###-####" ValidationExpression="((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}" />

<cc1:ValidatorCalloutExtender runat="Server" TargetControlID="NReq" HighlightCssClass="highlight" />

<cc1:ValidatorCalloutExtender runat="Server" TargetControlID="PNReq" HighlightCssClass="highlight" Width="350px" />

<cc1:ValidatorCalloutExtender runat="Server" TargetControlID="PNRegEx" HighlightCssClass="highlight" />

  评论这张
 
阅读(2781)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017