小男孩‘自慰网亚洲一区二区,亚洲一级在线播放毛片,亚洲中文字幕av每天更新,黄aⅴ永久免费无码,91成人午夜在线精品,色网站免费在线观看,亚洲欧洲wwwww在线观看

搜索
分享

ASP.net:Atlas快速入門(mén)之實(shí)戰(zhàn)Atlas-ASP.net技術(shù)

 谷忙 2011-04-16

ASP.net:Atlas快速入門(mén)之實(shí)戰(zhàn)Atlas

添加時(shí)間:2007-4-7　

　　隨著ajax技術(shù)的出現(xiàn)，web 2.0時(shí)代已經(jīng)來(lái)臨，目前已經(jīng)涌現(xiàn)了大量的web 2.0的網(wǎng)站，比如live.com,fclickr相冊(cè)網(wǎng)站，google Map等等。那什么是ajax呢？AJAX技術(shù)其實(shí)是舊瓶裝新酒了，它使用了異步JavaScript+XML。這種技術(shù)首先由微軟在1999年引入，并以"使用遠(yuǎn)程調(diào)用的DHTML/JavaScript web應(yīng)用程序"著稱(chēng)。這一技術(shù)的基本思想是，允許一個(gè)互聯(lián)網(wǎng)瀏覽器向一個(gè)遠(yuǎn)程頁(yè)面/服務(wù)作異步的HTTP調(diào)用，并且用收到的結(jié)果更新一個(gè)當(dāng)前web頁(yè)面而不必刷新整個(gè)頁(yè)面。根據(jù)這種技術(shù)創(chuàng)建者的意見(jiàn)，這種技術(shù)應(yīng)能夠改進(jìn)客戶端的體驗(yàn)，使得HTTP頁(yè)面外觀與使用感覺(jué)很類(lèi)似于Windows桌面應(yīng)用程序。

　　目前，已經(jīng)涌現(xiàn)出了不少關(guān)于ajax的技術(shù)框架。而在.net 方面，也有不少開(kāi)源的框架，如ajax.net,magic ajax等。而微軟也推出了自己的ajax框架----Atlas，目前的版本是6月份的CTP版本。在Atlas中，已經(jīng)封裝好了大量的ajax控件和功能，十分方便。本文中將以兩個(gè)實(shí)例來(lái)說(shuō)明如何使用Atlas來(lái)實(shí)現(xiàn)兩個(gè)簡(jiǎn)單的ajax應(yīng)用。

　　首先，我們要下載atlas,可以到 http://atlas.上去下載atlas的相關(guān)安裝文件。我們先來(lái)看一個(gè)簡(jiǎn)單的例子，在這個(gè)例子中，
我們通過(guò) 2.0中的日歷控件來(lái)說(shuō)明如何使用atlas.先打開(kāi)vs.net 2005,選擇"新建web站點(diǎn)",如下圖，這時(shí)會(huì)發(fā)現(xiàn)有"Atlas web site"的模版，這時(shí)我們可以輸入要?jiǎng)?chuàng)建應(yīng)用的名稱(chēng)，這里我們就用默認(rèn)的名稱(chēng)AtlasWebSite1。

　　在方案解決器中，你會(huì)發(fā)現(xiàn)vs.net 2005已經(jīng)預(yù)先放置了一些文件，其中，在bin文件夾下包含了Microsoft.Web.Atlas.dll文件，這是支持ajax功能的文件。為了能在設(shè)計(jì)中使用到ajax控件，必須在TOOLS工具箱中添加一個(gè)新的選項(xiàng)卡，命名為Atals,然后右鍵點(diǎn)擊該選項(xiàng)卡，在彈出的菜單中選擇"choose item",然后用瀏覽的功能，選擇atals.dll文件，這樣，就添加了一系列的Atals控件，如下圖：

