作者: dengsu888666 发表日期: 2006-09-15 14:49 文章属性: 原创 复制链接


  本文通过介绍Atlas的最新技术的使用,使你能够理解什么是Atlas技术,对学习Atlas有很大帮助。在这里你将要跟着我做一个基本的Atlas程序,下面的程序是使用Atlas控件通过客户端脚本远程调用Webservice,然后把结果显示到Web页面上,但不需要通过把页面提交到服务器端就可以完成。
  在作这个例子之前,你首先要安装NET Framework version 2.0和Visual Studio 2005开发工具,另外还要安装Atlas的程序包,你可以到微软的网站下载Atlas的安装程序。Atlas安装完后,会在你的开发工具的新建网站对话框模版列表中显示一个”Atlas”Web Site的Atlas模版项。你先选择这个模版项建一个Atlas的Web网站。开发工具会自动产生一个配置好的Web.config文件。具体操作步骤如下:
1.选择“文件”----“新建“----“网站”菜单项
2.在新建网站对话框中,选择'Atlas' Web Site模版项
3.在“位置”选项中选择“文件系统”,选择一个路径和所用语言。然后确定。如下图
图11


4.打开解决方案资源管理器,选择当前解决方案,点击鼠标右键选择快捷菜单项“添加新项”,选择Web服务,并命名为HelloWorldService.asmx,选择语言,点击添加。
图22


  在Web服务代码里添加一个HelloWorld方法,用于返回服务器日期和时间,这个方法的参数为string类型,返回值为按一定格式要求显示的string类型。完整的Web服务代码如下:

  C#代码如下:

<%@ WebService Language="C#" Class="Samples.AspNet.HelloWorldService" %>

using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
namespace Samples.AspNet {

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class HelloWorldService : System.Web.Services.WebService {

  [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";
  }
  }
}
}
 
VB代码如下:

<%@ WebService Language="VB" Class="Samples.AspNet.HelloWorldService" %>

Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols

Namespace Samples.AspNet

<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
Public Class HelloWorldService
  Inherits System.Web.Services.WebService

  <WebMethod()> _
  Public Function HelloWorld(ByVal query As String) As String
  Dim inputString As String = Server.HtmlEncode(query)
  If Not String.IsNullOrEmpty(inputString) Then
    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"
  End If
  End Function

End Class
End Namespace

5.添加一个Web窗体,命名为AtlasScript.aspx,在添加Web窗体时不要选择“把代码放在单独的文件中”选择项。
6.切换到页代码浏览,复制下面代码粘贴到你的@Page标记下面。

1.     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2.       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3.    
4.     <html xmlns="http://www.w3.org/1999/xhtml">
5.      
6.       <head id="Head1" runat="server">
7.       <atlas:ScriptManager runat="server" ID="scriptManager">
8.         <services>
9.         <atlas:servicereference path="~/HelloWorldService.asmx" />
10.         </services>
11.       </atlas:ScriptManager>
12.       <style type="text/css">
13.         body { font: 11pt Trebuchet MS;
14.           font-color: #000000;
15.           padding-top: 72px;
16.           text-align: center }
17.      
18.         .text { font: 8pt Trebuchet MS }
19.       </style>
20.      
21.       </head>
22.       <body>
23.       <form runat="server">
24.       <div>
25.         Search for
26.         <input id="SearchKey" type="text" />
27.         <input id="SearchButton" type="button" value="Search"
28.         onclick="DoSearch()" />
29.       </div>
30.       </form>
31.       <hr style="width: 300px" />
32.       <div>
33.       <span id="Results"></span>
34.       </div> </body>
35.     </html>

  在上面的代码中有一个很重要的Atlas控件ScriptManager,, 它用来处理页面上的所有Atlas组件以及局部页面的更新,并生成相关的客户端脚本,在ScriptManager控件中声明了要调用的Web服务的URL,没有这个声明,在脚本中将不能调用这个Web服务。关于ScriptManager,将在以后的文章中作详细介绍。
7.现在要添加调用Web服务的脚本代码。复制下面的脚本粘贴到AtlasScript.aspx中。这个脚本的主要作用是调用Web服务,然后把返回的结果显示到页面上。

