一、 簡介

　　本文將向你展示如何使用微軟新的Web開發(fā)技術(shù)（代碼名為Atlas）來實(shí)現(xiàn)數(shù)據(jù)綁定和模板。如果你已經(jīng)理解什么是Atlas，其主要設(shè)計(jì)目的及其主要組件，那么你在閱讀本文時(shí)將最大程度地受益。

　　本文將向你展示：

　　· 把一個(gè)客戶端listView控件綁定到一個(gè)dataSource控件。

　　· 使用模板顯示數(shù)據(jù)。

　　前提

　　為了完成本文中的示例程序，你需要具備下列條件：

　　· Microsoft Visual Studio 2005和.NET Framework 2.0。有關(guān)下載信息，請(qǐng)?jiān)L問.NET Framework Developer Center Web站點(diǎn)。

　　· 要把Atlas包安裝到你的計(jì)算機(jī)上。這個(gè)MSI安裝器文件包括一個(gè)Visual Studio Content Installer(.vsi)以便在Visual Studio中創(chuàng)建一個(gè)空白的Atlas Web應(yīng)用程序。在本文中，我們省略了如何安裝ASP.NET Atlas內(nèi)容。

　　二、 創(chuàng)建Atlas應(yīng)用程序

　　首先，你要在Visual Studio中創(chuàng)建一個(gè)Atlas Web應(yīng)用程序。當(dāng)你使用Visual Studio工程模板來創(chuàng)建一個(gè)新的空白Atlas Web應(yīng)用程序時(shí)，Visual Studio會(huì)創(chuàng)建一個(gè)正常的具有下列一些其它項(xiàng)的Web站點(diǎn)文件夾結(jié)構(gòu)：

　　· 一個(gè)名為Microsoft.Web.Atlas.dll的可執(zhí)行文件，它駐留在Bin文件夾下以提供服務(wù)器端功能。

　　· 一個(gè)文件Web.config，用于設(shè)置Atlas應(yīng)用程序。

　　在Visual Studio中創(chuàng)建一個(gè)新的Atlas Web應(yīng)用程序

　　1. 在"File"菜單下，點(diǎn)擊"New"，然后點(diǎn)擊"Web Site"。

　　2. 在"New Web Site"對(duì)話框中，選擇"ASP.NET Atlas Web Site"模板項(xiàng)。

　　3. 在"Location"列表中，選擇"File System"。

　　4. 指定程序的一個(gè)路徑和開發(fā)語言，然后點(diǎn)擊"OK"。

　　

三、 提供應(yīng)用程序測試數(shù)據(jù)

　　在這一部分中，你要?jiǎng)?chuàng)建數(shù)據(jù)綁定程序所要使用的兩項(xiàng)內(nèi)容：

　　· 一個(gè)數(shù)據(jù)源對(duì)象-它通過提供一些測試數(shù)據(jù)和類SQL語句來模擬一個(gè)數(shù)據(jù)庫。

　　· 一個(gè)Web服務(wù)-它連接到數(shù)據(jù)源對(duì)象并且把該數(shù)據(jù)提供給一個(gè)使用Atlas組件創(chuàng)建的UI。

　　首先，你要?jiǎng)?chuàng)建數(shù)據(jù)源對(duì)象。

　　創(chuàng)建數(shù)據(jù)源對(duì)象

　　1. 在解決方案資源管理器中，右擊站點(diǎn)名字，然后點(diǎn)擊"Add New Item"。

　　2. 在"Add New Item"對(duì)話框中，選擇"Class"，并且命名這個(gè)類為SampleRow(沒有文件擴(kuò)展名)。

　　3. 為該類選擇開發(fā)語言，然后點(diǎn)擊"Add"按鈕。

　　4. 當(dāng)系統(tǒng)提問你，是否你想把這個(gè)類文件放到App_Code文件夾下時(shí)，點(diǎn)擊"Yes"。

　　5. 在編輯器中，從已有類中刪除任何現(xiàn)有代碼。

　　6. 把下列代碼粘貼到這個(gè)類中以創(chuàng)建一個(gè)數(shù)據(jù)源對(duì)象。

using System; using System.Collections; using System.ComponentModel; public class SampleRow{ private string _name; private string _description; private int _id; [DataObjectField(true， true)] public int Id { get { return _id; } set { _id = value; } } [DataObjectField(false)] [DefaultValue("New row")] public string Name { get { return _name; } set { _name = value; } } [DataObjectField(false)] [DefaultValue("")] public string Description { get { return _description; } set { _description = value; } } public SampleRow() { _id = -1; } public SampleRow(int id， string name， string description) { _id = id; _name = name; _description = description; } }

　

　7. 保存并關(guān)閉文件。

