A First Look into Atlas
 
Published: 08 May 2006
Unedited - Community Contributed
Abstract
In this article, Mohammad demonstrates how to work with Atlas with the help of examples.
by Mohammad Azam
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 43898/ 131

Introduction

The Atlas project has been introduced by Microsoft for the ASP.NET 2.0 framework.  Atlas enables you to make client side calls and save the expensive full postback to the server.  This results in a better user experience and a performance boost.  In this article I will demonstrate how you can use Atlas to make a very simple “Contact List Application.”

Installing Atlas Application Template

The first thing that you need to do is install the Atlas Application Project.  You can download the Atlas Project from the here.  After downloading the project, simply click on the installer which will install the Atlas Project.  Please keep in mind that the Atlas Project works with Visual Studio 2005 and Visual Web Developer 2005. 

Database Design

Since I will be making the application from scratch, we will start with the database design.  To keep the application simple, I will only construct a single table that will hold all the required information of the user.  Take a look at the table schema below to gain a better idea.

Figure 1

The table Contacts contain four columns.

ContactID: This is the identity column and the primary key of the table.

Name: This column is used to store the user’s name.

Address: This column is used to store the user’s address.

City: This column is used to store the user’s city.

You can go ahead and populate your table with some data which will be used later in this article. 

Creating the Atlas Project

I assume that you have already downloaded and installed the Atlas Project.  Now open Visual Studio 2005 and from the file menu select File->New Website.  This will open the website selection page which will let you choose the type of the website that you want to build.  From the menu select “Atlas Website” as I have shown in the image below.

Figure 2

This will create a new Atlas website which I will use to make the “Contacts Application.”

Configuring the Data Source

The first task is to configure the data source for the application.  For this application I will be using SqlDataSource object, which is introduced in .NET Framework 2.0.  Simply drag and drop the SqlDataSource object from the toolbox onto the designer.  After that, you can follow a simple wizard control to configure your data source.

Below is the HTML code generated by the SqlDataSource control.

Listing 1 – SqlDataSource HTML

<asp:SqlDataSource ID="SqlDataSource1"
runat="server" ConnectionString="<%$
ConnectionStrings:TaskDatabaseConnectionString %>"
SelectCommand="SELECT [Name], [Address] FROM[Contacts]">
</asp:SqlDataSource>

Analysis

The SqlDataSource control simply selects [Name], [Address] and [Contacts] from the Contacts table.  Later in this article I will modify the SqlDataSource control to be dependent on the selection from the DropDownList control.  Note that you must define the connection string in your web.config (called TaskDatabaseConnectionString in this case) - the wizard will prompt you for the connection string details if you haven't already defined a connection string.

Binding GridView to SqlDataSource

The next step is to bind the GridView control to the SqlDataSource control and display the records from the Contacts table into the GridView.  Simply drag and drop the GridView control and assign the DataSourceID property to the SqlDataSource1.  You can also enable the paging, selection and sorting by clicking on the checkboxes that appear when you view the “Smart Tag.”  When you run the application you will see that the GridView is getting populated, as shown in the image below.

Figure 3

Although everything seems to be working, if you look carefully you will find that each time you make a selection or sort the GridView it will fire a postback which causes the page to reload.  Let us see how to remove this postback.

Registering Atlas to the Page

Now it is time to add Atlas to the GridView control and remove the postback.  First you must register Atlas scripts by using the ScriptManager control.

Listing 2 – Registering Atlas

<atlas:ScriptManager ID="ScriptManager1"EnablePartialRendering="true" runat="server" />   

Analysis

In the code above I simply registered the Atlas scripts to the page.  EnablePartialRendering allows you to update the regions of the page.

Adding an Update Panel Control

The next task is to add an UpdatePanel Control to the page.  The UpdatePanel Control is responsible for converting the server postback to the client side postback.  Any control placed inside the UpdatePanel Control automatically uses the client postback.  In other words, all you need to do is add an UpdatePanel to the page and place the GridView inside the UpdatePanel.  Take a look at the code below.

Listing 3 – GridView inside the Update Panel control

<atlas:UpdatePanel ID="up1" runat="server">             
<ContentTemplate> 
<asp:GridView ID="gvContacts" runat="server" AllowPaging="True"
AllowSorting="True" AutoGenerateColumns="False" BackColor="White"
BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px"CellPadding="4"
DataSourceID="SqlDataSource1"ForeColor="Black" GridLines="Vertical" >
<FooterStyle BackColor="#CCCC99"/>
<Columns>
<asp:CommandFieldShowSelectButton="True" />
<asp:BoundField DataField="Name"HeaderText="Name" SortExpression="Name" />
<asp:BoundField DataField="Address"HeaderText="Address"
SortExpression="Address" />
</Columns>
<RowStyle BackColor="#F7F7DE" />
<SelectedRowStyle BackColor="#CE5D5A"Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#F7F7DE"ForeColor="Black" HorizontalAlign="Right" />
<HeaderStyle BackColor="#6B696B"Font-Bold="True" ForeColor="White" />
<AlternatingRowStyleBackColor="White" />
</asp:GridView>
</ContentTemplate>  
</atlas:UpdatePanel> 

Analysis

The UpdatePanel Control is the part of the Atlas framework.  I moved the GridView inside the Update Panel’s ContentTemplate tag.  Now if you run your application, you will notice that all the events generated by the GridView are handled on the client side and no server postback occurs.

Adding DropDownList into Atlas Action

I am sure that you are happy to implement the client postback functionality with your GridView control.  Let us add one more feature to the application which will allow users to filter the results based on their selection of the city.  For this purpose, I have added a DropDownList control which gives users the option to select either “Houston” or “Austin.”  Based on the user's selection, I will filter the result and display it in the GridView control.  The following is the code used for the DropDownList.

