Hello World! in Atlas
Let's begin with the classic Hello World! example.
TheHelloWorld.aspx page contains two buttons. When a button is clicked,data is retrieved from the server and displayed in an alert box.
Inthis example we'll see how to make asynchronous calls to the server,i.e. how to retrieve data from the server without doing a postback. Todo this, we have to invoke a server method from client code.
Using Atlas, we can
- Invoke a method defined in an .aspx page (i.e. a method of the Page class)
- Invoke a method defined in a Web Service
Inour .aspx page, we declare two buttons. When the first button isclicked, a method HelloWorld() defined in the Page is called. Thismethod returns a string that is displayed in an alert box. When thesecond button is clicked, another HelloWorld() method, exposed in a Web Service, is called.
The code for the two buttons is
HelloWorld.aspx
<div>
<input type="button"
value="Hello from Page"
onclick="sayHelloFromPage()" />
<input type="button"
value="Hello from WebService"
onclick="sayHelloFromWS()" />
</div>
Asyou can see, the event handlers for the click event of the two buttonsare two client functions, sayHelloFromPage() and sayHelloFromWS(). Boththese functions are responsible to call the HelloWorld() server methodswe talked above.
So, we have to code something like
function sayHelloFromPage() {
// Call HelloWorld() from Page.
}
function sayHelloFromWS() {
// Call HelloWorld() from MyWebService.
}
Before filling the bodies of the client functions, let's declare the HelloWorld() server methods.
HelloWorld.aspx
<script runat="server">
[WebMethod]
public string HelloWorld()
{
return "Hello World from Page!";
}
</script>
MyWebService.asmx
[WebMethod]
public string HelloWorld() {
return "Hello World from MyWebService!";
}
Now,we have to replace the comments in the client functions bodies with acall to the HelloWorld() server methods. Atlas helps us in doing thisby defining proxy classes. Aproxy class exposes a server method through a client function with thesame name of the server method. In other words, proxy classes allow tocall server methods "as if they were client methods".
If ourPage class contains web methods (i.e. method marked as [WebMethod]), aproxy class named PageMethods is generated at runtime. For a webservice, a proxy class is generated with the name of the web service.The proxy class for a web service resides in a file with the extension .asmx/js, that must be imported in the page as a script to be available. We can do this by dropping the declaration
<atlas:ScriptManager ID="scriptManager" runat="server">
<Services>
<atlas:ServiceReference Path="MyWebService.asmx" />
</Services>
</atlas:ScriptManager>
in the <head>section of our HelloWorld.aspx page. The ScriptManager is a server control that is responsible to add the needed Atlas libraries and to import WebService proxies and Javascript external files.
The above declaration adds a reference to MyWebService.asmx, which is assumed to reside in the root directory of the application(note the Path attribute). References to Web Services are enclosed in the <Services> section, while references to external Javascript files are declared in the <Scripts> section. Finally, references to the main Atlas libraries (the core library and the compatibility layers) are added automatically at runtime so there is no need to explicitly declare them, while an explicit declaration is needed for certain Atlas control libraries (DragDrop controls or UI visual effects).
We were talking about proxy classes. Functionsdefined in a proxy class accept the same arguments as the correspondingserver methods, plus additional references to functions that areresponsible to process the result of the asynchronous call to theserver method.Thus, if we want to call the HelloWorld() method from the PageMethods proxy, we'll write a statement like
PageMethods.HelloWorld(onComplete);
TheHelloWorld() method accepts no arguments, but when invoking it throughthe proxy class we specify a function onComplete() to be called whenthe server method returns. With this function, we can access the datareturned by the server method through its first argument:
function onComplete(result) {
alert(result);
}
Theabove function displays in an alert box the data returned from theHelloWorld() method. In a similar way, when calling methods from aproxy class, we can specify other functions to be invoked when theasynchronous call completes (tipically a function to be called if anerror occurred, another to be called if a timeout occurred).The above considerations lead to the following code for the Javascript functions,<script type="text/javascript">
function sayHelloFromPage() {
PageMethods.HelloWorld(onComplete);
}
function sayHelloFromWS() {
MyWebService.HelloWorld(onComplete);
}
function onComplete(result) {
alert(result);
}
</script>
Finally, here's the code for the file MyWebService.asmx:<%@ WebService Language="C#" Class="MyWebService" %>
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class MyWebService : System.Web.Services.WebService
{
[WebMethod]
public string HelloWorld() {
return "Hello World from MyWebService!";
}
}
and the code for the HelloWorld.aspx page:<%@ Page Language="C#" %>
<%@ Import Namespace="System.Web.Services" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
[WebMethod]
public string HelloWorld()
{
return "Hello World! from Page";
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<atlas:ScriptManager ID="scriptManager" runat="server">
<Services>
<atlas:ServiceReference Path="MyWebService.asmx" />
</Services>
</atlas:ScriptManager>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button"
value="Hello from Page"
onclick="sayHelloFromPage();" />
<input type="button"
value="Hello from WebService"
onclick="sayHelloFromWS();" />
</div>
</form>
<script type="text/javascript">
function sayHelloFromPage() {
PageMethods.HelloWorld(onComplete);
}
function sayHelloFromWS() {
MyWebService.HelloWorld(onComplete);
}
function onComplete(result) {
alert(result);
}
</script>
</body>
</html>
UPDATE: the code has been updated to work with the January release of the Atlas CTP.