　　我們將其中的ScriptManager控件拖拉到頁(yè)面中去。ScriptManager控件可以看作是管理Atlas控件的集合，它用來(lái)處理頁(yè)面上的所有Atlas組件以及局部頁(yè)面的更新，生成相關(guān)的客戶端腳本，所有需要支持Atlas的ASP.NET頁(yè)面上有且只能有一個(gè)ScriptManager控件。在ScriptManager控件中我們可以指定需要的腳本庫(kù)，或者指定通過(guò)JS來(lái)調(diào)用的Web Service，還可以指定頁(yè)面錯(cuò)誤處理等。

　　接著，我們拖拉一個(gè)日歷控件到頁(yè)面中去，放在剛才scriptmanager控件的下面，并且選擇一個(gè)喜歡的樣式，如下圖所示：

　　接下來(lái)，我們看下如何在這個(gè)日歷控件中使用ajax技術(shù)。在.net 的日歷控件中，人們經(jīng)常抱怨的是，每次選定日歷上的一個(gè)日期，都會(huì)引發(fā)一次postback頁(yè)面回傳，需要用戶等待，十分不方便。下面，我們通過(guò)Atals控件，來(lái)對(duì)日歷控件進(jìn)行改造。

　　在default.aspx頁(yè)中，切換到代碼視圖，在之前的＜atlas:ScriptManager＞控件中，加入EnablePartialRendering屬性，以使得atlas可以對(duì)頁(yè)面進(jìn)行局部更新，如下所示

＜atlas:ScriptManager ID="ScriptManager1" runat="server"
EnablePartialRendering="true" /＞

　　再增加一個(gè)＜UpdatePanel＞控件，UpdatePanel是Atlas中一個(gè)很重要的控件，功能強(qiáng)大容易使用，可以只做很小的改動(dòng)就可以向已有的ASP.NET站點(diǎn)添加Ajax功能,我們?cè)賹⑷諝v控件拖拉放到updatepanel控件中去，其中要注意到，日歷控件是放到＜ContentTemplate＞的標(biāo)簽內(nèi)的，該標(biāo)簽內(nèi)放的就是受UpdatePanel控制的控件，如下代碼所示：

＜atlas:UpdatePanel ID="id1" runat="server"＞
＜ContentTemplate＞
＜asp:Calendar ID="Calendar1" runat="server"
BackColor="#FFFFCC" ... /＞
＜/asp:Calendar＞
＜/ContentTemplate＞
＜/atlas:UpdatePanel＞

　　為了更好地看到效果，我們?cè)黾觾蓚€(gè)下拉選擇框，可以讓用戶選擇年份和月份，代碼如下所示

＜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＞
?。糰sp:ListItem Value="3"＞Mar＜/asp:ListItem＞
?。糰sp:ListItem Value="4"＞Apr＜/asp:ListItem＞
?。糰sp:ListItem Value="5"＞May＜/asp:ListItem＞
?。糰sp: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＞
　＜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 /＞

　　然后在code-behind的代碼中，寫(xiě)入如下代碼：

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事件寫(xiě)入了代碼，主要是控制當(dāng)用戶選擇了月份和年份時(shí)，日歷控件中顯示相應(yīng)的日期。但當(dāng)我們F5運(yùn)行時(shí)，會(huì)發(fā)覺(jué)頁(yè)面依然會(huì)引起postback刷新的。因此，我們要定義觸發(fā)器triggers。

　　所謂的觸發(fā)器，指定了發(fā)生動(dòng)作的事件源，UpdatePanel提供兩種引發(fā)異步PostBack的Trigger ，分別是ControlEventTrigger和ControlEventTrigger。其中ControlEventTrigge是指當(dāng)某個(gè)控件的某個(gè)指定的屬性變化時(shí)更新，而ControlEventTrigger是指當(dāng)指定的事件發(fā)生時(shí)進(jìn)行更新。則我們修改代碼如下：

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

