Ajax Control Toolkit 34个服务器端控件(24-34)

最新推荐文章于 2024-07-25 19:42:58 发布

zclzzz

最新推荐文章于 2024-07-25 19:42:58 发布

阅读量426

点赞数

文章标签：服务器 ajax server textbox winform postback

24．ReorderList

【功能概述】

ReorderList是一个全新的控件。它可以实现逐条列出数据并实现交互。用户简单的拖拽就可以改变数据的排列顺序并更新到数据源。在本控件中如果SortOrderField 属性设置之后排序将自动完成。

【细节】

(1)绑定数据，拖动数据之后数据将被更新到绑定源

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

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

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

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

【示意代码】

代码示意：

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

    DataSourceID="ObjectDataSource1"

    DragHandleAlignment="Left"

    ItemInsertLocation="Beginning"

    DataKeyField="ItemID"

    SortOrderField="Priority"

    AllowReorder="true">

      <ItemTemplate> </ItemTemplate>

      <ReorderTemplate> </ReorderTemplate>

      <DragHandleTemplate> </DragHandleTemplate>

      <InsertItemTemplate> </InsertItemTemplate>

</ajaxToolkit:ReorderList>

这个控件是非常独立，并且还是适用于表现Buleted的数据，二维数据就无能为例了

            DataSourceID="ObjectDataSource1" 这是必须要有的！下面是它的Template框架：

<ajaxToolkit:ReorderList ID="ReorderList1" PostBackOnReorder="false" runat="server" DataSourceID="ObjectDataSource1" CallbackCssStyle="callbackStyle"

        DragHandleAlignment="Left" ItemInsertLocation="Beginning" DataKeyField="ItemID" SortOrderField="Priority">

        <ItemTemplate></ItemTemplate>

        <EditItemTemplate></EditItemTemplate>

        <ReorderTemplate></ReorderTemplate>

        <DragHandleTemplate> </DragHandleTemplate>

        <InsertItemTemplate> </InsertItemTemplate>

</ajaxToolkit:ReorderList>

25. ResizableControl

【功能概述】

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

【细节】

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

(2)   WEB2.0时代用户什么都是可以自定义的？？难道是这个原则下的产物么？？不理解

(3)   在前卫的飞鸽网站上我都一直没有看到关于ResizableControl的应用，期待一个成功的应用

【示意代码】

代码示意：

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



26. RoundedCorners

【功能】

控件圆角纯粹是控制外观的了，什么时候审美疲劳了还要改。据说GUI风格也是N年一轮回，这让我想起来了一个27KB的QQ，命令行界面，真的是这样么？穿孔纸带据说是第一代GUI，不会有一天真的回到那个时代吧?

   【细节】

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

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

                (3)只适用于容器 WebControl

       【示意代码】

代码示意：

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

27. Slider

【功能概述】

实现WinForm中的Slider控件效果，新浪论坛用来分页了，还有的用来调整“时间----------|----热度”，创意！

【细节】

(1)   修改文本框的值也可以影响Slider的状态

【示意代码】

代码示意：

              <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"

                                />

28. Tabs NEW！！！

Tabs是我认为这一次新增控件中最实用的好东东，在编码风格上与所有嵌套式的控件一样：

           <ajaxToolkit:TabContainer runat="server"

        OnClientActiveTabChanged="ClientFunction"

        Height="150px">

    <ajaxToolkit:TabPanel runat="server"

        HeaderText="Signature and Bio"

        <ContentTemplate>

            ...

        </ContentTemplate>

    />

</ajaxToolkit:TabContainer>

Demo效果让我们很容易想到最近改版之后的网页主页和新浪主页和Accordion比较一下各有千秋，是对经典WinForm的一种继承。

29 .TextBoxWatermark

【功能概述】

对文本框进行扩展，文本水印效果。

看了几十个WEB2.0的网站，没想到，见到最多的就是这种水印效果，看来很受欢迎。

【示意代码】

代码示意：

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

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

30. ToggleButton

【功能概述】

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

