English Version:
http://dflying.dflying.net/1/archive/127_paging_your_list_using_aspnet_atlas_pagenavigator_control.html
在這個(gè)系列中，我將介紹一些Atlas Sys.UI.Data中較高級的控件，包括：
- Sys.UI.Data.ListView：使用ASP.NET Atlas ListView控件顯示列表數據
- Sys.UI.Data.ItemView：使用ASP.NET Atlas ItemView控件顯示集合中的單個(gè)數據
- Sys.UI.Data.DataNavigator：使用 ASP.NET Atlas PageNavigator控件實(shí)現客戶(hù)端分頁(yè)導航
- Sys.UI.Data.SortBehavior：使用ASP.NET Atlas SortBehavior實(shí)現客戶(hù)端排序
- Sys.UI.Data.XSLTView：使用ASP.NET Atlas XSLTView控件用XSLT修飾并顯示XML數據
這篇是其中的第三篇：
使用 ASP.NET Atlas PageNavigator控件實(shí)現客戶(hù)端分頁(yè)導航
把所有的記錄統統放在一個(gè)頁(yè)面上絕對不是一個(gè)好主意，特別是當您有成百上千條記錄時(shí)。您的用戶(hù)需要不停的拖動(dòng)滾動(dòng)條，甚至使用Control+F來(lái)找到所期待的內容，這將帶來(lái)相當差的用戶(hù)體驗。這時(shí)，將數據以分頁(yè)的方式顯示給用戶(hù)將友好的多。 一些ASP.NET服務(wù)器端控件擁有內建的分頁(yè)及頁(yè)面導航功能，例如DataGrid和GridView。同樣的，Atlas客戶(hù)端控件Sys.UI.Data.DataNavigator也提供了類(lèi)似的功能，這將大大提高我們的開(kāi)發(fā)效率。
DataNavigator控件將與DataView（請參考：Atlas命名空間Sys.Data下控件介紹——DataView和DataFilter ）控件一起工作。我們知道DataView控件沒(méi)有提供頁(yè)面導航相關(guān)方法，所以我們只能直接設置它的pageIndex屬性來(lái)實(shí)現導航。雖然沒(méi)有什么難度，但很多情況下這并不是一個(gè)好辦法，因為像我這樣好多粗心的開(kāi)發(fā)者往往會(huì )忘記檢查pageIndex的邊界值，造成不必要的麻煩。這也是Atlas要提供DataNavigator控件的原因之一，DataNavigator控件將作為一個(gè)DataView控件的代理（proxy），提供易用的頁(yè)面導航接口。
DataNavigator對象只有一個(gè)屬性：
- dataView：對某個(gè)DataView對象的引用，這個(gè)DataNavigator將把頁(yè)面導航的操作應用到其上。您應該總是指定這個(gè)屬性。
另外，要使用DataNavigator控件，您還需要提供一些擁有一些指定commandName屬性的Atlas Button，以觸發(fā)相應的頁(yè)面導航操作。這些Button的parent屬性應該設定為此DataNavigator控件，以保證DataNavigator能夠捕獲到這些Button發(fā)出的命令。
您可以指定您的Button的commandName屬性為如下五個(gè)string，每個(gè)都有不同的含義：
- page：將當前頁(yè)面索引轉為命令參數（command argument）中指定的值。通過(guò)這個(gè)命令我們可以快速的改變頁(yè)面的索引。
- nextpage：切換到下一頁(yè)（如果存在下一頁(yè)）。
- previouspage：切換到上一頁(yè)（如果存在上一頁(yè)）。
- firstpage：切換到第一頁(yè)。
- lastpage：切換到最后一頁(yè)。
OK，MSDN般枯燥的介紹到此為止吧，讓我們通過(guò)一個(gè)實(shí)例來(lái)熟悉DataNavigator的使用方法。
首先我們需要暴露一個(gè)Web Service，以便Atlas頁(yè)面使用。該Web Service將返回100條記錄。下面就是這個(gè)Web Service的代碼，非常易于理解，這里不贅。
Web Service
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;
//
// For simplicity this example demonstraes storing and manipulating
// the data objects in memory. A database can also be used.
//
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class MyDataService : DataService
{
static List<Entry> _data;
static object _dataLock = new object();
private static List<Entry> Data
{
get
{
if (_data == null)
{
lock (_dataLock)
{
if (_data == null)
{
_data = new List<Entry>();
for (int i = 0; i < 100; i++)
{
_data.Add(new Entry(i, "Dflying " + i.ToString(), string.Format("Dflying{0}@dflying.net", i.ToString())));
}
}
}
}
return _data;
}
}
[DataObjectMethod(DataObjectMethodType.Select)]
public Entry[] SelectRows()
{
return MyDataService.Data.ToArray();
}
}
public class Entry
{
private string _name;
private string _email;
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 Email
{
get { return _email; }
set { _email = value; }
}
public Entry()
{
_id = -1;
}
public Entry(int id, string name, string description)
{
_id = id;
_name = name;
_email = description;
}
}
然后，在A(yíng)SPX頁(yè)面中我們需要考慮并定義如下四部分的內容：
- 一個(gè)ScriptManager控件，用來(lái)包含頁(yè)面必須的Atlas Framework相關(guān)腳本文件。通常情況下，這也是每個(gè)Atlas頁(yè)面必須包含的。
- 一個(gè)占位（place holder）的div（id為dataContents，見(jiàn)代碼）。Atlas將會(huì )把渲染后的分頁(yè)的ListView放置于此。
- 一個(gè)作為容器的div（DataNavigator控件），以及其中包含的一組按鈕（命令按鈕），用來(lái)實(shí)現頁(yè)面導航功能。
- 一個(gè)隱藏的div，用來(lái)放置ListView的模版。
下面是以上四部分內容的代碼，關(guān)于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>
最后該書(shū)寫(xiě)Atlas的XML腳本定義了，有如下五個(gè)部分：
第一部分：Atlas客戶(hù)端控件DataSource，用來(lái)從我們上面定義的Web Service中取得數據。
<dataSource id="dataSource" autoLoad="true" serviceURL="MyDataService.asmx" />
第二部分：一個(gè)DataView控件（請參考：Atlas命名空間Sys.Data下控件介紹——DataView和DataFilter ），用來(lái)將第一部分中取得的那100條數據分頁(yè)。
<dataView id="view" pageSize="12">
<bindings>
<binding dataContext="dataSource" dataPath="data" property="data" />
</bindings>
</dataView>
第三部分：一個(gè)ListView控件（請參考： 使用ASP.NET Atlas ListView控件顯示列表數據 ） ， 用于顯示分頁(yè)好的數據。
<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控件以及命令按鈕。注意到這里我們有四個(gè)按鈕，每一個(gè)都有不同的commandName屬性，也分別對應著(zhù)DataNavigator對DataView的一種操作。同時(shí)這些按鈕的parent屬性都設置成了這個(gè)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" />
第五部分：兩個(gè)Label，分別顯示頁(yè)面總數以及當前頁(yè)的序號。
<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，在瀏覽器中測試一下：
這個(gè)DEMO的源文件可以在此下載：http://www.cnblogs.com/Files/dflying/DataNavigatorDemo.zip
