您的位置：首页 > 编程语言 > ASP

[最新版]Asp.net Ajax 编程备忘录----细数28个服务器端控件 [转载]

2006-11-25 10:06 661 查看

转载在-------http://www.cnblogs.com/me-sa/articles/568959.html

Asp.net Ajax 编程备忘录----细数28个服务器端控件 [原创]
     时间：2006-11-22              作者：坚强2002开篇：To forget what we think we know about the limitations of the Web, and begin to imagine a wider, richer range of possibilities.
                                                                                                   -------------Jesse James Garrett

细节决定成败，回头再说现在开始…………
[align=left]   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表现的更像是一个容器
[/align]

代码示意：

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

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

TransitionDuration="250" AutoSize="None">

<Panes>

<ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">

<a href="" onclick="return false;" class="accordionLink">1. Accordion</a></Header>

</Content>

</ajaxToolkit:AccordionPane>

</Panes>

        </ajaxToolkit:Accordion>

[align=left] [/align]
[align=left]
2. AlwaysVisibleControl
   功能：最多的应用是在线小说的目录和不胜其烦的浮动小广告
   细节： (1)避免控件闪烁，把这个控件要在目标位置时使用absolutely position
                (2) HorizontalSide="Center" VerticalSide="Top" 使用这个方法控制浮动在什么位置
[/align]

代码示意：

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

[align=left]
3.Animation
   功能：28个控件种效果最酷的！顾名思义实现动画效果
   细节： (1)不只是控件：pluggable, extensible framework
                (2)用在什么时候：OnLoad OnClick OnMouseOver OnMouseOut OnHoverOver OnHoverOut
                (3)具体使用有很多可以谈的，有理由单独写一个Animation Xml 编程介绍
[/align]

代码示意：

<ajaxToolkit:AnimationExtender ID="ae"

runat="server" TargetControlID="ctrl">

</OnLoad>

</OnClick>

</OnMouseOver>

</OnMouseOut>

</OnHoverOver>

</OnHoverOut>

</Animations>

</ajaxToolkit:AnimationExtender>

[align=left]
4.CascadingDropDown
   功能：DropDownList联动，调用Web Service
   细节： (1)DropDownList行为扩展
                (2)如果使用Web service 方法签名必须符合下面的形式：
                [WebMethod]
                public CascadingDropDownNameValue[] GetDropDownContents(
                string knownCategoryValues, string category){...}
[/align]

代码示意：

<ajaxToolkit:CascadingDropDown ID="CascadingDropDown1" runat="server" TargetControlID="DropDownList1" Category="Make" PromptText="Please select a make" LoadingText="[Loading makes

]" ServicePath="CarsService.asmx" ServiceMethod="GetDropDownContents"/>

<ajaxToolkit:CascadingDropDown ID="CascadingDropDown2" runat="server" TargetControlID="DropDownList2" Category="Model" PromptText="Please select a model" LoadingText="[Loading models

]" ServiceMethod="GetDropDownContentsPageMethod" ParentControlID="DropDownList1"/>

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

[align=left]
   5.CollapsiblePanel
   功能：Xp任务栏折叠效果
   细节： (1)可以扩展任何一个 ASP.NET Panel control
                (2) CollapsiblePanel 默认认为使用了标准 CSS box model 早期的浏览器要!DOCTYPE 中设置页面为自适应方式提交数据rendered in IE's standards-compliant mode.
[/align]

代码示意：

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

[align=left]   6.ConfirmButton
   功能：就是弹出来一个确定对话框
   细节：本人认为不是最简单实现的方法，我的方法：
   this.Button1.Attributes["onclick"]="javascript:return confirm('确定要停止下载么？');";
      不知道是不是我没有发现这个控件的其它优势。

7.DragPanel
   功能：页面拖动
   细节： (1)TargetControlID 要拖动的控件
                (2)DragHandleID   拖动的标题栏所在的ControlID
[/align]

代码示意

<ajaxToolkit:DragPanelExtender ID="DPE1" runat="server"

TargetControlID="Panel3"

    DragHandleID="Panel4" />

[align=left]8.DropDown
   功能：什么都可以以下拉菜单的形式弹出来
   细节： (1)TargetControlID要在什么控件上实现扩展
                (2)DropDownControlID弹出来什么
[/align]

代码示意：

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

visibility: hidden;">

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

OnClick="OnSelect" />

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

OnClick="OnSelect" />

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

OnClick="OnSelect" />

</asp:Panel>

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

            DropDownControlID="DropPanel" />

[align=left]
9.DropShadow
   功能：阴影效果，其实可以放给美工实现
   细节： (1)Width 单位：px 默认5px
                (2)Opacity 不透明度0-1.0 默认.5
[/align]

代码示意：

<ajaxToolkit:DropShadowExtender ID="dse" runat="server"

TargetControlID="Panel1"

Opacity=".8"