实际上示例页面并没有突出这个控件功能上的优势，对这个控件的操作引起页面上数据的更新，这才是CheckBox控件封装成Button的最终原因。

【示意代码】

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

31．UpdatePanelAnimation

【功能概述】

更新动画效果，个人认为应用于时间较短的场合，时间长了这个动画就有点不合适了，毕竟这是一个过渡效果；时间长还是UpdateProgress比较好。

   【细节】

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

代码示意：

<ajaxToolkit:UpdatePanelAnimationExtender ID="ae"

runat="server" TargetControlID="up">

     <Animations>

        <OnUpdating>   </OnUpdating>

        <OnUpdated>   </OnUpdated>

    </Animations>

</ajaxToolkit:UpdatePanelAnimationExtender>

32. ValidatorCallout

【功能概述】

Windows系统中最常见的气泡提示，比如你磁盘空间不足的时候。是对数据验证控件的扩展，比较实用，页面效果的确是比以前那个红色的星号醒目多了！

【细节】

Errormessage是一个开放的属性，我们可以进行丰富的扩展，大胆的想象，让显示出来的气泡更有意义

代码示意：
<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("No phone number available in profile.");'>Extract from Profile</a></div>" />

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

还有一段：

代码示意：
<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" />

33. ListSearchExtender
【功能概述】

支持对ListBox or DropDownList的扩展通过用户键入的字符对列表中的数据进行过滤，在WinForm中做的更好一些。顺便说一下在winform里面以前在 VS6.0的时代我们是怎么实现这个功能的呢？还记得吗？Sendmessage函数向ListBox或者Combox发送Find_Text消息，很怀旧了

【细节】

1. PromptText属性的作用有两个，一是显示提示信息，省的用户不知道还有这个功能。再者就是即时的显示用户输入的数据。

2. 在Safari中DropDownList扩展失效；Opera中后退键会被认为要后退一页！！！

3. 显然这个控件如果还有什么要说的就是可以设置Prompt信息的外观（样式+位置）

看代码：

<ajaxToolkit:ListSearchExtender runat="server"
    TargetControlID="ListBox1"
    PromptText="Type to search"
    PromptCssClass="ListSearchExtenderPrompt"
    PromptPosition="Top" />
34. Slider Show
【功能概述】

在Web2.0时代，博客是一个标志，在博客上挂着的图片幻灯片同样成为一个标记。

【细节】

1. 首先它是对图片控件的扩展，之后的问题就是：我们要把图片取出来；下面是方法：SlideShowServiceMethod - The webservice method that will be called to supply images. The signature of the method must match this:

· [System.Web.Services.WebMethod]

· [System.Web.Script.Services.ScriptMethod]

public AjaxControlToolkit.Slide[] GetSlides() { ... }

1. 还要设置的就是Web Service 去图片的路径SlideShowServicePath

2. NextButtonID PlayButtonID PreviousButtonID PlayButtonText StopButtonText

PlayInterval ImageDescriptionLabelID Loop AutoPlay头脑中想象着任何一个播放器，这些属性就很容易理解了。

<ajaxToolkit:SlideShowExtender runat="server"
    TargetControlID="Image1"
    SlideShowServiceMethod="GetSlides"
    AutoPlay="true"
    ImageDescriptionLabelID="imageLabel1"
    NextButtonID="nextButton"
    PlayButtonText="Play"
    StopButtonText="Stop"
    PreviousButtonID="prevbutton"
    PlayButtonID="playButton"
    Loop="true" />

zclzzz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax Control Toolkit 34个服务器端控件(24-34)

24．ReorderList 【功能概述】 ReorderList是一个全新的控件。它可以实现逐条列出数据并实现交互。用户简单的拖拽就可以改变数据的排列顺序并更新到数据源。在本控件中如果SortOrderField 属性设置之后排序将自动完成。【细节】 (1)绑定数据，拖动数据之后数据将被更新到绑定源 (2)它不是已有控件的扩展是全新的服务器端控件，只是它对Ajax行为是敏感的 (3)重排的实现有两种方式：CallBack PostBack
复制链接

扫一扫