[This topic is extremely out of date. MS Ajax Extensions have been released and they are different from the Atlas CTPs. I don't believe Atlas is even available anymore]
JAAJAX was my little Ajax library that enabled Ajax callbacks. One of the things I’ve been trying figure out is how to use Atlas to as a replacement for my library. I originally thought that Atlas could only talk to web services and was corrected by Scott Guthrie; in the comment on the post Scott mentioned that Ajax calback was possible.
I’ve looked all over the net for a simple example. None exists that I could find (Ok, there is a forum post in the atlas forums of asp.net that told me how (note I have yet to go through any of the Atlas labs)
I have been able to somewhat piece together how to do it. I’m missing 1 detail, but I will publish what I know (and what I think).
Let’s start with the method in the codebehind -
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Web.Services;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod()]
public int Add(int num1, int num2)
{
return num1 + num2;
}
}
Yep, it’s the classic addition Ajax sample (I always start with this because it’s easy to set up, so you can debug it). Note that you use the WebMethod attribute which is also used with WebServices. The difference is that page’s codebehind is NOT a web service. I gave you full the source of the codebehind so you can see that this page is very simple, and it’s definitely not a web service (although it does use the System.Web.Services namespace for the WebMethod attribute).
So here’s the aspx page’s source:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<atlas:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<input type="text" ID="tb1" /><br />
<input type="text" ID="tb2" /><br />
<button id="MyButton" onclick="MyButtonClick()">=</button><span id="result"></span>
</div>
</form>
<script>
function MyButtonClick()
{
PageMethods.Add($("tb1").value, $("tb2").value, Add_Complete, Add_Timeout, Add_Error);
}
function Add_Complete()
{
if(arguments.length >0)
$("result").innerText = arguments[0].toString();
}
function Add_Timeout()
{
alert("timeout");
}
function Add_Error(result, response)
{
alert("Error");
// One of these 2 objects has the following methods (I forget which one):
// get_statusText() gives error text
// get_statusCode() gives error code
}
</script>
</body>
</html>
So here’s what’s important. I really only have 1 server tag on this page: the Atlas ScriptManager. Not only that but we really don’t have to do much with the ScriptManager (just drop it on the form). I have a form consisting of 2 input textboxes, a span, and a Button element (using the Button tag… I love the button tag… sorry I had to use it)…
The onClick event of the Button calls PageMethods.Add. Hey that’s cool! There’s an object containing all our server side methods. I was planning on doing this with JAAJAX. So what’s up with the parameters for the PageMethods.Add function. We pass it the 2 parameters for the add function (btw, you might want to do a bit more validation than I did <grin />. The additional 3 functions are callbacks. There’s really 3 outcomes for our call to the server: success, timeout (taking too long), and error. Atlas requires that you pass in all three functions, so it can notify you asynchronously what happened.
The completed function passes back the result and a second object. I think this object is the Atlas Client WebRequest object that was used to service your request.
[UPDATE: I missed something earlier... that I think is fairly important! $ is an Atlas (and Prototype, and others) shortcut for document.getElementById function]
The only real thing lacking is synchronous call backs (well, I bet they’re possible, but not desirable).
Final Thoughts
I discovered something else (in both my source reading/note taking as well as through debugging this example). Atlas will automatically attach itself to your javascript objects[update: because the Atlas client library adds features to the existing Javascript function object]. So, you really don’t have to do anything special (GetName, GetType, etc. methods get added to your functions). Atlas probably does this via the parse function (but I’m not 100% sure). It’s actually pretty cool!
[tags: Ajax, Atlas]
Print | posted on Thursday, April 27, 2006 2:50 PM