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.”

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. 

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. 

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.”

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.

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.

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.

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.

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>

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>

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]

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.