Click here to Skip to main content
15,860,859 members
Articles / Web Development / HTML
Article

Hello Atlas

Rate me:
Please Sign up or sign in to vote.
4.62/5 (66 votes)
4 Dec 20068 min read 212.7K   890   136   46
An article describing how to write a Hello World program using Atlas.

Sample Image

First "Second Encounter" With Atlas (Now called "Microsoft ASP.NET AJAX")

I’ve always loved the “Hands on” way of playing with new technology and software. Download it, code with it, take it for a ride, and see how things go. Read the manuals when you get stuck and then move on! It’s often the best use of Saturday afternoons when you’re too tired to read a lot of text books or manuals, and too enthusiastic to waste the entire afternoon watching TV.

I had taken the same approach with Atlas when the very early CTP versions were released, and realized that if I didn’t have four hours of reading time, I was going to fall flat on my face. Apparently, Atlas wasn’t as “developer friendly” as other Microsoft products, and understandably so. It was a very early community preview release which wasn’t expected to be perfect in any way!

This week I had been reading a few blog entries, and they seemed to suggest that Atlas was maturing fast and it was time when you could actually do things with it without having to spend hours and hours reading manuals. I decided to take the same “Hands on” approach to see how much things had changed since my last encounter with Atlas.

This time, my focus was to Download Atlas and take it for a test ride with a simple Hello World program. This article is more a blog post of my experiences, and an attempt to share what I learnt on a holiday, with everyone else.

Note: This document was written based on the April 2006 CTP of Atlas and Has been updated to be valid on "Microsoft ASP.NET AJAX 1.0 Beta 2". More changes if necessary, will be made when "Microsoft ASP.NET AJAX 1.0 goes live" but for the sake of consistency, in this article, I will continue to refer to "Microsoft ASP.NET AJAX 1.0" as "Atlas".

Onward!

Downloading Atlas and installing it is a piece of cake! Once you download Atlas and install it, the installer adds Visual Studio .NET 2005 templates to your Visual Studio so that you can go ahead and easily create Atlas sites. Personally, I feel this is a big step forward since the early CTP releases that I had downloaded had really long winded instructions for developers to read and follow.

After the quick "Next, Next, Next, Finish" installation completes, we proceed to create a "New Atlas Site" which is really easy! Start up Visual Studio .NET 2005. Click "File / New / Web Site...", and then select the ["ASP.NET AJAX-Enabled Web Site"] template.

Image 2

The template creates a blank site with a Web.Config and a Default.aspx, which we will go ahead and use in the Hello World sample that we are about to write.

My objective of writing this hello word program is simple. It is to keep our thoughts focused on what Atlas can basically do very quickly, without diving too much into database code or writing a lot of DataView code. For this article, I am going to assume you can write basic database code, and focus primarily on Atlas and its capabilities.

The first thing we do is take a peek into the auto generated Default.aspx which contains an Atlas Script Manager. We will go ahead and change the name of the script manager to "MyScriptManager". Once this is done, we start changing the properties of the script manger. The following code illustrates this:

HTML
10 <asp:ScriptManager ID="MyScriptManager"
          EnablePartialRendering="true" runat="server" />

If you notice the above code, EnablePartialRendering=True basically allows ASP.NET to render parts of the Default.aspx page when an event/postback occurs, instead of forcing ASP.NET to re-render the entire page.

Now that we've specified that we want only parts of my page to refresh when a post-back occurs, we need to specify the parts we want to refresh, and also specify what will make those parts to refresh. For specifying this, we use Update Panels. An Update Panel typically consists of a ContentTemplate section and a Trigger section. The following section illustrates an UpdatePanel with just one ContentTemplate and no triggers. ContentTemplate may be thought of as a DIV that will hold the HTML that needs to be refreshed when the panel updates.

HTML
10 <asp:ScriptManager ID="MyScriptManager"
      EnablePartialRendering="true" runat="server" />
11 <asp:UpdatePanel runat="server" id="MyUpdatePannel">
12   <ContentTemplate>
13   </ContentTemplate>
14 </asp:UpdatePanel>

A ContentTemplate can pretty much hold any kind of HTML/server-side controls. For this example, however, I decided to drop a Label which will display the current system date/time. Displaying the time will allow us to show a scenario of AJAX implementation where the data (or time, as in our case) keeps changing every second, without going through the task of writing boilerplate database interaction and GridView code.

Even though in real life applications, you will typically end up having data controls like the GridView in the ContentTemplate, a Label that displays time helps us keep this Hello World program simple and focused towards the end goal – which is to see Atlas in action!

So, we quickly drop a Label control inside the ContentTemplate (using either the Designer or the Code Window). Once we've done this, we should have code that looks something like this:

