摘要 有時(shí)，ajax看上去為web頁面平添了一分神秘的色彩。如果頁面能夠支持一些小件（例如圖像和文本塊）的拖放操作，那么，這明顯會(huì)使訪問者眼前一亮。在本文中，你會(huì)看到，利用微軟atlas你也會(huì)非常容易地在客戶端實(shí)現(xiàn)類似的鼠標(biāo)拖放功能。
一、 引言
你能夠把一個(gè)相當(dāng)酷的特征添加到你的web應(yīng)用程序中：使用戶能夠定制自己的頁面的外觀感覺。并且，在經(jīng)常情況下，用戶都喜歡重新安排頁面部分以適合他們自己的查看習(xí)慣。不妨讓我們設(shè)想這樣的情景：用戶導(dǎo)航到某一個(gè)網(wǎng)站，能夠選擇其中的一部分（例如圖像、文本和其它頁面小件），并且能夠動(dòng)態(tài)地移動(dòng)它們。今天，借助于例如atlas這樣的ajax技術(shù)，我們可以非常容易地實(shí)現(xiàn)這樣的功能。
當(dāng)然，在asp.net 2.0中，你還能夠使用webparts框架來構(gòu)建與此極類似的特征。然而，如果你想使用一種更簡單些的方法在你的頁面中加入類似于webparts這樣的特征的話，那么，atlas為你提供了一種解決方案。
在本文中，我將向你展示如何使你的web頁面部分"可移動(dòng)"；用戶將能夠使用基本的鼠標(biāo)拖放操作來重新放置頁面中的各個(gè)部分。特別是，我們可以借助asp.net 2.0提供的profile服務(wù)實(shí)現(xiàn)頁面的個(gè)性定制，并且針對(duì)每位用戶保存相應(yīng)的定制信息。
二、 構(gòu)建應(yīng)用程序
使用visual studio 2005創(chuàng)建一個(gè)新的atlas應(yīng)用程序，并且命名為"c:/draganddrop"。然后，切換到default.aspx頁面的code-behind部分。
首先，把＜atlas:scriptmanager＞控件的enablepartialrendering屬性設(shè)置為"true"；這樣以來，你的頁面就能夠支持部分頁面更新功能：
＜atlas:scriptmanager id="scriptmanager1" runat="server" enablepartialrendering="true" /＞
接下來，把一個(gè)＜atlas:updatepanel＞控件添加到該頁面，并且在它內(nèi)部添加＜contenttemplate＞元素。之后，再把一個(gè)面板控件添加到該＜contenttemplate＞元素并且按如下所示設(shè)置它的邊界風(fēng)格和尺寸：
＜atlas:scriptmanager id="scriptmanager1" runat="server" enablepartialrendering="true" /＞
＜div＞
＜atlas:updatepanel id="updatepanel1" runat="server"＞
?。糲ontenttemplate＞
＜asp:panel id="panel1" runat="server" borderstyle="solid" height="198px" width="194px"＞
＜/asp:panel＞
＜/contenttemplate＞
＜/atlas:updatepanel＞
現(xiàn)在，既然你已經(jīng)在一個(gè)＜atlas:updatepanel＞控件中嵌入了一個(gè)面板控件，那么，接下來，你需要把一些內(nèi)容添加到該面板控件中。為此，你既可以添加一些文本也可以添加另一個(gè)控件，例如calendar、imagemap，等等。在這個(gè)示例中，我想添加一個(gè)時(shí)鐘以顯示一個(gè)選定時(shí)區(qū)的時(shí)間。注意，在站點(diǎn)clocklink.com處提供了許多時(shí)髦的時(shí)鐘，你可以容易地把它們嵌入到你的web頁面里面。這些時(shí)鐘能夠在客戶端頁面每隔一秒更新自身一次而不會(huì)導(dǎo)致一次頁面重載。在此，你將添加一個(gè)顯示新澤西州時(shí)間的時(shí)鐘。為了嵌入這個(gè)鐘，你只需要簡單地插入下列以高亮加粗顯示的腳本即可：
＜atlas:updatepanel id="updatepanel1" runat="server"＞
＜contenttemplate＞
＜asp:panel id="panel1" runat="server" borderstyle="solid" height="198px" width="194px"＞
＜script rc="http://www.clocklink.com/embed.js"＞
＜/script＞
＜strong＞current time in new zealand＜/strong＞
＜script type="text/javascript" language="javascript"＞
obj = new object;
obj.clockfile = "0010-red.swf";
obj.timezone = "nzt";
obj.width = 200;
obj.height = 200;
obj.wmode = "transparent";
showclock(obj);
＜/script＞
＜/asp:panel＞
＜/contenttemplate＞
＜/atlas:updatepanel＞
至此，只要按下f5鍵，你就能夠看到該頁面的樣式。圖1顯示了該時(shí)鐘顯示于一個(gè)面板控件內(nèi)的情形。
圖1.該屏幕快照顯示了default.aspx頁面，其中的時(shí)鐘每隔一秒更新一次時(shí)間。
停止運(yùn)行應(yīng)用程序。現(xiàn)在，讓我們加入一些功能使上面的面板控件包含可移動(dòng)的時(shí)鐘。你將使用＜atlas:dragoverlayextender＞控件來達(dá)到這一目的。其實(shí)，這個(gè)＜atlas:dragoverlayextender＞控件繼承自另一個(gè)控件并進(jìn)一步把它轉(zhuǎn)變成為一個(gè)可拖動(dòng)的控件。最終，你能夠在web頁面上任意拖放這個(gè)控件。
現(xiàn)在，請?zhí)砑樱糰tlas:dragoverlayextender＞一個(gè)控件并對(duì)它進(jìn)行配置-添加一個(gè)＜atlas:dragoverlayproperties＞控件并且設(shè)置它的targetcontrolid屬性為"panel1"。還要記住：把它的enabled屬性設(shè)置為true：
＜atlas:scriptmanager id="scriptmanager1" runat="server" enablepartialrendering="true" /＞
?。糰tlas:dragoverlayextender id="dragoverlayextender1" runat="server"＞
?。糰tlas:dragoverlayproperties targetcontrolid="panel1" enabled="true"/＞
＜/atlas:dragoverlayextender＞
再次按f5鍵測試該應(yīng)用程序?，F(xiàn)在，你應(yīng)該能夠在頁面上拖動(dòng)這個(gè)時(shí)鐘。然而，你會(huì)注意到，當(dāng)你釋放鼠標(biāo)時(shí)，該時(shí)鐘將總是返回到它的原始位置。因?yàn)槟悴荒馨言摽丶蟿?dòng)到頁面中生成的其它控件上并且你的頁面上除了這個(gè)面板控件外一片空白，所以會(huì)發(fā)生這一現(xiàn)象。為此，你可以通過簡單地在頁面的＜body＞元素中添加下列屬性來更正這個(gè)問題：
＜body ＞
按f5再次測試該應(yīng)用程序?，F(xiàn)在，你應(yīng)該能夠拖動(dòng)該時(shí)鐘，并把它拖放到頁面的任何位置，只要你仍然在面板控件范圍之內(nèi)(見圖2)。
圖2.該屏幕快照顯示了與圖1相同的時(shí)鐘，只不過我用鼠標(biāo)把它拖到了一個(gè)新位置。
三、 個(gè)性化頁面
現(xiàn)在，既然你已經(jīng)能夠在一個(gè)頁面上拖放一個(gè)控件，那么你應(yīng)該會(huì)意識(shí)到，當(dāng)該應(yīng)用程序重新啟動(dòng)時(shí)，該控件又恢復(fù)到它的原始位置。在實(shí)際情況下，用戶往往要求應(yīng)用程序記住該頁面的設(shè)置。為此，我們需要使用asp.net 2.0提供的profile服務(wù)。
為了使用asp.net 2.0提供的profile服務(wù)，你需要做一些準(zhǔn)備工作。首先，通過把下列內(nèi)容添加到web.config，從而把一個(gè)profile屬性添加到應(yīng)用程序中：
＜system.web＞
＜profile＞
＜properties＞
?。糰dd name="panel1loc" type="system.string" /＞
?。?properties＞
＜/profile＞
然后，你需要去掉web.config中＜profileservice＞元素處的注釋；這樣以來，現(xiàn)在，atlas便能夠使用服務(wù)器端的profile服務(wù)。然后，按如下所示設(shè)置它的屬性：
＜profileservice enabled="true" setproperties="panel1loc" getproperties="panel1loc" /＞
基本上，你是在告訴atlas你想讀寫這個(gè)名字為panel1loc的profile屬性。
然后，把profileproperty屬性添加到＜atlas:dragoverlayproperties＞控件，并且把它設(shè)置為"panel1loc"。這將允許它保存該面板控件的位置；該控件要擴(kuò)展到剛才加入的這個(gè)名字為panel1loc的profile屬性：
＜atlas:dragoverlayextender id="dragoverlayextender1" runat="server"＞
＜atlas:dragoverlayproperties targetcontrolid="panel1" enabled="true" profileproperty="panel1loc" /＞
＜/atlas:dragoverlayextender＞
最后，添加＜atlas:profilescriptservice＞控件并且把它的autosave屬性設(shè)置為true。這將導(dǎo)致面板控件的位置數(shù)據(jù)被自動(dòng)保存到profile屬性中-無論何時(shí)拖動(dòng)它：
＜atlas:scriptmanager id="scriptmanager1" runat="server" enablepartialrendering="true" /＞
＜atlas:profilescriptservice id="profilescriptservice1" runat="server" autosave="true" /＞
現(xiàn)在，再次按f5測試該應(yīng)用程序，試著把時(shí)鐘拖放到一個(gè)新的位置。停止該應(yīng)用程序并再次運(yùn)行它；結(jié)果，你將看到，時(shí)鐘現(xiàn)在又回到其原來的位置。
四、 分析數(shù)據(jù)庫
為了驗(yàn)證時(shí)鐘的位置信息真正被存儲(chǔ)起來了，你可以刷新你的工程下的app_data文件夾（見圖3）；這時(shí)，你應(yīng)該能夠看到新創(chuàng)建的aspnetdb.mdf數(shù)據(jù)庫。這個(gè)數(shù)據(jù)庫為asp.net所用來保存應(yīng)用程序相關(guān)的數(shù)據(jù)。
圖3.aspnetdb.mdf是存儲(chǔ)你的頁面中元素的位置數(shù)據(jù)的數(shù)據(jù)庫。
雙擊aspnetdb.mdf文件。然后，在server explorer中，展開tables項(xiàng)，右擊aspnet_profile表格并選擇"show table data"。表格的第一行顯示出profile屬性的值（見圖4）。
圖4.上面這一行包含被顯示的profile屬性的值。
【作者注】在本文示例中，我使用了缺省的windows認(rèn)證方式；因此，我的windows登錄將作為用戶名(單獨(dú)存儲(chǔ)在aspnet_users表格內(nèi))。注意，profile服務(wù)還可以在表單認(rèn)證方式下工作，而且還可以針對(duì)匿名用戶進(jìn)行認(rèn)證。 五、 添加更多的面板
到目前為止，你僅看到了一個(gè)面板控件?，F(xiàn)在，我將再添加一個(gè)面板控件來顯示當(dāng)前的日本時(shí)間。
首先，讓我們把一個(gè)新的包含另一個(gè)面板控件(panel2)的＜atlas:updatepanel＞控件(updatepanel2)添加到頁面上(現(xiàn)在，時(shí)鐘顯示日本時(shí)間)。
＜atlas:updatepanel id="updatepanel1" runat="server"＞
＜contenttemplate＞
...
...
＜/contenttemplate＞
＜/atlas:updatepanel＞
＜atlas:updatepanel id="updatepanel2" runat="server"＞
＜contenttemplate＞
＜asp:panel id="panel2" runat="server" borderstyle="solid" height="198px" width="194px"＞
＜script src="http://www.clocklink.com/embed.js"＞
＜/script＞
＜strong＞current time in japan＜/strong＞
＜script type="text/javascript" language="javascript"＞
obj = new object;
obj.clockfile = "0008-yellow.swf";
obj.timezone = "jst";
obj.width = 200;
obj.height = 200;
obj.wmode = "transparent";
showclock(obj);
＜/script＞
＜/asp:panel＞
＜/contenttemplate＞
＜/atlas:updatepanel＞
然后，再把一個(gè)新的＜atlas:dragoverlayproperties＞控件添加到＜atlas:dragoverlayextender＞以擴(kuò)展第二個(gè)面板控件：
＜atlas:dragoverlayextender id="dragoverlayextender1" runat="server"＞
＜atlas:dragoverlayproperties targetcontrolid="panel1" enabled="true" profileproperty="panel1loc" /＞
＜atlas:dragoverlayproperties targetcontrolid="panel2" enabled="true" profileproperty="panel2loc" /＞
＜/atlas:dragoverlayextender＞
在web.config文件中，添加另一個(gè)名字為panel2loc的profile屬性：
＜profile＞
＜properties＞
＜add name="panel1loc" type="system.string" /＞
＜add name="panel2loc" type="system.string" /＞
＜/properties＞
＜/profile＞
最后，修改setproperties和getproperties屬性以包括panel2loc profile屬性：
＜profileservice enabled="true"
setproperties="panel1loc;panel2loc"
getproperties="panel1loc;panel2loc" /＞
按f5測試應(yīng)用程序。現(xiàn)在，你能夠拖放這兩個(gè)時(shí)鐘，并且即使你重載頁面，它們?nèi)匀粫?huì)保持在相同的位置處(參考圖5)。
圖5.拖放兩個(gè)面板控件。
六、 使用dragpanel控件實(shí)現(xiàn)可選的拖放
除了使用＜atlas:dragoverlayextender＞控件在web頁面上實(shí)現(xiàn)拖放操作之外，你還能夠使用包含在atlas control toolkit中的dragpanelextender控件。基本上，這個(gè)dragpanelextender控件非常類似于＜atlas:dragoverlayextender＞控件，除了它沒有內(nèi)置的存儲(chǔ)被拖動(dòng)控件的位置信息的能力之外。
為了實(shí)際觀察該dragpanelextender控件的工作方式，讓我們把一個(gè)新的web表單添加到頁面(default2.aspx)中。然后，切換到該表單的code-behind，并且按如下所示修改該表單的源碼：
＜atlas:scriptmanager id="scriptmanager1" runat="server"＞
＜/atlas:scriptmanager＞
＜asp:panel id="panel1" runat="server" width="125px" borderstyle="double"＞
＜asp:panel id="panel2" runat="server" height="1px" width="100%" borderstyle="double" backcolor="white"＞
＜div ＞drag me＜/div＞
＜/asp:panel＞
＜center＞
＜asp:panel id="panel3" runat="server" height="50px" width="125px"＞
＜asp:image id="image1" runat="server" height="318px" width="475px" imageurl="~/fish.jpg" /＞
＜/asp:panel＞
＜/center＞
＜/asp:panel＞
基本上，在上面的代碼中，你實(shí)現(xiàn)了：
· 一個(gè)＜atlas:scriptmanager＞控件。
· 兩個(gè)panel控件(panel2和panel3)嵌入在第三個(gè)面板控件(panel1)中。
· panel2包含一個(gè)＜div＞元素，其中包含一個(gè)字符串"drag me"。
· panel3中包含一幅圖像-fish.jpg(你需要把該圖像添加到工程中)。
dragpanelextender控件允許你指定哪個(gè)面板控件應(yīng)該允許拖動(dòng)(在此，是panel2)以及相應(yīng)的應(yīng)該移動(dòng)的面板控件(在此，是panel1)。為此，把下列片斷添加到頁面中：
＜cc1:dragpanelextender id="dragpanelextender1" runat="server"＞
＜cc1:dragpanelproperties
draghandleid="panel2"
targetcontrolid="panel1" /＞
＜/cc1:dragpanelextender＞
現(xiàn)在，用戶能夠拖動(dòng)panel2，而且相應(yīng)的panel1會(huì)隨之移動(dòng)?，F(xiàn)在，按f5測試應(yīng)用程序。現(xiàn)在，通過拖動(dòng)包含字符串"drag me"的面板，你能夠移動(dòng)該包含圖像的面板(見圖6)。
圖6.使用這種dragpanelextender控件，你的用戶會(huì)更直觀地意識(shí)到這一面板是可移動(dòng)的。
七、 改變?yōu)橐粋€(gè)拖動(dòng)圖標(biāo)
如果你善于觀察，那么你會(huì)注意到，當(dāng)鼠標(biāo)停在"drag me"面板上時(shí)，光標(biāo)并沒有改變成一個(gè)"移動(dòng)"光標(biāo)形式(它是一個(gè)具有四個(gè)方向的箭頭圖標(biāo))。因此，說實(shí)在的，這并算是一種良好的ui設(shè)計(jì)，因?yàn)樗€沒有向用戶準(zhǔn)確表達(dá)出"這是一個(gè)可移動(dòng)的面板"這一信息。為此，你需要添加一個(gè)層疊式樣表（css）。
現(xiàn)在，請把一個(gè)css式樣表添加到工程（從solution explorer中右擊工程名，然后選擇"add new item…"，再選擇"style sheet"）。在此，我們使用了缺省名：stylesheet.css。然后，使用下列內(nèi)容填充該式樣表：
.dragicon {
width:100%;
height:21px;
background-color:#fff;
text-align:center;
cursor:move;
font-weight:bold;
}
現(xiàn)在，讓我們回到default2.aspx文件的源碼視圖，通過添加下面高亮加粗的元素以便鏈接到新添加的stylesheet：
＜head runat="server"＞
＜title＞untitled page＜/title＞
＜link href="stylesheet.css" rel="stylesheet" type="text/css" /＞
＜/head＞
為確保鼠標(biāo)在"drag me"面板上移動(dòng)，請按如下所示設(shè)置＜div＞元素的class屬性：
＜asp:panel id="panel2" runat="server" height="1px" width="100%" borderstyle="double" backcolor="white"＞
＜div class="dragicon" ＞
drag me＜/div＞
＜/asp:panel＞
按f5再次測試該應(yīng)用程序?，F(xiàn)在，當(dāng)你的鼠標(biāo)在"drag me"面板上移動(dòng)時(shí)，它會(huì)改變?yōu)?移動(dòng)"光標(biāo)形狀（請見圖7）。
圖7.把光標(biāo)改為"移動(dòng)"型以便用戶從可移動(dòng)的面板獲得更直觀的視覺效果。
八、小結(jié)
通過本文，你了解了如何使用atlas在你的web頁面上輕松地實(shí)現(xiàn)拖放功能。除了能夠擴(kuò)展panel控件之外，＜atlas:dragoverlayextender＞控件還能夠用于擴(kuò)展其它web服務(wù)器控件。作為選擇，你還能夠從atlas control toolkit中使用dragpanelextender控件，從而使panel控件可以移動(dòng)。最后，你學(xué)習(xí)了如何把一個(gè)可移動(dòng)控件的缺省光標(biāo)改變?yōu)?移動(dòng)"光標(biāo)，以便向用戶傳達(dá)更具可視化的效果。，歡迎訪問網(wǎng)頁設(shè)計(jì)愛好者web開發(fā)。