Rounded="true"

        TrackPosition="true" />

[align=left]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.
[/align]

代码示意：

<ajaxToolkit:DynamicPopulateExtender ID="dp" runat="server"

TargetControlID="Panel1"

ClearContentsDuringUpdate="true"

PopulateTriggerControlID="Label1"

ServiceMethod="GetHtml"

UpdatingCssClass="dynamicPopulate_Updating" />

[align=left]11.FilteredTextBox
   功能：文本框数据过滤
   细节： (1)过滤条件Numbers LowercaseLetters UppercaseLetters   Custom
                (2)过滤条件也可以是Custom的组合 FilterType="Custom, Numbers"
                (3)ValidChars="+-=/*()." Custom要定义这样的有效字符串
                (4) 其实这是个鸡肋：你可以输入中文，聊胜于无，忍了
[/align]

示意代码：

<ajaxToolkit:FilteredTextBoxExtender ID="ftbe" runat="server"

TargetControlID="TextBox3"

FilterType="Custom, Numbers"

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

[align=left]12.HoverMenu
   功能：鼠标靠近时显示菜单，可以用在在线数据修改的表格上作为功能菜单
   细节： (1)PopupControlID要弹出来什么
                (2)PopupPostion 在哪里弹出来Left (Default), Right, Top, Bottom, Center.
                (3)OffsetX/OffsetY 弹出项与源控件的距离
                (4) PopDelay 弹出延时显示单位milliseconds. Default is 100.
[/align]

代码示意：

<ajaxToolkit:HoverMenuExtender ID="hme2" runat="Server"

TargetControlID="Panel9"

HoverCssClass="popupHover"

PopupControlID="PopupMenu"

PopupPosition="Left"

OffsetX="0"

OffsetY="0"

    PopDelay="50" />

[align=left]13.ModalPopup
   功能：Xp的关机效果，后面全部灰掉，很多邮箱的删除对话框都着种效果
   细节： (1)本质上讲这是一个对话框模版，比ConfirmButton有意义有更强的扩展性！
                (2)从下面的代码中我们发现点OK的时候可以调用后台方法
                (3)同时可以执行一段脚本
[/align]

代码示意：

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

<p>

<asp:Label ID="Label1" runat="server" BackColor="Blue" ForeColor="White" Style="position: relative"

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

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

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

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

</p>

</asp:Panel>

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

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

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

[align=left]14.MutuallyExlcusiveCheckBox
   功能：互斥复选框就像Radio一样
   细节： (1)Key属性用来分组就像RdiolistGroup一样
                (2)argetControlID用来绑定已有的CheckBox
[/align]

代码示意：

<ajaxToolkit:MutuallyExclusiveCheckboxExtender runat="server"

ID="MustHaveGuestBedroomCheckBoxEx"

TargetControlID="MustHaveGuestBedroomCheckBox"

    Key="GuestBedroomCheckBoxes" />

[align=left]15.NoBot
   功能：Captcha 图灵测试反垃圾信息控件
   细节： (1)OnGenerateChallengeAndResponse 这个属性是EventHandler<NoBotEventArgs> 调用服务器端的方法，注意方法签名
                       例如：   protected void CustomChallengeResponse(object sender, NoBotEventArgs e) {……}
[/align]

代码示意：

<ajaxToolkit:NoBot

ID="NoBot2"

runat="server"

OnGenerateChallengeAndResponse="CustomChallengeResponse"

ResponseMinimumDelaySeconds="2"

CutoffWindowSeconds="60"

  CutoffMaximumInstances="5" />

[align=left]16.NumericUpDown
   功能：实现Winform里面的Updown
   细节： (1)普通整数增减
                (2)值列表循环显示比如下面的第二个例子RefValues
                (3)调用Web Service的格式：
                [/align]

<ajaxToolkit:NumericUpDownExtender ID="NUD1" 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 ID="NumericUpDownExtender1" runat="server"

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

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

<ajaxToolkit:NumericUpDownExtender ID="NumericUpDownExtender2" 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 ID="NumericUpDownExtender4" runat="server"

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

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

[align=left]
17.PagingBulletedList
   功能：扩展BulletedList的分页功能
   细节： (1)可以控制每页最多显示多少条，是否排序
                (2)IndexSize表示index headings 的字符数，如果MaxItemPerPage设置了概属性被忽略
                (3)MaxItemPerPage分页每页最大条数
[/align]

代码示意：

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

TargetControlID="BulletedList1"

ClientSort="true"

IndexSize="1"

Separator=" - "

SelectIndexCssClass="selectIndex"

UnselectIndexCssClass="unselectIndex" />

[align=left]
18.PasswordStrength
功能：验证密码强度
细节： StrengthIndicatorType两种显示方式：文字提示，进度条提示
[/align]

代码示意：

<ajaxToolkit:PasswordStrength ID="PasswordStrength1" 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 ID="PasswordStrength2" 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 ID="PasswordStrength3" 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" />

