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

　　四、 创建宿主控件的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标注来指定数据在页面上的生成方式。