HTML
11 <asp:UpdatePanel runat="server" id="MyUpdatePannel">
12   <ContentTemplate>
13     <asp:Label ID="lblCurrentTime"
              runat="server"></asp:Label>
14   </ContentTemplate>
15 </asp:UpdatePanel>

Now that we have a label to display the current time, we need to illustrate the data (or in our case, time) being changed without the entire page getting refreshed. To illustrate this, let's quickly drop a button on the form so that we can update the time without refreshing the page when the button is clicked.

HTML
22 <asp:Button ID="btnShowCurrentTime"
         runat="server" Text="Show Current Time" />

The next step is to specify that the UpdatePanel needs to be refreshed when something happens. This 'something' can be either an event of a control which is fired, or it can be a control's property value which has changed. We want the panel refreshing to occur when the Click event of the newly created button btnShowCurrentTime fires. Let's specify this using triggers. The following code illustrates this:

HTML
11 <asp:UpdatePanel runat="server" id="MyUpdatePannel">
12   <ContentTemplate>
13     <asp:Label ID="lblCurrentTime" runat="server"></asp:Label>
14   </ContentTemplate>
15   <Triggers>
16     <asp:AsyncPostBackTrigger
              ControlID="btnShowCurrentTime" EventName="Click" />
17   </Triggers>
18 </asp:UpdatePanel>

In the above code we simply add a trigger that will be fired asynchronously when the click event of the btnShowCurrentTime button is fired. The next thing we want to do is to illustrate that the entire page is not refreshed when a post-back occurs, by clicking the button that we just created. When we click this newly created button, the post-back that is fired should cause only the UpdatePanel to get refreshed.

To illustrate that the entire page is not refreshed on the post-back caused by the button, we go ahead and add another label, which also displays the current system date/time, but this time - outside the panel.

The idea is to demonstrate that with post-backs caused by this newly created button, the label inside the panel will keep changing - because the panel keeps refreshing, but the label outside the panel will not change because the entire page isn’t being refreshed. So, let's drop another label on the page and call it lblPageTime.

HTML
22 <asp:Label ID="lblFormTime" runat="server"></asp:Label>

We're almost done. In the code-behind, we simply implement the page Load event with the simple code to update the Text property of both the labels with the current system time:

C#
14 protected void Page_Load(object sender, EventArgs e)
15 {
16     lblCurrentTime.Text = "This Could Be A Data Control" +
17        " That Needs To Be Refreshed" +
18        "<br /> We're going to keep this" +
          " simple and illustrate change of data by showing"
19       + "<br /> The Current System Date / Time. "
20       + "<br /> The  Current Time is:" + System.DateTime.Now;
21
22     lblFormTime.Text =
          "This is The Part Of The Page That is NOT supposed"
23        + "<br /> refresh on post back's created by the button!"
24        + "<br /> The  Current Time is:" + System.DateTime.Now;
25
26 }

Now, when we run the example we just completed, we get the following output the first time:

Image 3

Notice how clicking the button updates / refreshes the data in the panel which now shows the latest time, but not the data in the rest of the page which still shows the same time that it captured when the application first started:

Image 4

Showing Progress...

A lot of the problems I faced when trying to work with custom non-Microsoft implementations AJAX in its early stages were due to the fact that it was multi-threaded, and a lot of the notification handling about the server processing starting or ending had to be handled manually. With Atlas, I was pleasantly surprised how easy it is to actually track things like asynchronous processing and do things like displaying animated GIFs to denote progress.

Let's use the above example to illustrate this. In the above example, we will use an animated GIF with word “Updating…” and cause it to get displayed till we are able to fetch the current time from the server. To achieve this, we use the UpdateProgress control and specify an image that will be displayed when my server is processing the request. The following code illustrates this:

HTML
20 <asp:UpdateProgress ID="myUpdateProgress" runat="server">
21   <ProgressTemplate>
22     <img src="Update.gif" />
23   </ProgressTemplate>
24 </asp:UpdateProgress>

Now, just to emulate a long running process which might take a couple of seconds to execute, we make the thread sleep for a few seconds:

C#
15 protected void Page_Load(object sender, EventArgs e)
16 {
17
18   lblCurrentTime.Text =
       "This Could Be A Data Control That Needs To Be Refreshed"
19     + "<br /> We're going to keep this" +
       " simple and illustrate change of data by showing"
20     + "<br /> The Current System Date / Time. "
21     + "<br /> The  Current Time is:" + System.DateTime.Now;
22
23   lblFormTime.Text =
       "This is The Part Of The Page That is NOT supposed"
24     + "<br /> refresh on post back's created by the button!"
25     + "<br /> The  Current Time is:" +
       System.DateTime.Now;
26
27   // BAD Code - Don't Try This on a Production
     // System - Just Trying to illustrate
     // Long Running Server Query
28   Thread.Sleep(5000);
29 }

