Home > ASP.NET > A simple atlas example

A simple atlas example

To day, when we say about new technology in web application everyone’ll say about AJAX and its related product. There is some frameworks out there that we can use to apply AJAX into your website, EX: ATLAS, ANTHEM, AJAX Magixc. Each of them has its own features, advantages and disadvantages. You can find more information about them on internet

So now i just want to show you an example using one of the above framework called ATLAS (I introduced you about this in my previous article). ATLAS is a product developed by Microsoft team based on AJAX concept.

It is built into controls that we can easy drag and drop on our IDE, one of them is <atlas:UpdatePanel>

The main purpose of AJAX is to refresh each part of webpage seperately. That means postback only one area insteas of entire page, so any control that we want to postback just put it inside <atlas:UpdatePanel>

before starting, you must sure that you have copy ScriptLibrary and put it in your project. You should also add reference to the Microsoft.Web.Atlas.dll

<atlas:UpdatePanel ID="uc" runat="server">
   <ContentTemplate>
      <table width="100%" border="0″ cellspacing="0″ cellpadding="0″>
         <tr>
            <td width="56%" style="height: 158px" valign="top">
            <asp:TreeView ID="trvChuDe" runat="server"
                 OnSelectedNodeChanged="trvChuDe_SelectedNodeChanged"
                 OnTreeNodeCollapsed="trvChuDe_TreeNodeCollapsed"
                 OnTreeNodeExpanded="trvChuDe_TreeNodeExpanded">
            </asp:TreeView>
            </td>
            <td style="height: 158px" valign="top">
            <asp:Label ID="lblRightData" runat="server"></asp:Label>
            </td>
         </tr>
      </table>
   </ContentTemplate>
   <Triggers>
      <atlas:ControlEventTrigger ControlID="btnLoad" EventName="Click"/>
</Triggers>
</atlas:UpdatePanel>

As you can see that i want the treeview to update only itself so i put it inside the <atlas:UpdatePanel> tag. This tag includes two child tag:
+ <ContentTemplate>: where you put you control, html code that you want to postback when refreshing

+ <Triggers>: if you want that when the user click on a button, the content’ll be fill in the treeview with no entire page refresh happen, so you must specify the source control id and what event makes it happen by using two attributes: ControlID and EventName. This tag not only use for button, but any control that can make a postback event.

After you have done, before you can start, remember to but the below tag inside the <head></head> tag or any positions inside <form> tag as a declaration. If you choose to put the below tag inside the <head></head> tag, make sure that this tag is runat server

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

Now you can run your webpage to see what happen. Amazing!!..

Although in ASP.NET 2.0, some actions in treeview have been used AJAX (just do inside and you can not see it. ASP.NET team has configured it as an normal event). But in some case you must apply this way

Advertisements
Categories: ASP.NET Tags:
  1. May 25, 2006 at 3:58 PM

    test

  2. July 21, 2006 at 5:50 AM

    Testing atlas

  3. ss
    April 11, 2007 at 11:47 AM

    testing atlas sucessful

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: