zoukankan      html  css  js  c++  java
  • 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=" 300px" />

        
    <div>

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

        
    </div>

    </body>

    </html>

    运行后如下:


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

    文中完整示例下载

  • 相关阅读:
    A JavaScript Tree component which implements the J.Q.Walker II layout algorithm
    决策树Ecotree(转)
    Elasticsearch中关于transform的一个问题分析
    转发sqlserver http://www.cnblogs.com/jiazengtao/archive/2013/05/29/3102803.html
    时间GMT
    C#去掉json字符串中的换行符
    收藏的好的Jquery+css3
    存储过程中日期的转换
    关于头文件
    关于头文件
  • 原文地址:https://www.cnblogs.com/qfb620/p/1120892.html
Copyright © 2011-2022 走看看