　　下一步是創(chuàng)建一個(gè)Web服務(wù)，由該服務(wù)為ASP.NET Web頁面提供來自于數(shù)據(jù)源對(duì)象的數(shù)據(jù)。

　　創(chuàng)建Web服務(wù)為頁面提供數(shù)據(jù)

　　1. 在解決方案資源管理器中，右擊站點(diǎn)名字，然后點(diǎn)擊"Add New Item"。

　　2. 在"Add New Item"對(duì)話框中，在Visual Studio已安裝的模板下，選擇"Web Service"。

　　3. 指定文件名為DataService.asmx并且不點(diǎn)選"Place code in separate file"復(fù)選框。

　　4. 選擇你想使用的語言。

　　5. 點(diǎn)擊"Add"。

　　6. 在編輯器中，從現(xiàn)有類中刪除任何現(xiàn)有代碼。

　　7. 把下列代碼粘貼到這個(gè)類中以創(chuàng)建一個(gè)數(shù)據(jù)源對(duì)象。

＜%@ WebService Language="C#" Class="SampleDataService" %＞ using System; using System.Collections; using System.Collections.Generic; using System.ComponentModel; using System.IO; using System.Web; using System.Web.Caching; using System.Web.Services; using System.Web.Services.Protocols; using Microsoft.Web.Services; [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] public class SampleDataService : DataService { static List＜SampleRow＞ _data; static int _nextId; static object _dataLock = new object(); private static List＜SampleRow＞ Data { 　get { 　　if (_data == null) { 　　　lock (_dataLock) { 　　　　if (_data == null) { 　　　　　_data = new List＜SampleRow＞(); 　　　　　　_data.Add(new SampleRow(0， "A. Datum Corporation"， "http://www.adatum.com")); 　　　　　　_data.Add(new SampleRow(1， "Adventure Works"， "http://www.adventure-works.com")); 　　　　　　_data.Add(new SampleRow(2， "Alpine Ski House"， "http://www.alpineskihouse.com")); 　　　　　　_data.Add(new SampleRow(3， "Baldwin Museum of Science?"， "http://www.baldwinmuseumofscience.com")); 　　　　　　_data.Add(new SampleRow(4， "Blue Yonder Airlines"，"http://www.blueyonderairlines.com")); 　　　　　　_data.Add(new SampleRow(5， "City Power & Light"，"http://www.cpandl.com")); 　　　　　　_data.Add(new SampleRow(6， "Coho Vineyard"，"http://www.cohovineyard.com")); 　　　　　　_data.Add(new SampleRow(7， "Contoso， Ltd"，"http://www.contoso.com")); 　　　　　　_data.Add(new SampleRow(8， "Graphic Design Institute"， "http://www.graphicdesigninstitute.com")); 　　　　　　_nextId = 9; 　　　　　} 　　　　} 　　　} 　　　return _data; 　　} 　} [DataObjectMethod(DataObjectMethodType.Delete)] public void DeleteRow(int id) { 　foreach (SampleRow row in _data) { 　　if (row.Id == id) { 　　　lock (_dataLock) { 　　　　_data.Remove(row); 　　　} 　　　break; 　　} 　} } [DataObjectMethod(DataObjectMethodType.Select)] public SampleRow[] SelectRows() { 　return SampleDataService.Data.ToArray(); } [DataObjectMethod(DataObjectMethodType.Insert)] public SampleRow InsertRow(string organization， string url) { 　SampleRow newRow; 　lock (_dataLock) { 　　newRow = new SampleRow(_nextId++， organization， url); 　　_data.Add(newRow); 　} 　return newRow; } [DataObjectMethod(DataObjectMethodType.Update)] public void UpdateRow(SampleRow updateRow) { 　foreach (SampleRow row in _data) { 　　if (row.Id == updateRow.Id) { 　　　row.Name =updateRow.Name; 　　　row.Description = updateRow.Description; 　　　break; 　　} 　} } }

　　8. 保存并關(guān)閉該文件。

 

四、 創(chuàng)建宿主控件的Web頁面

　　在這一部分中，你將創(chuàng)建一個(gè)新的ASP.NET Web頁面來宿主數(shù)據(jù)綁定控件和模板。

　　創(chuàng)建一個(gè)Web頁面

　　1. 添加一新的ASP.NET頁面到你的工程并且命名它為DataBinding.aspx。

　　注意 確保你清除了"Place code in separate file"復(fù)選框。在此，你必須創(chuàng)建單個(gè)ASP.NET Web頁面。

　　2. 切換到"Source view"。

　　3. 在@Page指令中，把Title屬性設(shè)置為"Atlas Data-Binding Walkthrough"，如下面的示例所示：

＜%@ Page Language="C#" Title="Atlas Data-binding Walkthrough" %＞