　　這里，分別指定了月份下拉框的屬性觸發(fā)器和年份下拉框的事件觸發(fā)器，使得無(wú)論當(dāng)用戶選擇哪一個(gè)下拉框時(shí)，都會(huì)引發(fā)局部的刷新，而這些刷新全部都通過(guò)updatepanel控件來(lái)封裝進(jìn)行處理了。所以當(dāng)運(yùn)行程序時(shí)，頁(yè)面不會(huì)象以前那樣要進(jìn)行一次postback和整體頁(yè)面的刷新。

　　最后，我們?cè)僭谌諝v控件下面，增加一個(gè)進(jìn)度狀態(tài)條控件UpdateProgress，用來(lái)向用戶反映當(dāng)前的進(jìn)度，代碼如下所示

＜atlas:UpdateProgress ID="pro" runat="server"＞
＜ProgressTemplate＞
＜asp:Label ID="Label1" runat="server" Text="Label"＞
Updating Calendar...
＜/asp:Label＞
＜/ProgressTemplate＞
＜/atlas:UpdateProgress＞

　　要注意的是，上面我們?cè)谶M(jìn)度狀態(tài)控件的＜ProgressTemplate＞中，我們只是簡(jiǎn)單加入了一個(gè)標(biāo)簽控件，如果有實(shí)際需要的話，我們是可以加入圖片的。

　　到此，我們的程序大功告成了，運(yùn)行這個(gè)日歷程序，選擇月份和年份下拉框，會(huì)看到日歷控件沒(méi)有象以前那樣引起整個(gè)頁(yè)面的刷新，而是很快在日歷控件中顯示出相應(yīng)的日期。

 

　　為了加深對(duì)Atlas的認(rèn)識(shí)，我們?cè)倥e一個(gè)例子來(lái)說(shuō)明問(wèn)題。我們的這個(gè)應(yīng)用，將是在一個(gè)頁(yè)面中，提供給用戶能通過(guò)點(diǎn)選分類(lèi)主題按鈕的方式，獲得站點(diǎn)上最新的新聞，這是通過(guò)讀取站點(diǎn)上的RSS的形式來(lái)進(jìn)行的。

　　我們首先新建另外的一個(gè)頁(yè)面，其中也放入scriptmanager控件，接著我們要設(shè)計(jì)一個(gè)簡(jiǎn)單的頁(yè)面了。比如添加一個(gè)好看的BANNER在頁(yè)面頭部，并且為了顯示加載的進(jìn)度，這次我們添加一個(gè)有Loading…動(dòng)畫(huà)的GIF，再建立一個(gè)一行兩列的大表格，在表格的左邊，放入若干個(gè)按鈕。比如這里我們根據(jù)每個(gè)技術(shù)專(zhuān)題，放入了十個(gè)按鈕。

　　然后再拖放一個(gè)xmldatasource控件到窗體中，因?yàn)槲覀円x取網(wǎng)站上的RSS XML文件進(jìn)行解析。在表格的右邊，放入一個(gè)DataList控件，并且將這個(gè)DataList控件綁定到xmldatasource控件中去。最后，大致的界面圖如下所示：


　　接下來(lái)對(duì)XMLDATASOURCE控件進(jìn)行設(shè)置。我們點(diǎn)選控件右上方的智能感知功能，在彈出的窗口中的XPATH里，選擇Xpath Expression,在這里，我們填入"rss/channel/item"。要注意的是，由于我們想瀏覽的網(wǎng)站提供的RSS 的XML文件里，我們只對(duì)每個(gè)頻道的最新信息感興趣，因此我磨恩這樣填寫(xiě)，而完整的該網(wǎng)站的RSS信息在http://services./outgoing/devxfeed.xml可以看到。最后，我們的頁(yè)面前端代碼如下所示：

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

　　在上面的代碼中，我們除了為每一個(gè)button按鈕都設(shè)置了事件觸發(fā)器外，還在DataList控件中，通過(guò)＜%#XPath("description") %＞的方式，將讀取并分析好的XML文件綁定顯示出來(lái)。下面，我們就開(kāi)始撰寫(xiě)后端的處理讀取到的RSS XML文件的代碼。

 

