Click here to Skip to main content
Click here to Skip to main content

Hello Atlas

, 4 Dec 2006
Rate this:
Please Sign up or sign in to vote.
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.

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:

 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.

 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:

 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.

 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:

 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.

 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:

 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:

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:

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:

 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:

 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.

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

Share

About the Author

rajivpopat

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! Pinmemberqdchange20-Mar-10 4:41 
Questionis this what ajax all about? PinmemberArash Javadi20-May-09 4:25 
GeneralProblem With Ajax UpdatePanel Pinmemberelhameh8-Jun-07 18:51 
GeneralRe: Problem With Ajax UpdatePanel Pinmemberrajivpopat16-Jun-07 3:32 
GeneralThanks! Pinmemberhuydunggs3-May-07 23:34 
GeneralRe: Thanks! Pinmemberrajivpopat5-May-07 7:57 
GeneralNice Article PinmemberDaniel Jacob23-Apr-07 20:07 
QuestionHow to add atlas support in already created Web application Pinmemberamitg_ds12-Apr-07 3:45 
AnswerRe: How to add atlas support in already created Web application Pinmemberrajivpopat5-May-07 7:56 
GeneralLabel outside of Update Panel PinmemberMichael Ebner16-Feb-07 8:52 
GeneralRe: Label outside of Update Panel Pinmemberrajivpopat16-Feb-07 9:17 
GeneralRe: Label outside of Update Panel PinmemberMichael Ebner16-Feb-07 9:24 
GeneralRe: Label outside of Update Panel [modified] Pinmemberrajivpopat22-Feb-07 0:30 
QuestionRe: Label outside of Update Panel Pinmemberchezchez20-Mar-07 10:39 
AnswerRe: Label outside of Update Panel Pinmemberpopatrajiv5-May-07 8:04 
QuestionQuestion PinmemberSyed Murtaza Hussain Rizvi17-Jan-07 2:35 
AnswerRe: Question [modified] Pinmemberrajivpopat20-Jan-07 7:25 
GeneralVery good Pinmemberjustviral12-Dec-06 0:29 
GeneralRe: Very good Pinmemberrajivpopat18-Dec-06 21:36 
GeneralArticle Updated to work on ASP.NET Ajax 1.0 Beta 2 [modified] Pinmemberrajivpopat2-Dec-06 2:20 
GeneralCouple of things PinmemberNirosh1-Dec-06 0:35 
GeneralRe: Couple of things [modified] Pinmemberrajivpopat1-Dec-06 2:09 
GeneralRe: Couple of things Pinmemberrajivpopat2-Dec-06 2:17 
GeneralSuperb Pinmemberkumarcs25-Oct-06 18:51 
Really a nice article to start with Atlas.
Looking forward some more.......
 
kumarcs

GeneralRe: Superb Pinmemberrajivpopat26-Oct-06 5:43 
GeneralExcellent Pinmembernecus27-Jul-06 4:52 
GeneralRe: Excellent Pinmemberrajivpopat27-Jul-06 20:28 
QuestionAsk a question Pinmemberioleon131422-Jun-06 20:02 
AnswerRe: Ask a question Pinmemberrajivpopat12-Dec-06 8:31 
GeneralExcellent Article. Thank's Pinmembertheofanis13-Jun-06 23:04 
GeneralRe: Excellent Article. Thank's Pinmemberrajivpopat14-Jun-06 21:26 
GeneralRe: Excellent Article. Thank's Pinmembertheofanis14-Jun-06 21:38 
GeneralRe: Excellent Article. Thank's Pinmemberrajivpopat19-Jun-06 7:29 
GeneralRe: Excellent Article. Thank's Pinmemberrajivpopat21-Jun-06 5:47 
GeneralRe: Excellent Article. Thank's Pinmembertheofanis21-Jun-06 19:32 
AnswerRe: Excellent Article. Thank's Pinmemberrajivpopat29-Jun-06 7:56 
GeneralRe: Excellent Article. Thank's Pinmembertheofanis29-Jun-06 20:17 
GeneralNice article PinmemberMansonP2-Jun-06 8:40 
GeneralRe: Nice article [modified] Pinmemberrajivpopat5-Jun-06 8:37 
GeneralWonderful :) PinmemberPlácido17-May-06 10:43 
GeneralRe: Wonderful :) Pinmemberrajivpopat19-May-06 1:01 
GeneralGreat Article ,gave me quick start PinmemberDroren16-May-06 0:28 
GeneralRe: Great Article ,gave me quick start Pinmemberrajivpopat17-May-06 3:28 
JokeThanks Pinmemberajhuddy12-May-06 10:19 
JokeRe: Thanks Pinmemberrajivpopat13-May-06 8:07 
GeneralRe: Thanks PinmemberDimitar Voynov29-Dec-06 8:29 

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

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

| Advertise | Privacy | Mobile
Web01 | 2.8.140814.1 | Last Updated 4 Dec 2006
Article Copyright 2006 by rajivpopat
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid