Atlas学习手记(1):Hello,Atlas

关于Atlas的介绍已经有很多的文章,我就不废话了,对于我自己来说学习一个新东西,总是习惯于以一个简单的示例开始,Atlas也不例外,本文将会以一个非常简单的示例来踏上Atlas之旅,文中示例程序来自于Atlas老家

1.创建“Atlas”应用程序

安装完Atlas之后,会在Visual Studio的项目模版里面出现一项“AtlasWeb Site,如下图。在新建Atlas应用程序时,选择它,这样在新建的项目中的Bin文件夹下会存在一个Microsoft.Web.Atlas.dll的文件。


2
.创建简单的Web Service

现在需要创建一个简单的Web Service来供“Atlas”客户端脚本调用,WebService.asmx部分实现代码如下:

[WebMethod]

public string HelloWorld(String query)

{

    
string inputString = Server.HtmlEncode(query);

    
if (!String.IsNullOrEmpty(inputString))

    
{

        
return String.Format("Hello, you queried for {0}. The "

          
+ "current time is {1}", inputString, DateTime.Now);

    }


    
else

    
{

        
return "The query string was null or empty";

    }


}

3.添加ASP.NET页面

创建一个ASP.NET页面并添加客户端脚本来调用刚才我们创建的Web Service。打开Default.aspx页面后,看到有这样一段代码:

<atlas:ScriptManager runat="server" ID="scriptManager">

</atlas:ScriptManager>
ScriptManager
Atlas一个重要的控件,它用来处理页面上的所有Atlas组件以及局部页面的更新,生成相关的客户端脚本,关于ScriptManager后面还会仔细分析。在ScriptManager中间引入Web Service的路径:
<atlas:ScriptManager runat="server" ID="scriptManager">

    
<Services>

        
<atlas:ServiceReference Path="WebService.asmx" />

    
</Services>

</atlas:ScriptManager>
接着编写客户端脚本,调用Web Service
<script type="text/javascript" language="JavaScript">

     
function DoSearch()

     
{

       
var SrchElem = document.getElementById("SearchKey");

       WebService.HelloWorld(SrchElem.value, OnRequestComplete);

     }


     

     
function OnRequestComplete(result)

     
{

       
var RsltElem = document.getElementById("Results");

       RsltElem.innerHTML 
= result;

     }


</script>

其中DoSearch()方法负责调用Web Service的远程方法,OnRequestComplete()在异步调用完成时执行,在本示例中负责把结果显示在<Span>上。完整地Default.aspx页面代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

    
<title>Atlas Script Walkthrough</title>

    
<atlas:ScriptManager runat="server" ID="scriptManager">

        
<Services>

            
<atlas:ServiceReference Path="WebService.asmx" />

        
</Services>

    
</atlas:ScriptManager>

    
<style type="text/css">

     body 
{ font: 11pt Trebuchet MS;

        font-color
: #000000;

        padding-top
: 72px;

          text-align
: center}


     .text 
{ font: 8pt Trebuchet MS }

   
</style>

</head>

<body>

    
<form id="Form1" runat="server">

        
<div>

            Search for

            
<input id="SearchKey" type="text" />

            
<input id="SearchButton" type="button" value="Search" onclick="DoSearch()" />

        
</div>

    
<script type="text/javascript" language="JavaScript">

         
function DoSearch()

         
{

           
var SrchElem = document.getElementById("SearchKey");

           WebService.HelloWorld(SrchElem.value, OnRequestComplete);

         }


         

         
function OnRequestComplete(result)

         
{

           
var RsltElem = document.getElementById("Results");

           RsltElem.innerHTML 
= result;

         }


    
</script>

    
</form>

    
<hr style="width: 300px" />

    
<div>

        
<span id="Results"></span>

    
</div>

</body>

</html>

运行后如下:


至此,一个简单Atlas应用程序就完成了。后续文章中,我会把自己学习Atlas过程中的一些东西记录下来与大家分享。

文中完整示例下载

posted @ 2006-07-25 18:09  TerryLee  阅读(15438)  评论(92编辑  收藏  举报