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";
}
}
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>
<atlas:ScriptManager runat="server" ID="scriptManager">
<Services>
<atlas:ServiceReference Path="WebService.asmx" />
</Services>
</atlas:ScriptManager>
接着编写客户端脚本,调用Web Service:
<Services>
<atlas:ServiceReference Path="WebService.asmx" />
</Services>
</atlas:ScriptManager>
<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>
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>
<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过程中的一些东西记录下来与大家分享。
文中完整示例下载
支持TerryLee的创业产品Worktile
Worktile,新一代简单好用、体验极致的团队协同、项目管理工具,让你和你的团队随时随地一起工作。完全免费,现在就去了解一下吧。
https://worktile.com
Worktile,新一代简单好用、体验极致的团队协同、项目管理工具,让你和你的团队随时随地一起工作。完全免费,现在就去了解一下吧。
https://worktile.com