[ASP.NET] Atlas学习笔记
2011-07-12 12:23
323 查看
Atlas是微软提供的一个控件库，用于在ASP.NET中实现ajax效果，全称ASP.NET AJAX Control Toolkit
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控件了，接下来简单介绍下如何使用。
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
GetScriptReferences方法返回IEnumerable<ScriptReference>对象，用于获取脚本资源。
GetScriptDescriptors方法返回IEnumerable<ScriptDescriptor>对象，用于描述脚本，可为客户端脚本添加属性方法等。
这样看来，我们自己也是可以实现自定义的ExtenderControl的，查看了一下MSDN，果然发现了相关的教程
看过上面的教程后我也自己尝试开发了一个自定义Extender，TipExtender用于显示Tip
首先需要新建一个类库项目，添加引用System.Web.Extensions，System.Web
新建一个TipExtender继承ExtenderControl，实现抽象类
View Code var mousePosition = { x: 100, y: 100 };
$(document).mousemove(function (e) {
mousePosition = { x: e.pageX, y: e.pageY };
});
var Tip = function (id, text) {
var tip = $("#tip");
if (tip[0] == null) {
$("body").append("<p id='tip'></p>");
tip = $("#tip");
}
$("#" + id).hover(function () {
tip.html("<p id='tip'>" + text + "</p>");
tip.css({ display: "block", position: "absolute", left: mousePosition.x, top: mousePosition.y });
tip.fadeOut(3000);
},
function () {
tip.hide();
});
}
然后编译成程序集，就可以像Atlas一样添加我自己的ExtenderControl了，需要注意的一点是我没有把脚本嵌入到程序集中，所以在使用的时候要把脚本文件（Scripts）添加到项目中去
如何在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
添加一系列可折叠Panel1. 添加一个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 var mousePosition = { x: 100, y: 100 };
$(document).mousemove(function (e) {
mousePosition = { x: e.pageX, y: e.pageY };
});
var Tip = function (id, text) {
var tip = $("#tip");
if (tip[0] == null) {
$("body").append("<p id='tip'></p>");
tip = $("#tip");
}
$("#" + id).hover(function () {
tip.html("<p id='tip'>" + text + "</p>");
tip.css({ display: "block", position: "absolute", left: mousePosition.x, top: mousePosition.y });
tip.fadeOut(3000);
},
function () {
tip.hide();
});
}
然后编译成程序集，就可以像Atlas一样添加我自己的ExtenderControl了，需要注意的一点是我没有把脚本嵌入到程序集中，所以在使用的时候要把脚本文件（Scripts）添加到项目中去
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- [译]【NetCore学习笔记之Anchor TagHelper】ASP.NET Core MVC Anchor Tag Helper
- ASP.NET MVC 学习笔记(4) 分页处理
- ASP.Net学习笔记007--ASP.Net Input版自增
- VS2005 ASP.NET本地化学习笔记&感受
- asp.net 学习笔记[01] 新控件
- ASP.NET MVC Web API 学习笔记---第一个Web API程序
- Asp.net控件开发学习笔记-Asp.net客户端状态管理
- ASP.Net MVC开发基础学习笔记（7）：数据查询页面
- ASP.NET MVC 1.0 学习笔记（随时更新）
- ASP.NET 3.5核心编程学习笔记（38）：自定义缓存依赖
- ASP.NET预备知识学习笔记
- ASP.NET 学习笔记_11 行命令处理 和 分页
- ASP.Net MVC开发基础学习笔记（2）：HtmlHelper与扩展方法
- Asp.Net Ajax 学习笔记13 Microsoft AJAX Library中异步通信层使用
- asp.net学习笔记
- ASP.NET学习笔记四之段落&文本格式化&样式&链接
- [ASP.NET学习笔记之五]ASP.NET 中的缓存功能介绍
- ASP.NET 3.5核心编程学习笔记（46）：HTTP模块的编写
- ASP.NET学习笔记八之HTML事件属性
- ASP.NET 3.5核心编程学习笔记（49）：ASP.NET安全性之Forms身份验证