Atlas QuickStart Combat Atlas

Quick Start

With the advent of Ajax technology, the Web 2.0 era has come, there has been a large number of Web 2.0 sites, such as Live.com,fclickr album site, Google map and so on. So what is Ajax? Ajax technology is actually an old bottle of new wine, it uses asynchronous Javascript+xml. This technology was first introduced by Microsoft in 1999 and is known as a "Dhtml/javascript Web application using remote calls." The basic idea of this technique is to allow an Internet browser to make an asynchronous HTTP call to a remote page/service, and to update a current Web page with the results received without having to refresh the entire page. Based on this technology creator's advice, this technique should improve the client experience, making the HTTP page look and feel similar to a Windows desktop application.

At present, a lot of technical framework about AJAX has emerged. In the. NET aspect, there are also many open source frameworks, such as Ajax.net,magic Ajax. Microsoft also launched its own AJAX framework----Atlas, the current version is the June CTP version. In Atlas, a large number of Ajax controls and features have been encapsulated, which is convenient. There are two examples in this article that illustrate how to use Atlas to implement two simple AJAX applications.

First, we will download atlas to download the relevant installation files for Atlas in Http://atlas.asp.net. Let's take a look at a simple example, in this case,
We illustrate how to use Atlas using the calendar controls in ASP.net 2.0. First Open vs.net 2005, select "New Web Site", as shown in the following figure, you will find a template for "Atlas Web Site", at which point we can enter the name of the application to be created. Here we will use the default name AtlasWebSite1.

In solution solution, you will find that Vs.net 2005 has already placed some files in advance, in which the Microsoft.Web.Atlas.dll file is included in the Bin folder, which is an AJAX-enabled file. In order to be able to use AJAX controls in your design, you must add a new tab to the Tools toolbox, name Atals, then right-click the tab, select "Choose Item" In the pop-up menu, and then use the Browse feature to Select the Atals.dll file so that you add a series of atals controls, as shown in the following figure:

We drag the ScriptManager controls onto the page. The ScriptManager control can be viewed as a collection of management Atlas controls that handles all of the Atlas components on a page and updates to local pages, generating related client-side scripts. There is only one ScriptManager control on all asp.net pages that need to support Atlas. In the ScriptManager control we can specify the desired script library, or specify a Web Service to be invoked through JS, and specify page error handling.

Next, we drag a Calendar control to the page, place it underneath the ScriptManager control, and choose a favorite style, as shown in the following illustration:

Next, let's look at how to use AJAX techniques in this calendar control. In. NET calendar controls, it is often complained that a date on the selected calendar will trigger a postback page return, which is inconvenient for the user to wait. Next, we use the Atals control to transform the Calendar control.

On the Default.aspx page, switch to Code view, and in the previous <atlas:ScriptManager> control, add the EnablePartialRendering property so that Atlas can partially update the page as follows

<atlas:scriptmanager id= "ScriptManager1" runat= "Server"
Enablepartialrendering= "true"/>
Add a <UpdatePanel> control, UpdatePanel is a very important control in Atlas, powerful and easy to use, can only make very small changes to the existing ASP.net site to add AJAX features, We then drag the Calendar control and drop it into the UpdatePanel control, where we notice that the Calendar control is placed inside the label of <ContentTemplate>, which is placed inside the control controlled by UpdatePanel, as shown in the following code:

<atlas:updatepanel id= "ID1" runat= "Server"
<ContentTemplate>
<asp:calendar id= "Calendar1" runat= "Server"
Backcolor= "#FFFFCC" .../
</asp:Calendar>
</ContentTemplate>
</atlas:UpdatePanel>
To better see the effect, we add two Drop-down selection boxes that allow the user to select the year and month, as shown in the following code

<form id= "Form1" runat= "Server"
<atlas:scriptmanager id= "ScriptManager1" runat= "Server"
Enablepartialrendering= "true"/>

<asp:dropdownlist id= "DropDownList1" runat= "Server"
autopostback= "True" >
<asp:listitem value= "1" >jan </asp:ListItem>
<asp:listitem value= "2" >feb </asp:ListItem>
<asp:listitem value= "3" >mar </asp:ListItem>
<asp:listitem value= "4" >APR </asp:ListItem>
<asp:listitem value= "5" >may </asp:ListItem>
<asp:listitem value= "6" >jun </asp:ListItem>
<asp:listitem value= "7" >jul </asp:ListItem>
<asp:listitem value= "8" >aug </asp:ListItem>
<asp:listitem value= "9" >sep </asp:ListItem>
<asp:listitem value= "Ten" >oct </asp:ListItem>
<asp:listitem value= "one" >nov </asp:ListItem>
<asp:listitem value= "a" >dec </asp:ListItem>
</asp:DropDownList>

Year

<asp:dropdownlist id= "DropDownList2" runat= "Server"
autopostback= "True" >
<asp:ListItem>?? </asp:ListItem>
<asp:ListItem> 2006 </asp:ListItem>
<asp:ListItem> 2007 </asp:ListItem>
</asp:DropDownList> <BR/>
Then, in the Code-behind code, write the following code:

Protected Sub DropDownList1_SelectedIndexChanged (_
ByVal sender as Object, _
ByVal e As System.EventArgs) _
Handles dropdownlist1.selectedindexchanged
With CALENDAR1
. VisibleDate = New Date (_
Dropdownlist2.selectedvalue, _
Dropdownlist1.selectedvalue, 1)
End With
End Sub

Protected Sub Dropdownlist2_selectedindexchanged (_
ByVal sender as Object, _
ByVal e As System.EventArgs) _
Handles dropdownlist2.selectedindexchanged
With CALENDAR1
. VisibleDate = New Date (_
Dropdownlist2.selectedvalue, _
Dropdownlist1.selectedvalue, 1)
End With
End Sub
In the above code, the SelectedIndexChanged event for the Drop-down selection box for the month and year is written to code, primarily to control that the Calendar control displays the appropriate date when the user selects the month and year. But when we F5 run, we will notice that the page will still cause postback to refresh. So we're going to define the trigger triggers.

The so-called trigger, which specifies the event source for the action, UpdatePanel provides two kinds of trigger that cause asynchronous postback, Controleventtrigger and Controleventtrigger respectively. Where Controleventtrigge refers to an update when a specified property of a control is changed, and Controleventtrigger refers to an update when the specified event occurs. Then we modify the code as follows:

<atlas:updatepanel id= "ID1" runat= "Server"
<ContentTemplate>
<asp:calendar id= "Calendar1" runat= "Server"
Backcolor= "#FFFFCC" .../
</asp:Calendar>
</ContentTemplate>

<Triggers>
<atlas:controlvaluetrigger controlid= "DropDownList1"
Propertyname= "SelectedValue"/>
<atlas:controleventtrigger controlid= "DropDownList2"
Eventname= "SelectedIndexChanged"/>
</Triggers>
</atlas:UpdatePanel>
Here, you specify the event triggers for the month Drop-down box and the year Drop-down box, so that the local refresh is thrown whenever the user chooses which Drop-down box, and all of these refreshes are handled by encapsulating the UpdatePanel control. So when you run the program, the page does not have to do a postback and a whole page refresh as before.

Finally, under the Calendar control, we add a Progress status bar control UpdateProgress to reflect the current progress to the user, as shown in the following code

<atlas:updateprogress id= "Pro" runat= "Server"
<ProgressTemplate>
<asp:label id= "Label1" runat= "Server" text= "Label"
Updating Calendar ...
</asp:Label>
</ProgressTemplate>
</atlas:UpdateProgress>
Note that above we are in the progress status control <ProgressTemplate>, we simply add a label control, if there is a real need, we can add a picture.

So, our program is done, run this calendar program, select the Month and year Drop-down box, and see that the calendar control does not cause the entire page to refresh as before, but rather quickly displays the appropriate date in the Calendar control.

To deepen our understanding of Atlas, let us cite an example to illustrate the problem. Our application will be in a page that gives the user the ability to click on the Category Theme button to get the latest news on the site, which is done by reading the RSS on the site.

We first create another page, which also puts the ScriptManager control, and then we want to design a simple page. For example, add a nice banner on the page header, and in order to show the loading progress, this time we add a loading ... Animated GIF, and then create a row of two columns of the large table, on the left side of the table, put a number of buttons. For example, here we put 10 buttons on each technical topic.

Then drag and drop a XmlDataSource control into the form, because we're going to read the RSS XML file on the Web site for parsing. On the right side of the table, place a DataList control and bind the DataList control to the XmlDataSource control. Finally, the approximate interface diagram looks like this:

Next, set the XmlDataSource control. We click on the IntelliSense feature in the upper right of the control, in the XPath in the pop-up window, select XPath Expression, where we fill in "Rss/channel/item". Note that because we want to browse the Web site provided in the RSS XML file, we are only interested in the latest information on each channel, so I grind en to fill in this, while the complete RSS information for the site is in http://services.devx.com/outgoing/ Devxfeed.xml can see. Finally, our page front-end code looks like this:

<atlas:updatepanel id= "ID1" runat= "Server"
<ContentTemplate>
<asp:label id= "Label1" runat= "Server" text= "Label"
Font-bold= "True" > </asp:Label>
<atlas:updateprogress id= "Pro" runat= "Server"
<ProgressTemplate>
<asp:image id= "Image1" runat= "Server"
Imageurl= "~/loading.gif"/>
</ProgressTemplate>
</atlas:UpdateProgress>

<asp:datalist id= "DataList1" runat= "Server"
Backcolor= "Lightgoldenrodyellow" bordercolor= "Tan"
Borderwidth= "1px" cellpadding= "2" forecolor= "BLACK"
Width= "755px" >
<footerstyle backcolor= "Tan"/>
<selecteditemstyle backcolor= "Darkslateblue"
Forecolor= "Ghostwhite"/>
<alternatingitemstyle backcolor= "Palegoldenrod"/>
<ItemTemplate>
<b>
<% #XPath ("title")%>
</b>
<BR/>
<i>
<% #XPath ("description")%>
</i> <% #XPath ("pubdate")%>
<BR/>
<a Href= ' <% #XPath ("link")%> ' >link </a>
<BR/>
<BR/>
</ItemTemplate>
</asp:DataList>

<asp:xmldatasource id= "XmlDataSource1" runat= "Server"
Xpath= "Rss/channel/item" > </asp:XmlDataSource>
</ContentTemplate>

<Triggers>
<atlas:controleventtrigger controlid= "Button1"
Eventname= "click"/>
<atlas:controleventtrigger controlid= "Button2"
Eventname= "click"/>
<atlas:controleventtrigger controlid= "Button3"
Eventname= "click"/>
<atlas:controleventtrigger controlid= "Button4"
Eventname= "click"/>
<atlas:controleventtrigger controlid= "Button5"
Eventname= "click"/>
<atlas:controleventtrigger controlid= "Button6"
Eventname= "click"/>
<atlas:controleventtrigger controlid= "Button7"
Eventname= "click"/>
<atlas:controleventtrigger controlid= "Button8"
Eventname= "click"/>
<atlas:controleventtrigger controlid= "Button9"
Eventname= "click"/>
<atlas:controleventtrigger controlid= "Button10"
Eventname= "click"/>
<atlas:controleventtrigger controlid= "Button11"
Eventname= "click"/>
</Triggers>
</atlas:UpdatePanel>
...
In the above code, in addition to setting the event triggers for each button, we are also in the DataList control, displaying the read and parsed XML file bindings in the <% #XPath ("description")%>. Next, we start writing the code for the back-end processing of the RSS XML file read to.

First, because you want to process XML and read the resources on the site, you introduce the following namespaces

Imports System.Net
Imports System.IO
Imports System.Xml
When the user points to select a category Theme button, will automatically download the site in accordance with the theme of the RSS XML file, download and then parse, and then display to the page. The code is as follows:

