【转】Atlas快速入门之实战Atlas。

随着ajax技术的出现，web 2.0时代已经来临，目前已经涌现了大量的web 2.0的网站，比如live.com,fclickr相册网站，google Map等等。那什么是ajax呢?AJAX技术其实是旧瓶装新酒了，它使用了异步JavaScript+XML。这种技术首先由微软在1999年引入，并以"使用远程调用的DHTML/JavaScript web应用程序"著称。这一技术的基本思想是，允许一个互联网浏览器向一个远程页面/服务作异步的HTTP调用，并且用收到的结果更新一个当前web页面而不必刷新整个页面。根据这种技术创建者的意见，这种技术应能够改进客户端的体验，使得HTTP页面外观与使用感觉很类似于Windows桌面应用程序。

目前，已经涌现出了不少关于ajax的技术框架。而在.net 方面，也有不少开源的框架，如ajax.net,magic ajax等。而微软也推出了自己的ajax框架----Atlas，目前的版本是6月份的CTP版本。在Atlas中，已经封装好了大量的ajax控件和功能，十分方便。本文中将以两个实例来说明如何使用Atlas来实现两个简单的ajax应用。

首先，我们要下载atlas,可以到 http://atlas.asp.net上去下载atlas的相关安装文件。我们先来看一个简单的例子，在这个例子中，

我们通过asp.net 2.0中的日历控件来说明如何使用atlas.先打开vs.net 2005,选择"新建web站点",如下图，这时会发现有"Atlas web site"的模版，这时我们可以输入要创建应用的名称，这里我们就用默认的名称AtlasWebSite1。

在方案解决器中，你会发现vs.net 2005已经预先放置了一些文件，其中，在bin文件夹下包含了Microsoft.Web.Atlas.dll文件，这是支持ajax功能的文件。为了能在设计中使用到ajax控件，必须在TOOLS工具箱中添加一个新的选项卡，命名为Atals,然后右键点击该选项卡，在弹出的菜单中选择"choose item",然后用浏览的功能，选择atals.dll文件，这样，就添加了一系列的Atals控件，如下图:

我们将其中的ScriptManager控件拖拉到页面中去。ScriptManager控件可以看作是管理Atlas控件的集合，它用来处理页面上的所有Atlas组件以及局部页面的更新，生成相关的客户端脚本，所有需要支持Atlas的ASP.NET页面上有且只能有一个ScriptManager控件。在ScriptManager控件中我们可以指定需要的脚本库，或者指定通过JS来调用的Web Service，还可以指定页面错误处理等。

接着，我们拖拉一个日历控件到页面中去，放在刚才scriptmanager控件的下面，并且选择一个喜欢的样式，如下图所示:

接下来，我们看下如何在这个日历控件中使用ajax技术。在.net 的日历控件中，人们经常抱怨的是，每次选定日历上的一个日期，都会引发一次postback页面回传，需要用户等待，十分不方便。下面，我们通过Atals控件，来对日历控件进行改造。
在default.aspx页中，切换到代码视图，在之前的＜atlas:ScriptManager＞控件中，加入EnablePartialRendering属性，以使得atlas可以对页面进行局部更新，如下所示 然后在code-behind的代码中，写入如下代码:

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

 

＜atlas:ScriptManager ID="ScriptManager1" runat="server"

EnablePartialRendering="true" /＞

再增加一个＜UpdatePanel＞控件，UpdatePanel是Atlas中一个很重要的控件，功能强大容易使用，可以只做很小的改动就可以向已有的ASP.NET站点添加Ajax功能,我们再将日历控件拖拉放到updatepanel控件中去，其中要注意到，日历控件是放到＜ContentTemplate＞的标签内的，该标签内放的就是受UpdatePanel控制的控件，如下代码所示:

＜atlas:UpdatePanel ID="id1" runat="server"＞

＜ContentTemplate＞

＜asp:Calendar ID="Calendar1" runat="server"

BackColor="#FFFFCC" ... /＞

＜/asp:Calendar＞

＜/ContentTemplate＞

＜/atlas:UpdatePanel＞

为了更好地看到效果，我们增加两个下拉选择框，可以让用户选择年份和月份，代码如下所示

＜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="10"＞Oct＜/asp:ListItem＞

　＜asp:ListItem Value="11"＞Nov＜/asp:ListItem＞

　＜asp:ListItem Value="12"＞Dec＜/asp:ListItem＞

＜/asp:DropDownList＞

Year

＜asp:DropDownList ID="DropDownList2" runat="server"

AutoPostBack="True"＞

＜asp:ListItem＞2005＜/asp:ListItem＞

＜asp:ListItem＞2006＜/asp:ListItem＞

＜asp:ListItem＞2007＜/asp:ListItem＞

＜/asp:DropDownList＞＜br /＞

 

 

 

在上面的代码中，分别为月份和年份的下拉选择框的selectedindexchanged事件写入了代码，主要是控制当用户选择了月份和年份时，日历控件中显示相应的日期。但当我们F5运行时，会发觉页面依然会引起postback刷新的。因此，我们要定义触发器triggers。

所谓的触发器，指定了发生动作的事件源，UpdatePanel提供两种引发异步PostBack的Trigger ，分别是ControlEventTrigger和ControlEventTrigger。其中ControlEventTrigge是指当某个控件的某个指定的属性变化时更新，而ControlEventTrigger是指当指定的事件发生时进行更新。则我们修改代码如下:

 

