Atlas学习手记（1）：Hello，Atlas

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

1．创建“Atlas”应用程序

安装完Atlas之后，会在Visual Studio的项目模版里面出现一项“Atlas”Web 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过程中的一些东西记录下来与大家分享。

文中完整示例下载