利用数据绑定和模板创建Atlas应用程序

一、 简介

　　本文将向你展示如何使用微软新的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标注来指定数据在页面上的生成方式。

本文出自 “青峰” 博客，转载请与作者联系！