Listing 4 – DropDownList HTML Code

<asp:DropDownList ID="ddlCity"runat="server" AutoPostBack="True" >
<asp:ListItem>Houston</asp:ListItem>
<asp:ListItem>Austin</asp:ListItem>
</asp:DropDownList>
Configuring the Data Source

Since the data is now dependent on the selection of the DropDownList, I will configure the SqlDataSource control to reflect the changes.

Listing 5 – Configuring Data Source for DropDownList

 
<asp:SqlDataSource ID="SqlDataSource1"
runat="server" ConnectionString="<%$
ConnectionStrings:TaskDatabaseConnectionString %>"
SelectCommand="SELECT [Name], [Address] FROM
[Contacts] WHERE ([City] = @City)">
<SelectParameters>
<asp:ControlParameter 
ControlID="ddlCity" Name="City"
PropertyName="SelectedValue"
Type="String" />
</SelectParameters>
</asp:SqlDataSource>
Configuring UpdatePanel

The final configuration needed is the UpdatePanel control.  Since now the GridView is dependent on the user’s selection from the DropDownList, it must refresh when the selection changes.  The good news is that the UpdatePanel provides you with this functionality using the <Triggers> tag.

Listing 6 – Triggers Tag in Update Panel Control

<atlas:UpdatePanel ID="up1" runat="server" >
<Triggers>
<atlas:ControlValueTrigger ControlID="ddlCity" PropertyName="SelectedValue" />
</Triggers>
<ContentTemplate>
<asp:GridView ID="gvContacts" runat="server" AllowPaging="True"
AllowSorting="True" AutoGenerateColumns="False"
BackColor="White" BorderColor="#DEDFDE"
BorderStyle="None" BorderWidth="1px"
CellPadding="4" DataSourceID="SqlDataSource1"
ForeColor="Black" GridLines="Vertical" >
<FooterStyle BackColor="#CCCC99" />
<Columns>
<asp:CommandField ShowSelectButton="True" />
<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
<asp:BoundField DataField="Address"
HeaderText="Address" SortExpression="Address" />
</Columns>
<RowStyle BackColor="#F7F7DE" />
<SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
<HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView>
</ContentTemplate>
</atlas:UpdatePanel>

Analysis

All the code that you see above is the same except for the <Triggers> tag.  <Triggers> allows you to make the UpdatePanel dependent on other controls, which in this case is the DropDownList control.  Now, anytime you make a selection in the DropDownList control it will refresh the UpdatePanel control thus refreshing the GridView.

Downloads

[Download Sample]

Conclusion

In this article you learned how to unleash the power of the Atlas and make better and faster applications using client side calls.  In later articles I will cover more cool aspects of the Atlas Project.



User Comments

Title: 100%   
Name: nitin khadloya
Date: 2007-07-18 8:46:49 AM
Comment:
it's very useful gor beginners
Title: I rate you 10/10 : Very Good   
Name: Irfan
Date: 2006-12-22 5:06:09 AM
Comment:
Great Explaination !!

This article gives a great confidence to beginners

keep it up...
Title: Cool Article   
Name: Hemendra Singh Shaktawat
Date: 2006-09-11 3:57:00 PM
Comment:
Hi,

Thanks for nice article, would really help people new to Atlas like me :)

Thanks and best wishes

Hemendra Singh Shaktawat

Mindifire Solutions
www.mindfiresolutions.com
Title: Atlas   
Name: Mr Atlas
Date: 2006-09-11 10:57:25 AM
Comment:
Atlas makes me crazy, man!
Title: Great Tutorial   
Name: Budi Irawan
Date: 2006-08-15 3:25:33 AM
Comment:
it is a great tutorial about partial update with atlas. I have played a little bit with ajax in Ruby on Rails and now I also can find same feature in Atlas.

Many thanks
Title: Atlas   
Name: vijay kumar
Date: 2006-07-04 9:46:52 AM
Comment:
Great Article. I am new to atlas. I got lots of confidence after going through this article. thank u.
Title: Atlas make developing ajax application faster   
Name: steve
Date: 2006-06-10 7:03:03 AM
Comment:
Good articles. Ajax make developer life easier. It takes a very less amount of work to create ajax website.
A new Community website has been created : http://www.AtlasASP.com/
Title: UpdatePanel has no effect on the GridView itself   
Name: Wim
Date: 2006-05-19 5:38:34 PM
Comment:
Mohammad wrote "I moved the GridView inside the Update Panel’s ContentTemplate tag. Now if you run your application, you will notice that all the events generated by the GridView are handled on the client side and no server postback occurs." What events are meant here? The GridView works as normal, except that only the GridView will have roundtrips to the server, not the whole page. But that doesn't make much difference in the current example.

Mohammad's example is a read-only list, but if you use de GridView to change records then you need different templates. In this case I would have liked that the statement of Mohammad was true. That the change from the ItemTemplate to EditItemTemplate was handled by client-side script, instead of by the server.

Concerning sorting, without templates you can use EnableSortingAndPagingCallbacks, already an Atlas-like feature of .NET 2.0.
Title: Atlas makes the difference !!   
Name: Guest
Date: 2006-05-10 11:42:14 PM
Comment:
Looks like Atlas makes Web developers and users life simple. I believe it must have some disadvantages too. It would be good to provide a little section about this as well along with any Atlas functionality shown. This would give the developer edge of whether or not implement it depending on the context.
Title: atlas   
Name: mike
Date: 2006-05-10 2:26:53 AM
Comment:
Great Article, How can i instal the atlas controls into my visual studio tool box under standard catagory.






Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2021 ASPAlliance.com  |  Page Processed at 2021-02-28 11:35:53 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search