如何在vs中使用

1. 下载

ASP.NET AJAX Control Toolkit，下载地址

或者可以通过Nuget安装，Tools-->Library Package Manager-->Add Library Package Reference...

2. 打开vs，在toolbox中添加控件

在toolbox右键，显示右键菜单，点击“Choose Items...”

　　　在“Choose Toolbox Items”对话框中，点击“Browse...”按钮，选择刚才下载的dll

这样在Toolbox就添加了所有的Atlas控件了，接下来简单介绍下如何使用。

Demo

添加一系列可折叠Panel

1. 添加一个ToolkitScriptManager控件，需要使用Atlas控件，此控件必须添加

2. 添加一个Accordion控件

3. 添加一些列AccordionPanel控件

4. 为Accordion控件添加样式表

View Code

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .accordion
        {
            width: 400px;
        }

        .accordionHeader
        {
            border: 1px solid #2F4F4F;
            color: white;
            background-color: #2E4d7B;
            font-family: Arial, Sans-Serif;
            font-size: 12px;
            font-weight: bold;
            padding: 5px;
            margin-top: 5px;
            cursor: pointer;
        }

        .accordionHeaderSelected
        {
            border: 1px solid #2F4F4F;
            color: white;
            background-color: #5078B3;
            font-family: Arial, Sans-Serif;
            font-size: 12px;
            font-weight: bold;
            padding: 5px;
            margin-top: 5px;
            cursor: pointer;
        }

        .accordionContent
        {
            background-color: #D3DEEF;
            border: 1px dashed #2F4F4F;
            border-top: none;
            padding: 5px;
            padding-top: 10px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        <asp:Accordion ID="Accordion1" CssClass="accordion" HeaderCssClass="accordionHeader"
            HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent"
            runat="server">
            <Panes>
                <asp:AccordionPane ID="AccordionPane1" runat="server">
                    <Header>
                        header1</Header>
                    <Content>
                        content1</Content>
                </asp:AccordionPane>
                <asp:AccordionPane ID="AccordionPane2" runat="server">
                    <Header>
                        header2</Header>
                    <Content>
                        content2</Content>
                </asp:AccordionPane>
                <asp:AccordionPane ID="AccordionPane3" runat="server">
                    <Header>
                        header3</Header>
                    <Content>
                        content3</Content>
                </asp:AccordionPane>
            </Panes>
        </asp:Accordion>
    </div>
    </form>
</body>
</html

上面的例子里用的都是Atlas控件，同时，Atlas控件也可以应用在ASP.NET标准服务端控件上，例如给一个textbox添加一个colorpicker

1. 在设计页面添加一个textbox，此时应该在textbox边上有一个添加extender的标签，

2. 点击添加一个extender，选择colorpicker

View Code

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:ColorPickerExtender ID="TextBox1_ColorPickerExtender" runat="server"
            Enabled="True" TargetControlID="TextBox1">
        </asp:ColorPickerExtender

更多例子

获取源代码

可以通过官方网站上提供的方法获取所有源代码

http://www.asp.net/ajaxlibrary/act_enlist.ashx

自定义Extender

通过查看源代码发现，原来所有的控件都是继承System.Web.UI.ExtenderControl，重写方法GetScriptReferences和GetScriptDescriptors，来实现用javascript操作服务端控件的Dom元素。

GetScriptReferences方法返回IEnumerable<ScriptReference>对象，用于获取脚本资源。

GetScriptDescriptors方法返回IEnumerable<ScriptDescriptor>对象，用于描述脚本，可为客户端脚本添加属性方法等。

这样看来，我们自己也是可以实现自定义的ExtenderControl的，查看了一下MSDN，果然发现了相关的教程

看过上面的教程后我也自己尝试开发了一个自定义Extender，TipExtender用于显示Tip

首先需要新建一个类库项目，添加引用System.Web.Extensions，System.Web

新建一个TipExtender继承ExtenderControl，实现抽象类

View Code

[TargetControlType(typeof(Control))]
    public class TipExtender : ExtenderControl
    {
        protected override IEnumerable<ScriptDescriptor> GetScriptDescriptors(System.Web.UI.Control targetControl)
        {
            ScriptBehaviorDescriptor descriptor = new ScriptBehaviorDescriptor("MyExtender.TipBehavior", targetControl.ClientID);
            return new List<ScriptDescriptor> { descriptor };
        }

        protected override IEnumerable<ScriptReference> GetScriptReferences()
        {
            //microsoft ajax behavior script
            ScriptReference tipBehavior = new ScriptReference("Scripts\\TipBehavior.js");

            //jquery script
            ScriptReference jQuery = new ScriptReference("Scripts\\jquery-1.4.1.min.js");

            //my tip script
            ScriptReference tip = new ScriptReference("Scripts\\Tip.js");

            return new ScriptReference[] { tipBehavior, jQuery, tip };
        }
    }

添加脚本文件到Scripts目录下(我这里是用jquery实现的tip，所以需要添加jquery-1.4.1.min.js)

TipBehavior.js

View Code

// Register the namespace for the control.
Type.registerNamespace('MyExtender');

MyExtender.TipBehavior = function (element) {
    MyExtender.TipBehavior.initializeBase(this, [element]);
}

MyExtender.TipBehavior.prototype = {

    initialize: function () {
        MyExtender.TipBehavior.callBaseMethod(this, 'initialize');


        var tip = new Tip(this.get_element().id,this.get_element().value);
    },

    dispose: function () {
        MyExtender.TipBehavior.callBaseMethod(this, 'dispose');
    },
}

// Register the class as a type that inherits from Sys.UI.Control.
MyExtender.TipBehavior.registerClass('MyExtender.TipBehavior', Sys.UI.Behavior);

if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

jquery-1.4.1.min.js

Tip.js

View Code

然后编译成程序集，就可以像Atlas一样添加我自己的ExtenderControl了，需要注意的一点是我没有把脚本嵌入到程序集中，所以在使用的时候要把脚本文件（Scripts）添加到项目中去

posted on 2011-07-12 12:23 klice 阅读(340) 评论(0) 收藏举报

刷新页面返回顶部

klice's blog

公告

[ASP.NET] Atlas学习笔记

如何在vs中使用

Demo

获取源代码

自定义Extender