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过程中的一些东西记录下来与大家分享。

文中完整示例下载
posted @ 2006-07-25 18:09  TerryLee  阅读(15414)  评论(92)  编辑  收藏  举报