　　首先，由于要處理XML，讀取網(wǎng)站上的資源，所以要引入如下幾個(gè)命名空間

Imports System.Net
Imports System.IO
Imports System.Xml
　　當(dāng)用戶點(diǎn)選某個(gè)分類(lèi)主題的按鈕時(shí)，將會(huì)自動(dòng)下載該網(wǎng)站中符合主題的RSS XML文件，下載完后再進(jìn)行解析，再顯示到頁(yè)面中去。代碼如下：

Public Function SendRequest( _
ByVal URI As String, _
ByVal requestType As String) As HttpWebRequest
Dim req As HttpWebRequest = Nothing
Try
//發(fā)起HTTP請(qǐng)求
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
//從服務(wù)器中獲得響應(yīng)輸出流
Dim resp As HttpWebResponse = req.GetResponse()
Dim stream As Stream = resp.GetResponseStream()

//使用streamreader去處理得到的服務(wù)器響應(yīng)
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

　　上面的兩個(gè)方法，分別向網(wǎng)站服務(wù)器發(fā)出獲取指定URL的信息的請(qǐng)求，并用IO流中的streamreader的方式獲得服務(wù)器返回的輸出信息。而下面的LoadRSS()方法，傳入的參數(shù)是指定的URL地址，然后分別調(diào)用上面的兩個(gè)方法，在最后獲得服務(wù)器返回的輸出流后，再通過(guò)解析XML的方式，選擇合適的結(jié)點(diǎn)內(nèi)容進(jìn)行返回。代碼如下：

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)

//選擇合適的結(jié)點(diǎn)
Dim titleNode As XmlNode = _
xmlDoc.DocumentElement.SelectSingleNode("channel/title")

Return titleNode.InnerText
Catch ex As Exception
　Return String.Empty
End Try
End Function

　　接著，我們還有為10多個(gè)按鈕編寫(xiě)響應(yīng)的事件，當(dāng)點(diǎn)選了某個(gè)分類(lèi)主題的按鈕后，則向服務(wù)器請(qǐng)求指定的分類(lèi)主題的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./outgoing/databasefeed.xml"
Case ".NET" : URL = _
"http://services./outgoing/dotnet.xml"
Case "C++" : URL = _
"http://services./outgoing/cplusfeed.xml"
Case "Recent Tips" : URL = _
"http://services./outgoing/recentTipsFeed.xml"
Case "Web Dev" : URL = _
"http://services./outgoing/webdevfeed.xml"
Case "Latest" : URL = _
"http://services./outgoing/devxfeed.xml"
Case "Enterprise" : URL = _
"http://services./outgoing/enterprisefeed.xml"
Case "Wireless / Mobile" : URL = _
"http://services./outgoing/wirelessfeed.xml"
Case "XML" : URL = _
"http://services./outgoing/xmlfeed.xml"
Case "Java" : URL = _
"http://services./outgoing/javafeed.xml"
Case "Open Source" : URL = _
"http://services./outgoing/openSourceFeed.xml"
End Select
Label1.Text = LoadRSS(URL)
End Sub

　　最后，在LOAD事件中,默認(rèn)讀取最新信息的RSS XML

Protected Sub Page_Load( _
ByVal sender As Object, _
ByVal e As System.EventArgs) Handles Me.Load
Label1.Text = _
LoadRSS("http://services./outgoing/devxfeed.xml")
End Sub

　　運(yùn)行后效果如下圖所示,點(diǎn)選左邊每個(gè)分類(lèi)主題的按鈕，都會(huì)自動(dòng)去該網(wǎng)站下載最新的RSS XML 并且進(jìn)行解析，最后展示到頁(yè)面中去，而這一切都由于用了Atlas而是無(wú)刷新的。

 

    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買(mǎi)等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花（0）

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類(lèi)似文章 更多