[align=left]
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
[/align]

代码示意：

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

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

[align=left]
20.Rating
   功能：级别控件
   细节：又是一个鸡肋，没有太大实用价值，看代码吧
[/align]

代码示意：

<ajaxToolkit:Rating ID="ThaiRating" runat="server"

CurrentRating="2"

MaxRating="5"

StarCssClass="ratingStar"

WaitingStarCssClass="savedRatingStar"

FilledStarCssClass="filledRatingStar"

EmptyStarCssClass="emptyRatingStar"

OnChanged="ThaiRating_Changed" />

[align=left]
21.ReorderList
   功能：这个控件的炫酷程度仅次于Animation ，可以动态移动数据
   细节： (1)绑定数据，拖动数据之后数据将被更新到绑定源
                (2)它不是已有控件的扩展是全新的服务器端控件，只是它对Ajax行为是敏感的
                (3)重排的实现有两种方式：CallBack PostBack 前者的发生在页面上是没有PostBack的（也就是没有刷新页面）
                (4) 而数据添加或者编辑的时候就必须要使用PostBack来同步服务器端的数据状态
                (5)PostbackOnReorder就是针对两种策略进行选择
                (6)可以扩展的很多，三言两语难以说尽给出基本框架吧，回头再说
[/align]

代码示意：

<ajaxToolkit:ReorderList ID="ReorderList1" runat="server"

DataSourceID="ObjectDataSource1"

DragHandleAlignment="Left"

ItemInsertLocation="Beginning"

DataKeyField="ItemID"

SortOrderField="Priority"

AllowReorder="true">

</ItemTemplate>

</ReorderTemplate>

</DragHandleTemplate>

</InsertItemTemplate>

</ajaxToolkit:ReorderList>

[align=left]
22.ResizableControl
功能：就像设计状态一样可以拖动修改大小，可是有什么实际的意义么，放大字体？没有想到
细节： (1)HandleCssClass - The name of the CSS class to apply to the resize handle 这个属性必须要有！
[/align]

代码示意：

<ajaxToolkit:ResizableControlExtender ID="RCE" runat="server"

TargetControlID="PanelImage"

HandleCssClass="handleImage"

ResizableCssClass="resizingImage"

MinimumWidth="50"

MinimumHeight="20"

MaximumWidth="260"

MaximumHeight="130"

OnClientResize="OnClientResizeImage"

HandleOffsetX="3"

HandleOffsetY="3" />

[align=left]
23.RoundedCorners
   功能：控件圆角纯粹是控制外观的了，什么时候审美疲劳了还要改，呵呵
   细节： (1)还有一个非常非常坑人的地方：你必须要设置 CssClass="roundedPanel"要不然不起作用
                (2) Radius设置弧度，默认是5
                (3)好象只适用于容器
[/align]

代码示意：

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

[align=left]

24.Slider
   功能：实现WinForm中的Slider控件效果
   细节： (1)修改文本框的值也可以影响Slider的状态！这个反馈还是有用的！
[/align]

代码示意：

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

<cc1:SliderExtender ID="SliderExtender2" runat="server"

BehaviorID="Slider2"

TargetControlID="Slider2"

BoundControlID="TextBox1"

Orientation="Horizontal"

EnableHandleAnimation="true"

Minimum="0"

Maximum="100"

[align=left]
25.TextBoxWatermark
功能：文本水印
细节：没有什么说的看代码--->
[/align]

代码示意：

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

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

[align=left]
26.UpdatePanelAnimation
   功能：更新动画效果
   细节：代码结构简单但是要说的东西很多，回头再说写专题吧
[/align]

代码示意：

<ajaxToolkit:UpdatePanelAnimationExtender ID="ae"

runat="server" TargetControlID="up">

</OnUpdating>

</OnUpdated>

</Animations>

</ajaxToolkit:UpdatePanelAnimationExtender>

[align=left]
27.ToggleButton
功能：就是把一个CheckBox的逻辑应用到一个按钮上，于是就有了双态按钮这么个玩意，有点意思啊
闲言少叙，看代码：
[/align]

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

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

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

     UncheckedImageAlternateText="UnCheck" />

[align=left]
28.ValidatorCallout
   功能：Windows系统中最常见的气泡提示，比如你磁盘空间不足的时候……
   细节：是对数据验证控件的扩展，比较新鲜
[/align]

代码示意：

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

<asp:RequiredFieldValidator runat="server" ID="PNReq" 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='javascript:alert("not implemented but you get the idea;)");'>Extract from Profile</a></div>" />

<asp:RegularExpressionValidator runat="server" ID="PNRegEx" 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" ID="NReqE" TargetControlID="NReq" HighlightCssClass="highlight" />

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

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

[align=left]
全文完 [/align]

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： asp.net 服务器 ajax 编程 textbox server

相关文章推荐

新的分享

章节导航