＜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＞

这里，分别指定了月份下拉框的属性触发器和年份下拉框的事件触发器，使得无论当用户选择哪一个下拉框时，都会引发局部的刷新，而这些刷新全部都通过updatepanel控件来封装进行处理了。所以当运行程序时，页面不会象以前那样要进行一次postback和整体页面的刷新。

 

最后，我们再在日历控件下面，增加一个进度状态条控件UpdateProgress，用来向用户反映当前的进度，代码如下所示

＜atlas:UpdateProgress ID="pro" runat="server"＞

＜ProgressTemplate＞

＜asp:Label ID="Label1" runat="server" Text="Label"＞

Updating Calendar...

＜/asp:Label＞

＜/ProgressTemplate＞

＜/atlas:UpdateProgress＞

要注意的是，上面我们在进度状态控件的＜ProgressTemplate＞中，我们只是简单加入了一个标签控件，如果有实际需要的话，我们是可以加入图片的。

到此，我们的程序大功告成了，运行这个日历程序，选择月份和年份下拉框，会看到日历控件没有象以前那样引起整个页面的刷新，而是很快在日历控件中显示出相应的日期。

为了加深对Atlas的认识，我们再举一个例子来说明问题。我们的这个应用，将是在一个页面中，提供给用户能通过点选分类主题按钮的方式，获得站点上最新的新闻，这是通过读取站点上的RSS的形式来进行的。

我们首先新建另外的一个页面，其中也放入scriptmanager控件，接着我们要设计一个简单的页面了。比如添加一个好看的BANNER在页面头部，并且为了显示加载的进度，这次我们添加一个有Loading…动画的GIF，再建立一个一行两列的大表格，在表格的左边，放入若干个按钮。比如这里我们根据每个技术专题，放入了十个按钮。

然后再拖放一个xmldatasource控件到窗体中，因为我们要读取网站上的RSS XML文件进行解析。在表格的右边，放入一个DataList控件，并且将这个DataList控件绑定到xmldatasource控件中去。最后，大致的界面图如下所示:

接下来对XMLDATASOURCE控件进行设置。我们点选控件右上方的智能感知功能，在弹出的窗口中的XPATH里，选择Xpath Expression,在这里，我们填入"rss/channel/item"。要注意的是，由于我们想浏览的网站提供的RSS 的XML文件里，我们只对每个频道的最新信息感兴趣，因此我磨恩这样填写，而完整的该网站的RSS信息在http://services.devx.com/outgoing/devxfeed.xml可以看到。最后，我们的页面前端代码如下所示:

 

＜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" /＞

＜HeaderStyle BackColor="Tan" Font-Bold="True" /＞

＜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＞

...

在上面的代码中，我们除了为每一个button按钮都设置了事件触发器外，还在DataList控件中，通过＜%#XPath("description") %＞的方式，将读取并分析好的XML文件绑定显示出来。下面，我们就开始撰写后端的处理读取到的RSS XML文件的代码。
首先，由于要处理XML，读取网站上的资源，所以要引入如下几个命名空间

 

Imports System.Net

Imports System.IO

Imports System.Xml

 

当用户点选某个分类主题的按钮时，将会自动下载该网站中符合主题的RSS XML文件，下载完后再进行解析，再显示到页面中去。代码如下:

Public Function SendRequest( _

ByVal URI As String, _

ByVal requestType As String) As HttpWebRequest

Dim req As HttpWebRequest = Nothing

Try

//发起HTTP请求

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

//从服务器中获得响应输出流

Dim resp As HttpWebResponse = req.GetResponse()

Dim stream As Stream = resp.GetResponseStream()

//使用streamreader去处理得到的服务器响应

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 body

End Function

上面的两个方法，分别向网站服务器发出获取指定URL的信息的请求，并用IO流中的streamreader的方式获得服务器返回的输出信息。而下面的LoadRSS()方法，传入的参数是指定的URL地址，然后分别调用上面的两个方法，在最后获得服务器返回的输出流后，再通过解析XML的方式，选择合适的结点内容进行返回。代码如下:

Public Function LoadRSS( _

ByVal URI As String) As String

Dim req As HttpWebRequest

Dim xmlDoc As XmlDocument = Nothing

Try

XmlDataSource1.DataFile = URI

//下载RSS XML文件

req = SendRequest(URI, "GET")

Dim xmlData As String = GetResponse(req)

xmlDoc = New XmlDocument()

xmlDoc.LoadXml(xmlData)

//选择合适的结点

Dim titleNode As XmlNode = _

xmlDoc.DocumentElement.SelectSingleNode("channel/title")

Return titleNode.InnerText

Catch ex As Exception

　Return String.Empty

End Try

End Function

 

接着，我们还有为10多个按钮编写响应的事件，当点选了某个分类主题的按钮后，则向服务器请求指定的分类主题的RSS XML，代码如下:

 

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

 

最后，在LOAD事件中,默认读取最新信息的RSS XML

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

运行后效果如下图所示,点选左边每个分类主题的按钮，都会自动去该网站下载最新的RSS XML 并且进行解析，最后展示到页面中去，而这一切都由于用了Atlas而是无刷新的。