That's it. We're done. Let’s run the application quickly! The first run takes around five seconds – which is, of course, because of the fact that we are forcing a thread sleep for five seconds. Every successive click on the update button now, however, causes the update image to get displayed, and allows us to notify the user the server processing is still going on.

Image 5

What's Next?

Now that we've written our first Hello Atlas program, in the next article, we'll go ahead and work with conditional rendering of controls, which is fairly straightforward, and then work on the Atlas Control Toolkit.

Will This Article Change With New Release Versions of Atlas:

This article might be updated as Atlas moves to a release stage. All updates to this article will be posted here and also at here. Please feel free to send in comments/suggestions/questions at rajivpopat@gmail.com.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
India India
Rajiv has been developing on Microsoft Platforms for over 6 years and is a principal officer, technology @ eFORCE Inc. where he has worked for around 5 years and enjoys doing some really interesting stuff like writing a software adaptor for MFD scanners and other hardware using Microsoft Technologies, Writing a DAL that hooks up VC++ layers to .NET, writing a .NET Remoting Bridge that securely connects world-wide oil rigs of a drilling company and many other interesting endeavours.

More information about Rajiv can be found @ www.rajivpopat.com

Comments and Discussions

 
GeneralI think this articles very simple, very good, more helpful to reader! Pin
qdchange20-Mar-10 4:41
qdchange20-Mar-10 4:41 
Questionis this what ajax all about? Pin
Arash Javadi20-May-09 4:25
Arash Javadi20-May-09 4:25 
GeneralProblem With Ajax UpdatePanel Pin
elhameh8-Jun-07 18:51
elhameh8-Jun-07 18:51 
GeneralRe: Problem With Ajax UpdatePanel Pin
rajivpopat16-Jun-07 3:32
rajivpopat16-Jun-07 3:32 
GeneralThanks! Pin
huydunggs3-May-07 23:34
huydunggs3-May-07 23:34 
GeneralRe: Thanks! Pin
rajivpopat5-May-07 7:57
rajivpopat5-May-07 7:57 
GeneralNice Article Pin
Daniel Jacob23-Apr-07 20:07
Daniel Jacob23-Apr-07 20:07 
QuestionHow to add atlas support in already created Web application Pin
amitg.ds12-Apr-07 3:45
amitg.ds12-Apr-07 3:45 
AnswerRe: How to add atlas support in already created Web application Pin
rajivpopat5-May-07 7:56
rajivpopat5-May-07 7:56 
GeneralLabel outside of Update Panel Pin
Michael Ebner16-Feb-07 8:52
Michael Ebner16-Feb-07 8:52 
GeneralRe: Label outside of Update Panel Pin
rajivpopat16-Feb-07 9:17
rajivpopat16-Feb-07 9:17 
GeneralRe: Label outside of Update Panel Pin
Michael Ebner16-Feb-07 9:24
Michael Ebner16-Feb-07 9:24 
GeneralRe: Label outside of Update Panel [modified] Pin
rajivpopat22-Feb-07 0:30
rajivpopat22-Feb-07 0:30 
QuestionRe: Label outside of Update Panel Pin
chezchez20-Mar-07 10:39
chezchez20-Mar-07 10:39 
AnswerRe: Label outside of Update Panel Pin
popatrajiv5-May-07 8:04
popatrajiv5-May-07 8:04 
QuestionQuestion Pin
Syed Murtaza Hussain Rizvi17-Jan-07 2:35
Syed Murtaza Hussain Rizvi17-Jan-07 2:35 
AnswerRe: Question [modified] Pin
rajivpopat20-Jan-07 7:25
rajivpopat20-Jan-07 7:25 
GeneralVery good Pin
Viral Upadhyay12-Dec-06 0:29
Viral Upadhyay12-Dec-06 0:29 
GeneralRe: Very good Pin
rajivpopat18-Dec-06 21:36
rajivpopat18-Dec-06 21:36 
GeneralArticle Updated to work on ASP.NET Ajax 1.0 Beta 2 [modified] Pin
rajivpopat2-Dec-06 2:20
rajivpopat2-Dec-06 2:20 
GeneralCouple of things Pin
Nirosh1-Dec-06 0:35
professionalNirosh1-Dec-06 0:35 
GeneralRe: Couple of things [modified] Pin
rajivpopat1-Dec-06 2:09
rajivpopat1-Dec-06 2:09 
GeneralRe: Couple of things Pin
rajivpopat2-Dec-06 2:17
rajivpopat2-Dec-06 2:17 
GeneralSuperb Pin
Coder.8625-Oct-06 18:51
Coder.8625-Oct-06 18:51 
GeneralRe: Superb Pin
rajivpopat26-Oct-06 5:43
rajivpopat26-Oct-06 5:43 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.