AJAXControlTooKit实用控件使用详解

Posted on 2012-11-14 19:09 星星之火116 阅读(7496) 评论(3) 编辑收藏举报

通过这两天的研究，发现了AJAXToolKit中许多比较实用的控件，在这里就和大家分享一下个人认为比较实用的控件，希望能对大家有所帮助。

一、圆角控件（RoundedCornersExtender）

该控件的最大的优势在于很简单的就可以做到圆角效果如图，这种效果我们在很多网站中都有见到过，是不是感觉做起来很费事呢？放心，有了AJAXToolKit控件集让你很快的实现这个圆角效果。

在开始实现之前，大家需要下载一下AXAXToolKit.dll,（点击下载AjaxControlToolkit.zip，或直接在AJAXToolkit官网下载）然后在工具栏中右击选择项如图：

然后在选择浏览，找到你所下载的控件集，点击确认，然后你就会发现你的AJAX Extends选项中多了好多的控件，这些都是AJAXToolKit中带的扩展控件。

下面我们新建一个RoundCorners.aspx页

在页中我们首先需要将ToolkitScriptManager控件添加进来，我们在使用所有的AJAXToolKit控件集中的控件时都需要在页面中添加ToolKitScriptManager控件。

页面布局代码如下：

<div>
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        <asp:Panel ID="Panel1" runat="server" Width="200" Height="150" BackColor="LightBlue">
        </asp:Panel>
        <asp:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server" TargetControlID="Panel1" Corners="All" Radius="20" >
        </asp:RoundedCornersExtender>
    </div>

我们看到RoundedCornersExtender控件有几个特别的属性需要进行注意。

第一个为TargetControlID所有的AJAXToolKit控件都会有这样的一个属性，该属性用来指示圆角控件所作用的对象的ID，即：Panel的ID。

第二个属性为Corners即要进行圆角化的对象的四个角，All为对所有的角都进行圆角化，同时这里我们可以选择left 、right 、top、bottom、topleft、topright、bottomleft、bottomright等选项

第三个属性为Radius主要用来设置圆角化的程度，该数值越大圆角化的程度也越大，可以根据需要自行设置。

是不是有点迫不及待呢？快点来试试吧，相信你也可以做出很漂亮的页面效果。

二、拖拽面板控件（DragPanelExtender）（点击即可拖动）

现在有很多的网站已经有了让用户对自己的个人空间进行自定义的布局的功能，就好像qq空间的自定义装扮一样，但是又跟那个不太一样，个人空间的模块可以自由的拖动、放置。下面我们通过这个拖拽面板的控件可以很自如的实现这种效果。

首先第一步还是和示例一中讲的一个样将在页中将ToolkitScriptManager控件添加进来，我们在使用所有的AJAXToolKit控件集中的控件时都需要在页面中添加ToolKitScriptManager控件（在下面的例子中就不再重复了，希望大家自己记得加上）。

页面布局代码如下：

<div>
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
            <div style="height: 300px; width: 250px; float: left; padding: 5px;" >
            <asp:Panel ID="Panel6" runat="server" Width="200px" Height="270px" style="z-index: 20;">
                <asp:Panel ID="Panel7" runat="server" Width="180" BackColor="LightBlue" Height="20px" style="cursor:pointer">
                 请拖动我O(∩_∩)O
                </asp:Panel>
                <asp:Panel  ID="Panel8" runat="server" Width="180" Height="120"
                    BackColor="YellowGreen"  >
                </asp:Panel>
            </asp:Panel>
        </div>
        <asp:RoundedCornersExtender ID="RoundedCornersExtender2" runat="server" TargetControlID="Panel7" Corners="All" Radius="20">
        </asp:RoundedCornersExtender>
        <asp:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server" TargetControlID="Panel8" Corners="All" Radius="20">
        </asp:RoundedCornersExtender>
                <asp:DragPanelExtender ID="DragPanelExtender2" runat="server" TargetControlID="Panel6" DragHandleID="Panel7">
                </asp:DragPanelExtender>
</div>

该页面中使用了3个Panel控件2个圆角控件和一个拖拽控件。圆角控件上一例子中我们已经讲过了。这里主要讲一下DragPanelExtender控件，该控件使用很简单，只需要设定一下器TargetControlID即可，这里设置的是Panel6，然后DragHandleID设置为：Panel7，这两个属性的意思分别为DragPanelExtender所作用的Panel，Panel7为托动的Panel，所以如果你在下边自己练习的时候会发现，只有托用Panel7时面板才会移动。