　　4. 把下列標(biāo)注內(nèi)容復(fù)制并粘貼到在@Page指令下的文件中：

＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞ ＜html xmlns="http://www.w3.org/1999/xhtml"＞ ＜head＞ ＜/head＞ ＜body＞ �。糵orm id="main" runat="server"＞ 　�。糰tlas:ScriptManager runat="server" ID="scriptManager" /＞ 　　＜h3＞Data-Bound ListView＜/h3＞ 　�。糳iv id="dataContents"＞＜/div＞ 　�。糳iv style="visibility:hidden;display:none"＞ 　　�。糳iv id="masterTemplate"＞ 　　　　＜div id="masterItemTemplate"＞ 　　　　�。糱＞＜span id="masterName"＞＜/span＞＜/b＞ 　　　　�。糱r /＞ 　　　　　＜asp:linkbutton id="LinkButton1" runat="server"＞ 　　　　　�。約pan id="masterDescription"＞＜/span＞ 　　　　　＜/asp:linkbutton＞＜br /＞ 　　　�。�/div＞＜br/＞ 　　　＜/div＞ 　　�。糳iv id="masterNoDataTemplate"＞No data＜/div＞ 　�。�/div＞ �。�/form＞ ＜script type="text/xml-script"＞ �。紁age xmlns:script="http://schemas.microsoft.com/xml-script/2005"＞ �。糲omponents＞ 　＜dataSource id="dataSource" serviceURL="DataService.asmx" autoLoad="true" /＞ �。糽istView id="dataContents" itemTemplateParentElementId="masterTemplate" propertyChanged="onChange"＞ �。糱indings＞ 　�。糱inding dataContext="dataSource" dataPath="data" property="data"/＞ �。�/bindings＞ �。糽ayoutTemplate＞ 　�。紅emplate layoutElement="masterTemplate"/＞ �。�/layoutTemplate＞ �。糹temTemplate＞ 　�。紅emplate layoutElement="masterItemTemplate"＞ 　�。糽abel id="masterName"＞ 　　　＜bindings＞ 　　　�。糱inding dataPath="Name" property="text"/＞ 　　　＜/bindings＞ 　�。�/label＞ 　　＜hyperLink id="masterDescription"＞ 　　�。糱indings＞ 　　　�。糱inding dataPath="Description" property="text"/＞ 　　�。�/bindings＞ 　　＜/hyperLink＞ �。�/template＞ 　＜/itemTemplate＞ �。糴mptyTemplate＞ 　�。紅emplate layoutElement="masterNoDataTemplate"/＞ �。�/emptyTemplate＞ ＜/listView＞ ＜/components＞ ＜/page＞ ＜/script＞ ＜/body＞ ＜/html＞

　　

注意，在＜script＞元素內(nèi)，存在一些聲明性元素-它們指定Atlas客戶端控件和數(shù)據(jù)綁定布局。該數(shù)據(jù)是由服務(wù)器端服務(wù)所指定的，而UI是由綁定到它們的客戶端控件所提供的。注意，你可以使用這種聲明性語法來指定當(dāng)應(yīng)用程序事件發(fā)生時(shí)會(huì)發(fā)生什么，正如你用JavaScript代碼所能夠?qū)崿F(xiàn)的功能一樣。請(qǐng)檢查上面標(biāo)注中的＜dataSource＞元素。它有一個(gè)屬性serviceURL來指向檢索數(shù)據(jù)的Web服務(wù)，還有一個(gè)autoLoad來指示當(dāng)對(duì)象被創(chuàng)建時(shí)應(yīng)該立即檢索該數(shù)據(jù)。結(jié)果是，當(dāng)應(yīng)用程序加載時(shí)，數(shù)據(jù)就會(huì)立即從數(shù)據(jù)源中進(jìn)行檢索并通過頁面中的模板進(jìn)行顯示。

　　5. 保存并關(guān)閉該頁面。

　　測試頁面

　　1. 運(yùn)行DataBinding.aspx頁面。

　　2. 確保在頁面裝載以后，有一組公司及其各自的URL顯示出來。

　　五、 總結(jié)

　　在本文中，你學(xué)習(xí)了怎樣"Atlas化"客戶端控件以存取服務(wù)器端數(shù)據(jù)服務(wù)。這里所使用的數(shù)據(jù)綁定語法非常類似于用于把ASP.NET服務(wù)器控件綁定到數(shù)據(jù)的指令語法。具體地說，你學(xué)習(xí)了如何把一個(gè)客戶端listView控件綁定到一個(gè)DataSource控件，以及如何使用一個(gè)聲明性layoutTemplate元素和其它Atlas控件和標(biāo)準(zhǔn)HTML標(biāo)注來指定數(shù)據(jù)在頁面上的生成方式。