一、什么是Atlas？
微软声称Atlas的目标在于服务器上将客户程序脚本集成到ASP.NET，以提供一个全面的开发平台。Atlas平台包含两部分：客户端部分和服务器部分。对客户端，它具有的特点是：
· 面向对象相容的Java语言API。具有.NET开发经验的开发人员非常熟悉其面向对象设计。
· 自动浏览器兼容。理论上可运行多个浏览器时不需要专门的代码。
· 客户端程序API和组件提供丰富的用户界面特点，例如拖拽动作。用户可以将这些特征添加到HTML控制器而只需要很少甚至不需要任何代码。
· 客户端程序开发的函数声明模块与ASP.NET服务控制器的函数声明语法相似。
二、Atlas入门基础
首先，我们要了解Atlas中最主要的一个控件：ScriptManager，它用来处理页面上的所有Atlas组件以及局部页面的更新，生成相关的客户端脚本。(具体的语法参看：ScriptManager Class)
<atlas:ScriptManager
EnablePartialRendering="true|false"
EnableScriptComponents="true|false"
ID="string"
OnPageError=""
runat="server"
>
<ErrorTemplate>
<!-- HTML -->
<span id="errorMessageLabel" runat="server"></span>
<input id="okButton" type="button" value="OK" runat="server" />
</ErrorTemplate>
<Scripts>
<atlas:ScriptReference
Browser="Atlas"
Path=""
ScriptName="AtlasCuttom"
/>
</Scripts>
<Services>
<atlas:ServiceReference
GenerateProxy="true|false"
Path=""
Type=""
/>
</Services>
</atlas:ScriptManager>
通过ScriptManger可以定义页面错误事件、错误显示模板，定义脚本集合和服务集合。通过属性EnablePartialRendering 属性决定是否启用局部重绘的模式，EnableScriptComponents 属性决定是否启用 XML 脚本模式。
其次，Atlas框架包含了丰富的组件来简单化客户端脚本。
在Atlas中自己定义了中间的Xml脚本，然后通过这些脚本转换成相应的Javascript脚本以及在后端进行相应的事件处理等。通过Xml脚本的<components>节设置控件数据源以及把Html控件或Asp.NET服务器控件提升为Atlas组件。
<input type="text" id="searchText" />
<input type="button" id="searchButton" />
<script type="text/xml-script">
<page xmlns="http://schemas.microsoft.com/xml-script/2005">
<references>
<add src="ScriptLibrary/Atlas/AtlasUI.js" />
<add src="ScriptLibrary/Atlas/AtlasControls.js" />
</references>
<components>
<textbox id="searchText" />
<button id="searchButton">
<bindings>
<!-- dataContext dataPath
searchTextBoolean
searchButtonEnable
-->
<binding property="enabled"
dataContext="searchText" dataPath="text.length"
transform="NumberToBoolean" />
</bindings>
<click>
<!-- searchMethod -->
<invokeMethod target="searchMethod" method="invoke" />
</click>
</button>
<serviceMethod id="searchMethod">
<bindings>
<!-- searchText-->
<binding property="parameters" propertyKey="query"
dataContext="searchText" dataPath="text" />
</bindings>
</serviceMethod>
</components>
</page>
</script>
第三，javascript客户端脚本的集成
如果您对于javascript脚本熟悉的话，你也可以不用Xml脚本来处理，而直接使用javascript脚本来进行回调处理。
三、Atlas入门演练
下面是一个简单的例子，主要是说明ASP.NET如何通过Atlas框架来实现Ajax。例子通过一个简单的按钮事件把文本框的内容保存到<span>中直接显示出来。
首先，建立一个WebService服务，WebService.asmx。
using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
namespace AtlasDemo
{
/// <summary>
/// WebService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class WebService : System.Web.Services.WebService
{
public WebService()
{
//
//InitializeComponent();
}
[WebMethod]
public string HelloWorld(String query)
{
string inputString = Server.HtmlEncode(query);
if (!String.IsNullOrEmpty(inputString))
{
return String.Format("Hello,{1}", inputString);
}
else
{
return "The query string was null or empty";
}
}
}
}
其次，建立一个WebForm页面，Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="AtlasDemo._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>AtlasDemo</title>
</head>
<body>
<form id="form1" runat="server">
<atlas:ScriptManager ID="ScriptManager1" runat="server" >
<Services>
//WebService
<atlas:ServiceReference Path="~/WebService.asmx" />
</Services>
</atlas:ScriptManager>
<div>
Search for
<input id="SearchKey" type="text" />
<input id="SearchButton" type="button" value="Search" />
</div>
<hr />
<div>
<span id="Results"></span>
</div>
</form>
//Xml
<script type="text/xml-script">
<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
<references>
</references>
<components>
<textBox id="SearchKey" />
//WebServicequery
//id=SearchKeyText
<serviceMethod id="helloService"
url="WebService.asmx" methodName="HelloWorld">
<bindings>
<binding dataContext="SearchKey"
dataPath="text"
property="parameters"
propertyKey="query" />
</bindings>
<completed>
<invokeMethod target="resultsBinding"
method="evaluateIn" />
</completed>
</serviceMethod>
//ClickhelloServiceWebService
//WebMethod
<button id="SearchButton">
<click>
<invokeMethod target="helloService" method="invoke" />
</click>
</button>
//HelloWordid=resultsText
<label id="results">
<bindings>
<binding id="resultsBinding"
dataContext="helloService"
dataPath="result"
property="text"
automatic="false" />
</bindings>
</label>
</components>
</page>
</script>
</body>
</html>
第三，javascript脚本实现方式。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="AtlasDemo._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>AtlasDemo</title>
</head>
<body>
<form id="form1" runat="server">
<atlas:ScriptManager ID="ScriptManager1" runat="server" >
<Services>
<atlas:ServiceReference Path="~/WebService.asmx" />
</Services>
</atlas:ScriptManager>
<div>
Search for
<input id="SearchKey" type="text" />
<input id="SearchButton" type="button" value="Search"
οnclick="DoSearch()" />
</div>
<hr />
<div>
<span id="Results"></span>
</div>
</form>
<script type="text/javascript">
function DoSearch()
{
var SrchElem = document.getElementById("SearchKey");
//WebServiceHelloWorld
AtlasDemo.WebService.HelloWorld(SrchElem.value, OnRequestComplete);
}
//
function OnRequestComplete(result)
{
var RsltElem = document.getElementById("Results");
RsltElem.innerHTML = result;
}
</script>
</body>
</html>
四、总结
本文目的主要是想让初学者对Atlas有个初步的了解，至于深入的一些研究，网络上也有很多的例子了，在
http://Atlas.asp.net 上的例子里面也讲得比较详细了。另外，使用过程中要特别注意：
l 务必设定ScriptManager 的EnablePartialRendering 属性为true，否则将和以前一样引发整页的PostBack而达不到Ajax的局部更新的效果。
l 使用Atlas的UpdatePanel容器时，在其内部的控件，可以达到局部更新效果，但是它往返服务器和客户端所产生的数据流量还是和普通的整页引发PostBack一样，只是采用UpdatePanel作为容器可以达到局部刷新，而不会一起页面的闪烁而已。
五、Atlas相关资料
下载地址：
http://atlas.asp.net/default.aspx?tabid=47&subtabid=471
相关资料及Blog：
http://forums.asp.net/default.aspx?GroupID=34
ASP.NET Atlas学习
Dflying Chen
Atlas快速上手体验
扫一扫
843
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