三、下面再给大家介绍一个比较实用的控件，我把它理解为可伸缩面板（CollapsiblePanelExtender），JQueryUI的布局中就有很多这样的效果。如图：

好了，下面先看下页面的布局，这里我们还是利用上一示例的页面进行如下布局：

<div>
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
            <div style="height: 600px; width: 500px; float: left; padding: 5px;" >
            <asp:Panel ID="Panel6" runat="server" Width="400px" Height="540px" >
                <asp:Panel ID="Panel7" runat="server" Width="390" BackColor="LightBlue" Height="60px" style="cursor:pointer">
                 请拖动我O(∩_∩)O <br />
                 <asp:Panel ID="Panel2" runat="server">
            <asp:Label ID="Label1" runat="server" Text="Let me Show"></asp:Label>
            <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/images/expand_blue.jpg"/></asp:Panel></asp:Panel>
                <asp:Panel  ID="Panel8" runat="server" Width="390" Height="300"
                    BackColor="YellowGreen"  >
                    <asp:Panel ID="Panel1" runat="server" BackColor="LightBlue">
                     O(∩_∩)O哈哈~你好啊！生如夏花----朴树<br />
            不知在黑暗中究竟沉睡了多久，<br />
            也不只要有多难才能睁开双眼<br />
            我从远方赶来<br />
            痴迷留恋人间<br />
            我为你来看我不顾一切<br />
            我将熄灭不能再回来<br />
            我在这里啊<br />
            就在这里啊<br />
            惊鸿一般短暂<br />
            像夏花一样绚烂<br />
         </asp:Panel> </asp:Panel></asp:Panel></div>
        <asp:RoundedCornersExtender ID="RoundedCornersExtender2" runat="server" TargetControlID="Panel7" Corners="All" Radius="20">
        </asp:RoundedCornersExtender>
        <asp:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server" TargetControlID="Panel8" Corners="All" Radius="20">
        </asp:RoundedCornersExtender>
                <asp:DragPanelExtender ID="DragPanelExtender2" runat="server" TargetControlID="Panel6" DragHandleID="Panel7">
                </asp:DragPanelExtender>
<asp:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" ExpandControlID="Panel2" CollapseControlID="Panel2"<br> Collapsed="true" <br> TargetControlID="Panel1" AutoCollapse="False" ImageControlID="ImageButton1" CollapsedImage="~/images/expand_blue.jpg" <br>ExpandedImage="~/images/collapse_blue.jpg" ExpandedText="Hide This" CollapsedText="Show This" SuppressPostBack="True">
        </asp:CollapsiblePanelExtender>
    </div>

这里边用到了DragPanelExtender、RoundedCornersExtender和CollapsiblePanelExtender，这里主要讲下伸缩面板控件。我们一个一个分析其属性。

1、看CollapseControlID和ExpandControlID这两个属性，我们发现这两个属性的值均为Panel2，我们可以理解为控制目标面板伸缩的面板，然后Panel2面板里包含了两项一个是Label显示”Let me Show"字样，一个是ImageButton即用户点击该按钮则目标面板显示或者隐藏

2、TargetControlID，即目标面板的ID，也就是我们的伸缩面板，这里为了方便演示，我将其背景色设为浅蓝色以示区别

3、Collapsed：该属性为让目标面板默认隐藏

4、AutoCollapse：设置是否自动隐藏

5、ImageControlID；即在panel2中的Image控件，即：用户点击显示隐藏的imagebutton

6、CollapsedImage、ExpandedImage：用来在用户点击Imagebutton时显示不同图片，来表示伸展或者收缩状态

7、ExpandedText、CollapsedText：在伸展或隐藏时显示的提示

四、弹出窗口控件ModalPopupExtender

我想大家都可能遇到过这样一种情况，在我们浏览某个页面时，如果需要进行某些操作，比如留言之类的，就会在当前页弹出一个登录窗体、并且将整个页面用一个比较浅的透明色遮盖。今天就通过ModalPopupExtender来实现这样的效果。

首先页面布局代码如下：

