使用 ASP.NET Atlas PageNavigator控件实现客户端分页导航(2)

     然后，在ASPX页面中我们需要考虑并定义如下四部分的内容：
  
  一个ScriptManager控件，用来包含页面必须的Atlas Framework相关脚本文件。通常情况下，这也是每个Atlas页面必须包含的。
  一个占位（place holder）的div（id为dataContents，见代码）。Atlas将会把渲染后的分页的ListView放置于此。
  一个作为容器的div（DataNavigator控件），以及其中包含的一组按钮（命令按钮），用来实现页面导航功能。
  一个隐藏的div，用来放置ListView的模版。
  下面是以上四部分内容的代码，关于ListView控件的模版，请参考我的这篇文章：使用ASP.NET Atlas ListView控件显示列表数据
  
  
  <!-- ScriptManager -->
  <atlas:ScriptManager runat="server" ID="scriptManager" />
  
  <!-- Element for paged ListView (container) -->
  <div id="dataContents">
  </div>
  
  <!-- PageNavigator -->
  <div id="pageNavigator">
   <input type="button" id="btnFirstPage" value="<<" />
   <input type="button" id="btnPrevPage" value="<" />
   <span id="lblPageNumber"></span> / <span id="lblPageCount"></span>
   <input type="button" id="btnNextPage" value=">" />
   <input type="button" id="btnLastPage" value=">>" />
  </div>
  
  <!-- Templates -->
  <div style="visibility: hidden; display: none">
   <table id="myList_layoutTemplate" border="1" cellpadding="3" style="width:20em;">
   <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>
   </tbody>
   </table>
   <!-- Empty Template -->
   <div id="myList_emptyTemplate">
   No Data
   </div>
  </div>
  最后该书写Atlas的XML脚本定义了，有如下五个部分：
  
  第一部分：Atlas客户端控件DataSource，用来从我们上面定义的Web Service中取得数据。
  
  <dataSource id="dataSource" autoLoad="true" serviceURL="MyDataService.asmx" />
  第二部分：一个DataView控件（请参考：Atlas命名空间Sys.Data下控件介绍——DataView和DataFilter ），用来将第一部分中取得的那100条数据分页。
  
  <dataView id="view" pageSize="12">
   <bindings>
   <binding dataContext="dataSource" dataPath="data" property="data" />
   </bindings>
  </dataView>
  第三部分：一个ListView控件（请参考： 使用ASP.NET Atlas ListView控件显示列表数据 ），用于显示分页好的数据。
  
  <listView id="dataContents" itemTemplateParentElementId="myList_itemTemplateParent" >
   <bindings>
   <binding dataContext="view" dataPath="filteredData" 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>
   <emptyTemplate>
   <template layoutElement="myList_emptyTemplate"/>
   </emptyTemplate>
  </listView>
  第四部分： DataNavigator控件以及命令按钮。注意到这里我们有四个按钮，每一个都有不同的commandName属性，也分别对应着DataNavigator对DataView的一种操作。同时这些按钮的parent属性都设置成了这个DataNavigator对象。
  
  <dataNavigator id="pageNavigator" dataView="view"/>
  <button id="btnFirstPage" parent="pageNavigator" command="FirstPage" />
  <button id="btnPrevPage" parent="pageNavigator" command="PreviousPage">
   <bindings>
   <binding property="enabled" dataPath="hasPreviousPage"/>
   </bindings>
  </button>
  <button id="btnNextPage" parent="pageNavigator" command="NextPage">
   <bindings>
   <binding property="enabled" dataPath="hasNextPage"/>
   </bindings>
  </button>
  <button id="btnLastPage" parent="pageNavigator" command="LastPage" />
  第五部分：两个Label，分别显示页面总数以及当前页的序号。
  
  <label id="lblPageNumber">
   <bindings>
   <binding dataContext="view" property="text" dataPath="pageIndex" transform="Add"/>
   </bindings>
  </label>
  <label id="lblPageCount">
   <bindings>
   <binding dataContext="view" property="text" dataPath="pageCount"/>
   </bindings>
  </label>
  OK，在浏览器中测试一下：
  
  
    做人要厚道，请注明转自chinazhan中国站长(www.ChinaZhan.com)。