使用ASP.NET Atlas ListView控件显示列表数据(2)

     然后，添加一些ASP.NET页面中必须的控件/标记： <atlas:ScriptManager ID="ScriptManager1" runat="server" />
  <!-- Element for myList (container) -->
  <div id="myList"></div>
  <!-- Layout Elements -->
  <div style="display: none;">
  </div>
  在上面的标记中，我们加入了三个标记：一个必须的ScriptManager控件。一个id为myList的div，用来让Atlas把渲染后的ListView放置于这里。一个隐藏的div，用于定义我们的模版。这个隐藏div中的元素在页面上是不可见的，只是用来提供给Atlas必要的模版。
  
  我们在这个隐藏的div中加入如下ListView的模版：
  
  <!-- Layout Template -->
  <table id="myList_layoutTemplate" border="1" cellpadding="3">
   <thead>
   <tr>
   <td><span>No.</span></td>
   <td><span>Name</span></td>
   <td><span>Email</span></td>
   </tr>
   </thead>
   <!-- Repeat Template -->
   <tbody id="myList_itemTemplateParent">
   <!-- Repeat Item Template -->
   <tr id="myList_itemTemplate">
   <td><span id="lblIndex" /></td>
   <td><span id="lblName" /></td>
   <td><span id="lblEmail" /></td>
   </tr>
   <!-- Separator Item Template -->
   <tr id="myList_separatorTemplate">
   <td colspan="3">Separator</td>
   </tr>
   </tbody>
  </table>
  <!-- Empty Template -->
  <div id="myList_emptyTemplate">
   No Data
  </div>
  
  上面的代码中您可以看到我提到的所有四种模版。另外还要指定每一个模版一个id，将用于下面的Atlas脚本声明中。在这个例子中我将以HTML Table的形式渲染这个ListView，很抱歉分隔元素将会很丑陋（一个空行）。
  
  最后在页面中添加Atlas脚本声明：
  
  <dataSource id="listDataSource" autoLoad="true" serviceURL="MyService.asmx" />
  
  <listView id="myList" itemTemplateParentElementId="myList_itemTemplateParent">
   <bindings>
   <binding dataContext="listDataSource" dataPath="data" property="data" />
   </bindings>
   <layoutTemplate>
   <template layoutElement="myList_layoutTemplate" />
   </layoutTemplate>
   <itemTemplate>
   <template layoutElement="myList_itemTemplate">
   <label id="lblIndex">
   <bindings>
   <binding dataPath="$index" transform="Add" property="text"/>
   </bindings>
   </label>
   <label id="lblName">
   <bindings>
   <binding dataPath="Name" property="text" />
   </bindings>
   </label>
   <label id="lblEmail">
   <bindings>
   <binding dataPath="Email" property="text" />
   </bindings>
   </label>
   </template>
   </itemTemplate>
   <separatorTemplate>
   <template layoutElement="myList_separatorTemplate" />
   </separatorTemplate>
   <emptyTemplate>
   <template layoutElement="myList_emptyTemplate"/>
   </emptyTemplate>
  </listView>
  
  这里我添加了一个Atlas客户端DataSource对象以从Web Service中取得数据。这里我们暂且不多谈DataSource（可能在后续文章中有所介绍）。让我们来看一下ListView相关的定义：在ListView的定义中，我们指定了itemTemplateParentElementId属性。然后在ListView的内部定义了一个binding段，用来把DataSource中取得的数据与这个ListView绑定起来。我们还定义了四个模版段，每个模版段都用layoutElement与上面定义过的四种模版关联。注意到在layoutTemplate模版中的第一个label控件，我们在其绑定中指定了一个Add transformer以将从0开始的顺序变为从1开始（关于Atlas Transformer，请参考我的这篇文章：http://dflying.cnblogs.com/archive/2006/04/05/367908.html）。
  
  大功告成，运行一下吧。
    做人要厚道，请注明转自chinazhan中国站长(www.ChinaZhan.com)。