一、 簡介

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

　　本文將向你展示：

　　· 把一個客戶端listView控件綁定到一個dataSource控件。

　　· 使用模板顯示數據。

　　前提

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

　　· Microsoft Visual Studio 2005和.NET Framework 2.0。有關下載信息，請訪問.NET Framework Developer Center Web站點。

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

　　二、 創建Atlas應用程序

　　首先，你要在Visual Studio中創建一個Atlas Web應用程序。當你使用Visual Studio工程模板來創建一個新的空白Atlas Web應用程序時，Visual Studio會創建一個正常的具有下列一些其它項的Web站點文件夾結構：

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

　　· 一個文件Web.config，用于設置Atlas應用程序。

　　在Visual Studio中創建一個新的Atlas Web應用程序

　　1. 在"File"菜單下，點擊"New"，然后點擊"Web Site"。

　　2. 在"New Web Site"對話框中，選擇"ASP.NET Atlas Web Site"模板項。

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

　　4. 指定程序的一個路徑和開發語言，然后點擊"OK"。

　　

三、 提供應用程序測試數據

　　在這一部分中，你要創建數據綁定程序所要使用的兩項內容：

　　· 一個數據源對象-它通過提供一些測試數據和類SQL語句來模擬一個數據庫。

　　· 一個Web服務-它連接到數據源對象并且把該數據提供給一個使用Atlas組件創建的UI。

　　首先，你要創建數據源對象。

　　創建數據源對象

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

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

　　3. 為該類選擇開發語言，然后點擊"Add"按鈕。

　　4. 當系統提問你，是否你想把這個類文件放到App_Code文件夾下時，點擊"Yes"。

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

　　6. 把下列代碼粘貼到這個類中以創建一個數據源對象。

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. 保存并關閉文件。

　　下一步是創建一個Web服務，由該服務為ASP.NET Web頁面提供來自于數據源對象的數據。

　　創建Web服務為頁面提供數據

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

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

　　3. 指定文件名為DataService.asmx并且不點選"Place code in separate file"復選框。

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

　　5. 點擊"Add"。

　　6. 在編輯器中，從現有類中刪除任何現有代碼。

　　7. 把下列代碼粘貼到這個類中以創建一個數據源對象。

＜%@ 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. 保存并關閉該文件。

 

四、 創建宿主控件的Web頁面

　　在這一部分中，你將創建一個新的ASP.NET Web頁面來宿主數據綁定控件和模板。

　　創建一個Web頁面

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

　　注意 確保你清除了"Place code in separate file"復選框。在此，你必須創建單個ASP.NET Web頁面。

　　2. 切換到"Source view"。

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

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

　　4. 把下列標注內容復制并粘貼到在@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＞ 　＜form id="main" runat="server"＞ 　　＜atlas:ScriptManager runat="server" ID="scriptManager" /＞ 　　＜h3＞Data-Bound ListView＜/h3＞ 　　＜div id="dataContents"＞＜/div＞ 　　＜div style="visibility:hidden;display:none"＞ 　　　＜div id="masterTemplate"＞ 　　　　＜div id="masterItemTemplate"＞ 　　　　　＜b＞＜span id="masterName"＞＜/span＞＜/b＞ 　　　　　＜br /＞ 　　　　　＜asp:linkbutton id="LinkButton1" runat="server"＞ 　　　　　　＜span id="masterDescription"＞＜/span＞ 　　　　　＜/asp:linkbutton＞＜br /＞ 　　　　＜/div＞＜br/＞ 　　　＜/div＞ 　　　＜div id="masterNoDataTemplate"＞No data＜/div＞ 　　＜/div＞ 　＜/form＞ ＜script type="text/xml-script"＞ 　＜page xmlns:script="http://schemas.microsoft.com/xml-script/2005"＞ 　＜components＞ 　＜dataSource id="dataSource" serviceURL="DataService.asmx" autoLoad="true" /＞ 　＜listView id="dataContents" itemTemplateParentElementId="masterTemplate" propertyChanged="onChange"＞ 　＜bindings＞ 　　＜binding dataContext="dataSource" dataPath="data" property="data"/＞ 　＜/bindings＞ 　＜layoutTemplate＞ 　　＜template layoutElement="masterTemplate"/＞ 　＜/layoutTemplate＞ 　＜itemTemplate＞ 　　＜template layoutElement="masterItemTemplate"＞ 　　＜label id="masterName"＞ 　　　＜bindings＞ 　　　　＜binding dataPath="Name" property="text"/＞ 　　　＜/bindings＞ 　　＜/label＞ 　　＜hyperLink id="masterDescription"＞ 　　　＜bindings＞ 　　　　＜binding dataPath="Description" property="text"/＞ 　　　＜/bindings＞ 　　＜/hyperLink＞ 　＜/template＞ 　＜/itemTemplate＞ 　＜emptyTemplate＞ 　　＜template layoutElement="masterNoDataTemplate"/＞ 　＜/emptyTemplate＞ ＜/listView＞ ＜/components＞ ＜/page＞ ＜/script＞ ＜/body＞ ＜/html＞

　　

注意，在＜script＞元素內，存在一些聲明性元素-它們指定Atlas客戶端控件和數據綁定布局。該數據是由服務器端服務所指定的，而UI是由綁定到它們的客戶端控件所提供的。注意，你可以使用這種聲明性語法來指定當應用程序事件發生時會發生什么，正如你用JavaScript代碼所能夠實現的功能一樣。請檢查上面標注中的＜dataSource＞元素。它有一個屬性serviceURL來指向檢索數據的Web服務，還有一個autoLoad來指示當對象被創建時應該立即檢索該數據。結果是，當應用程序加載時，數據就會立即從數據源中進行檢索并通過頁面中的模板進行顯示。

　　5. 保存并關閉該頁面。

　　測試頁面

　　1. 運行DataBinding.aspx頁面。

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

　　五、 總結

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