作者: 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:38
#3
安装启动后,点击下一步后,有一个选项:install "Atlas" Visual Studiao Project Template。把它选上就可以了。
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 |