Public Function SendRequest (_
ByVal URI as String, _
ByVal RequestType as String) as HttpWebRequest
Dim req as HttpWebRequest = Nothing
Try
Initiating an HTTP request
req = Httpwebrequest.create (URI)
Req. method = RequestType
Catch ex as Exception
Throw New Exception ("Error")
End Try
return req
End Function

Public Function GetResponse (_
ByVal req as HttpWebRequest) as String
Dim body as String = String.Empty
Try
Get the response output stream from the server
Dim resp as HttpWebResponse = req. GetResponse ()
Dim Stream as Stream = resp. GetResponseStream ()

Use StreamReader to process the resulting server response
Dim Reader as StreamReader = _
New StreamReader (Stream, Encoding.UTF8)
BODY = reader. ReadToEnd ()
Stream. Close ()
Catch ex as Exception
Throw New Exception ("Error")
End Try
Return to Body
End Function
The two above methods send a request to the Web server to obtain information about the specified URL and obtain the output information returned by the server in the StreamReader in the IO stream. The following Loadrss () method, the passed parameter is the specified URL address, and then call the above two methods, after the last access to the server returned the output stream, and then by parsing the XML, select the appropriate node content to return. The code is as follows:

Public Function Loadrss (_
ByVal URI As String) as String
Dim req as HttpWebRequest
Dim xmldoc as XmlDocument = Nothing
Try
Xmldatasource1.datafile = URI

Download RSS XML file
req = SendRequest (URI, "get")
Dim XmlData as String = GetResponse (req)
xmldoc = New XmlDocument ()
Xmldoc.loadxml (XmlData)

Choose the right node.
Dim Titlenode as XmlNode = _
XmlDoc.DocumentElement.SelectSingleNode ("Channel/title")

Return Titlenode.innertext
Catch ex as Exception
Return String.Empty
End Try
End Function
Next, we have an event that responds to more than 10 buttons, and when a button is selected for a category topic, the server requests the RSS XML for the specified category topic, the following code:

Public Sub Button_Click (_
ByVal sender as Object, ByVal e as System.EventArgs) _
Handles Button1.Click, Button2.click, Button3.click, _
Button4.click, Button5.click, Button6.click, _
Button7.click, Button8.click, Button9.click, _
Button10.click, Button11.click

Dim URL as String = String.Empty
Select Case CType (sender, Button). Text
Case "Database": URL = _
"Http://services.devx.com/outgoing/databasefeed.xml"
Case ". NET": URL = _
"Http://services.devx.com/outgoing/dotnet.xml"
Case "C + +": URL = _
"Http://services.devx.com/outgoing/cplusfeed.xml"
Case "Recent Tips": URL = _
"Http://services.devx.com/outgoing/recentTipsFeed.xml"
Case "Web Dev": URL = _
"Http://services.devx.com/outgoing/webdevfeed.xml"
Case "Latest": URL = _
"Http://services.devx.com/outgoing/devxfeed.xml"
Case "Enterprise": URL = _
"Http://services.devx.com/outgoing/enterprisefeed.xml"
Case "Wireless/mobile": URL = _
"Http://services.devx.com/outgoing/wirelessfeed.xml"
Case "XML": URL = _
"Http://services.devx.com/outgoing/xmlfeed.xml"
Case "Java": URL = _
"Http://services.devx.com/outgoing/javafeed.xml"
Case "Open Source": URL = _
"Http://services.devx.com/outgoing/openSourceFeed.xml"
End Select
Label1.Text = Loadrss (URL)
End Sub
Finally, in the Load event, the RSS XML that reads the latest information by default

Protected Sub Page_Load (_
ByVal sender as Object, _
ByVal e as System.EventArgs) Handles Me.load
Label1.Text = _
Loadrss ("Http://services.devx.com/outgoing/devxfeed.xml")
End Sub
After the running effect as shown in the following figure, click on the left of each category Theme button, will automatically go to the Web site to download the latest RSS XML and parsing, and finally displayed to the page, and all this because of the use of Atlas but no refresh.