<style type="text/css">
    .backClass{ background:#A1A1A1;}
    </style>
 <div>
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
        <asp:Panel ID="Panel1" runat="server">
<asp:Panel ID="Panel3" runat="server" BackColor="LightBlue" Height="20" Width="80" style="cursor:pointer;">
            </asp:Panel>
        <table>
        <tr><td>账号：</td><td>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td></tr>
        <tr><td>密码：</td><td>
            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></td></tr>
        <tr><td>
            <asp:Button ID="Button1" runat="server" Text="登录" /></td><td>
                <asp:Button ID="Button2" runat="server" Text="取消" /></td></tr></table>
        </asp:Panel>
            <asp:Button ID="Button3" runat="server" Text="显示" />
        <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Button3" BackgroundCssClass="backClass" <br>CancelControlID="Button2" OkControlID="Button1" PopupControlID="Panel1" PopupDragHandleControlID="Panel3">
        </asp:ModalPopupExtender>
        <asp:Panel ID="Panel2" runat="server">
        </asp:Panel>
        </ContentTemplate>
        </asp:UpdatePanel>
    </div>

在开始介绍ModalPopupExtender的用法、属性之前，需要强调的一点是，该控件的使用必须放置在 <asp:UpdatePanel> <ContentTemplate> 之中 </ContentTemplate></asp:UpdatePanel>

下面开始讲述其属性：

1、TargetControlID：这里设置的目标ID属性为Button3，即用户点击ID为Button3的按钮时才可弹出登陆窗口

2、PopupControlID：即用户点击Button3之后要显示的控件的ID这里是Panel1

3、OkControlID和CancelID：点击此属性指定的控件时，会隐藏弹出窗口，并可以运行由OnOKScript和OnCancelScript脚本

4、BackgroundCssClass：，设置弹出窗口时，浏览器背景窗口的颜色

5、PopupDragHandleControlID：设置Popup弹出窗口中可以拖动的控件的ID，这里设置为Panel3（也可以不设置，非必须的）

好了，这样你也就很容易的做出一个带遮盖效果的登录窗体了快来试一下吧。

五、定位广告控件（AlwaysVisibleControlExtender）

我们在浏览很多网页的时候，都会遇到有些网页的边角处都有一些广告，如果你下拉浏览网页广告似乎永远都处在那个位置。下面就给大家演示下如何实现这样的效果。

页面布局代码如下：

<asp:Panel ID="Panel3" runat="server" Width="120" Height="200" >
            <asp:Image ID="Image1" runat="server" ImageUrl="~/images/紫色.jpg"  Width="110" Height="190"/>
        </asp:Panel>
        <asp:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1" runat="server" TargetControlID="Panel3" VerticalSide="Bottom" <br>HorizontalSide="Right" HorizontalOffset="0" VerticalOffset="0">
</asp:AlwaysVisibleControlExtender>

这个控件的使用也很简单

1、TargetControlID：设置要固定的控件的ID这里是Panel3

2、VerticalSide：设置其垂直固定位置有top ，middle ，bottom三个选项可选

3、HorizontalSide：设置其水平固定位置：有left，middle，bottom三个选项可选

4、HorizontalOffset、和VerticalOffset设置其水平、垂直、停靠的距离

通过这样简单的设置，你就可以实现固定广告的效果了。

六、滑动浏览图片控件（SlideShowExtender）

这个效果在很多网站都有用到，可以自动的显示图片，也可以上一页或者下一页显示图片。

好了，直接进入主题。页面布局代码如下：

<head runat="server">
    <title></title>
    <style type="text/css">
    #show{ width:500px;
         height:400px;
         background:blue;
         text-align:center;
    }
    </style>
    <script type="text/C#" runat="server">
        [System.Web.Services.WebMethod]
        [System.Web.Script.Services.ScriptMethod]
        public static AjaxControlToolkit.Slide[] GetSildes()
        {
            return new AjaxControlToolkit.Slide[]
            {
                new AjaxControlToolkit.Slide("img/460.jpg","Beautiful flower","Beautiful"),
                new AjaxControlToolkit.Slide("img/都在.jpg","都在","All here"),
                new AjaxControlToolkit.Slide("img/明艳.jpg","明艳","Shine"),
                new AjaxControlToolkit.Slide("img/蒲公英.jpg","蒲公英","英子"),
                new AjaxControlToolkit.Slide("img/泣露.jpg","沉霜","泣露"),
                new AjaxControlToolkit.Slide("img/向日葵.jpg","向日葵","向日葵花"),
                new AjaxControlToolkit.Slide("img/紫色.jpg","紫色","紫色的绚烂")
            };
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        <div id="show">
            <asp:Label ID="imageTitle" runat="server"></asp:Label><br />
            <asp:Image ID="Image1" runat="server" Height="300px" Style="border:1px solid black;width:auto" ImageUrl="~/SilderShow/img/460.jpg" AlternateText="Beautiful flower" /><br />
            <asp:Label ID="imageDescription" runat="server" ></asp:Label><br />
            <asp:Button ID="preybtn" runat="server" Text="《《" />
            <asp:Button ID="playbtn" runat="server" Text="Play" />
            <asp:Button ID="nextbtn" runat="server" Text="》》" />
            <asp:SlideShowExtender ID="SlideShowExtender1" runat="server" TargetControlID="Image1" SlideShowServiceMethod="GetSildes" AutoPlay="true" ImageTitleLabelID="iamgeTitle" ImageDescriptionLabelID="imageDescription" NextButtonID="nextbtn"  PlayButtonID="playbtn" PreviousButtonID="preybtn" PlayButtonText="Play" StopButtonText="Stop" Loop="true">
            </asp:SlideShowExtender>
        </div>
    </div>

显示效果：

下面来分析下SlideShowExtender的属性：

1、TargetControlID：即我们要显示的Image控件的ID

2、AutoPlay：设置是否自动播放

3、ImageTitleLabelID：设置用来描述图片标题的控件ID

4、ImageDescriptionLabelID：设置用来描述图片内容的控件ID

5、NextButtonID:设置用来进行下一页浏览的控件 ID

6、PreviousButtonID：用来进行上一页浏览的控件ID

SlideShowServiceMethod：通过该方法用来获取所要浏览展示的slide数组，也就是要浏览的图片，具体方法如向高亮标注部分。此方法返回一个Slide的数组，相当于对Slide数组的初始化，在写此方法的时候不要忘了将<script>标签的类型写为“text/C#”，同时还要添加 [System.Web.Services.WebMethod]、 [System.Web.Script.Services.ScriptMethod]这两个特性

七、个性化弹出提示控件（BalloonPopupExtender）

现在做web开发都比较注重用户体验，如果老是单调的用alert（）弹出提示框，用户体验会大打折扣，今天就给大家带来一个个性化的提示控件。

首先页面布局代码如下：

<div>
       <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
       </asp:ToolkitScriptManager>
       <asp:BalloonPopupExtender ID="BalloonPopupExtender1" runat="server" TargetControlID="btnshow" BalloonPopupControlID="Panel1" <br>BalloonStyle="Cloud" DisplayOnFocus="True" UseShadow="False" BalloonSize="Small" DisplayOnClick="True" DisplayOnMouseOver="True">
       </asp:BalloonPopupExtender>
       <asp:Panel ID="Panel1" runat="server" >
       O(∩_∩)O哈哈~真心喜欢这个东西！快来看看！
       </asp:Panel>
       <br />
       <asp:Button ID="btnshow" runat="server" Text="ShowBall" />
   </div>

BalloonPopupExtender控件的主要属性如下：

1、TargetControlID：即要引发提示信息的控件ID

2、BalloonPopupControlID：要向用户显示的控件ID

3、BalloonStyle:要显示的提示信息的风格这里有Cloud 、custom、Rectangle等三种形式

4、UseShadow：是否使用阴影效果

5、BalloonSize：设置要显示的提示信息的大小，根据信息的内容自行设定有small big medium三个选项可选

6、DisplayOnFocus、DisplayOnMouseOver、DisplayOnClick：分别为鼠标聚焦显示、覆盖显示和点击显示，可以通过设置其不同的显示方式来进行显示

显示效果：

当点击或者鼠标覆盖时都会显示这样的提示，同时还可以通过设置相关的css样式显示不同的样式。这里只是掩饰使用方法，望大家谅解。

到这里，本文已经基本结束了，这里只是讲了几种比较实用的AJAX扩展控件，通过这些控件我们可以很容易的就做出一些比较常见且实用的效果，当然了AJAXToolKit控件集里边还有很多的比较实用的控件，这里就不再一一介绍了，有兴趣的朋友可以自己去了解。

希望能给大家带来一些帮助。

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构

星星之火

公告

搜索

常用链接

我的标签

积分与排名

随笔分类 (10)

随笔档案 (128)

文章分类 (3)

阅读排行榜

评论排行榜

推荐排行榜

最新评论

AJAXControlTooKit实用控件使用详解