1.     <script type="text/javascript">
2.    
3.     function DoSearch()
4.     {
5.       var SrchElem = document.getElementById("SearchKey");
6.       Samples.AspNet.HelloWorldService.HelloWorld(SrchElem.value, OnRequestComplete);
7.     }
8.    
9.     function OnRequestComplete(result)
10.     {
11.       var RsltElem = document.getElementById("Results");
12.       RsltElem.innerHTML = result;
13.     }
14.    
15.     </script>

    DoSearch脚本函数用于调用Web服务,把用户在TexBox中的输入值和OnRequestComplete回调函数传入Web服务HelloWorld方法,回调函数必须要有,因为是异步调用,必须要有一种机制通知客户端调用完成后的返回值。当异步调用Web方法完成后OnRequestComplete将会被调用。这个回调函数通过参数result获得返回值,这个返回值就是调用Web服务的方法.HelloWorld的返回值。
在@ Page下面完整的代码如下:

1.     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2.       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3.      
4.     <html xmlns="http://www.w3.org/1999/xhtml">
5.      
6.     <head id="Head1" runat="server">
7.       <atlas:ScriptManager runat="server" ID="scriptManager">
8.         <services>
9.         <atlas:servicereference path="~/HelloWorldService.asmx" />
10.         </services>
11.       </atlas:ScriptManager>
12.       <style type="text/css">
13.         body { font: 11pt Trebuchet MS;
14.           font-color: #000000;
15.           padding-top: 72px;
16.           text-align: center }
17.      
18.         .text { font: 8pt Trebuchet MS }
19.       </style>
20.      
21.     </head>
22.     <body>
23.       <form runat="server">
24.       <div>
25.         Search for
26.         <input id="SearchKey" type="text" />
27.         <input id="SearchButton" type="button"
28.         value="Search"
29.         onclick="DoSearch()" />
30.       </div>
31.       </form>
32.       <hr style="width: 300px" />
33.       <div>
34.       <span id="Results"></span>
35.       </div>
36.       <script type="text/javascript">
37.      
38.       function DoSearch()
39.       {
40.         var SrchElem = document.getElementById("SearchKey");
41.         Samples.AspNet.HelloWorldService.HelloWorld(SrchElem.value,
42.         OnRequestComplete);
43.       }
44.      
45.       function OnRequestComplete(result)
46.       {
47.         var RsltElem = document.getElementById("Results");
48.         RsltElem.innerHTML = result;
49.       }
50.      
51.       </script>
52.     </body>
53.     </html>

  现在你可以运行AtlasScript.aspx进行测试了。运行后在Search for后的文本框中输入一些内容再点击Search按钮,可以看到调用Web服务方法HelloWorld的返回内容显示到了页面上,但整个页面并没有刷新,他和以往的Web程序相比,主要是在性能上有了很大的提升,这就是Ajax技术目前比较流行的一个主要原因。


  我的下一篇文章:用VS2005创建一个Atlas Web应用程序(2)
阅读全文(3223) | 回复(7) | 推送 | 举报
 
相关文章
 暂无相关文章,敬请关注!
  共7条回复
guest 发表于 2006-09-15 17:59
#1

我安装了Atlas的程序包,但没有出现”Atlas”Web Site的Atlas模版项,是怎么会事呀,我安装的时候没有设路径,是默认的有影响吗

guest 发表于 2006-09-15 18:17
#2

请楼主回答

guest 发表于 2006-09-15 18:38
#3

安装启动后,点击下一步后,有一个选项:install "Atlas" Visual Studiao Project Template。把它选上就可以了。

guest 发表于 2006-09-24 15:21
#4

我是新手,对我很有帮助,我正在努力学习

我会继续关注你的

guest 发表于 2006-09-29 08:28
#5

不错。近期正在学习ATLAS。这些文章对我的帮助很大。我将会继续关注!有什么问题我会上来提的,到时还希望版主能帮忙搞定一下。谢谢!

guest 发表于 2007-01-12 15:56
#6

<script language="javascript">
    var g_panel;
    var g_selColor;
    var g_label;
   
    function pageLoad()
    {
      // 创建Atlas Sys.UI.Control 类实例
        g_panel=new Sys.UI.Control($('panel'));
        g_panel.initialize();
        g_panel.set_cssClass('normal');


请教:在我的机器上安装的是ASPAJAXExtSetup.msi(2006-12月版的),但安装之后,运行您所给的示例,在Ie中浏览时javascript代码段报错如下:出现运行时间错误,是否调试?行69,错误:缺少对象。 然后,就看不到预期的效果。

我觉着是不是缺少某个脚本来解析Sys.UI.Control,但也不知该引用哪个脚本。

请教您,希望不吝赐教!谢谢!
我的邮箱是: gaozs@owlsoft.com.cn

guest 发表于 2007-01-26 13:56
#7

安装启动后,点击下一步后,有一个选项:install "Atlas" Visual Studiao Project Template。把它选上就可以了。
我也沒有啊?重裝沒找到。