Atlas快速入門之實戰Atlas

2024-07-21 02:28:36

字體：大中小

來源：轉載

供稿：網友

中國最大的web開發資源網站及技術社區，

　　隨著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可以對頁面進行局部更新，如下所示

＜atlas:scriptmanager id="scriptmanager1" runat="server"
enablepartialrendering="true" /＞

　　再增加一個＜updatepanel＞控件，updatepanel是atlas中一個很重要的控件，功能強大容易使用，可以只做很小的改動就可以向已有的asp.net站點添加ajax功能,我們再將日歷控件拖拉放到updatepanel控件中去，其中要注意到，日歷控件是放到＜contenttemplate＞的標簽內的，該標簽內放的就是受updatepanel控制的控件，如下代碼所示：

　　為了更好地看到效果，我們增加兩個下拉選擇框，可以讓用戶選擇年份和月份，代碼如下所示

＜form id="form1" runat="server"＞
＜atlas:scriptmanager id="scriptmanager1" runat="server"
enablepartialrendering="true" /＞

＜asp:dropdownlist id="dropdownlist1" runat="server"
autopostback="true"＞
?。糰sp:listitem value="1"＞jan＜/asp:listitem＞
?。糰sp:listitem value="2"＞feb＜/asp:listitem＞
　＜asp:listitem value="3"＞mar＜/asp:listitem＞
?。糰sp:listitem value="4"＞apr＜/asp:listitem＞
?。糰sp:listitem value="5"＞may＜/asp:listitem＞
　＜asp:listitem value="6"＞jun＜/asp:listitem＞
?。糰sp:listitem value="7"＞jul＜/asp:listitem＞
?。糰sp:listitem value="8"＞aug＜/asp:listitem＞
?。糰sp:listitem value="9"＞sep＜/asp:listitem＞
?。糰sp:listitem value="10"＞oct＜/asp:listitem＞
?。糰sp:listitem value="11"＞nov＜/asp:listitem＞
?。糰sp: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 /＞

　　然后在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

　　在上面的代碼中，分別為月份和年份的下拉選擇框的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而是無刷新的。