在这个系列中，我将介绍一些Atlas Sys.UI.Data中较高级的控件，包括：
- Sys.UI.Data.ListView：
- Sys.UI.Data.ItemView：
- Sys.UI.Data.DataNavigator：
- Sys.UI.Data.SortBehavior：
- Sys.UI.Data.XSLTView：
为您的列表添加排序功能将是非常酷的。一些ASP.NET服务器控件，例如DataGrid，GridView等已经拥有了内建的排序功能。Atlas同样提供了Sys.UI.Data.SortBehavior Behavior（有关Atlas Behavior，请参考：），让您在客户端即可实现排序功能。
SortBehavior将与DataView控件（请参考：）配合工作，它将通过设定DataView控件的sortDirection属性来实现排序功能。SortBehavior对象有如下属性：
- dataView：对某个DataView对象的引用，这个SortBehavior将把页面的排序操作应用到其上。您应该总是指定这个属性。
- sortColumn：DataView中某一列的列名，SortBehavior将根据这个列中的内容来进行排序。您应该总是指定这个属性。
- sortAscendingCssClass：触发排序的控件的CSS Class（升序时）。
- sortDescendingCssClass：触发排序的控件的CSS Class（降序时）。
介绍到此为止，我们来看如下的示例程序。
首先我们需要暴露一个Web Service以便Atlas页面使用。该Web Service将返回5个名人（除了我）的简介。下面为代码：
Data 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 SampleDataService : DataService{ static List<Entry> _data; static int _nextId; static object _dataLock = new object(); private static List<Entry> Data { get { if (_data == null) { lock (_dataLock) { if (_data == null) { _data = new List<Entry>(); _data.Add(new Entry(0, "Dflying Chen", "A small piece of cake")); _data.Add(new Entry(1, "Bill Gates", "Chairman & Chief Software Architect")); _data.Add(new Entry(2, "Scott Guthrie", "General Manager")); _data.Add(new Entry(3, "Ray Ozzie", "CTO")); _data.Add(new Entry(4, "Steve Ballmer", "CEO")); _nextId = 3; } } } return _data; } } [DataObjectMethod(DataObjectMethodType.Delete)] public void DeleteRow(int id) { foreach (Entry row in _data) { if (row.Id == id) { lock (_dataLock) { _data.Remove(row); } break; } } } [DataObjectMethod(DataObjectMethodType.Select)] public Entry[] SelectRows() { return SampleDataService.Data.ToArray(); } [DataObjectMethod(DataObjectMethodType.Insert)] public Entry InsertRow(string name, string description) { Entry newRow; lock (_dataLock) { newRow = new Entry(_nextId++, name, description); _data.Add(newRow); } return newRow; } [DataObjectMethod(DataObjectMethodType.Update)] public void UpdateRow(Entry updateRow) { foreach (Entry row in _data) { if (row.Id == updateRow.Id) { row.Name = updateRow.Name; row.Title = updateRow.Title; break; } } }}public class Entry{ private string _name; private string _title; 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 Title { get { return _title; } set { _title = value; } } public Entry() { _id = -1; } public Entry(int id, string name, string description) { _id = id; _name = name; _title = description; }} 然后，在ASPX页面中，我们需要考虑并定义如下三部分的内容：
- 一个ScriptManager控件，用来包含页面必须的Atlas Framework相关脚本文件。通常情况下，这也是每个Atlas页面必须包含的。
- 一个占位（place holder）的div（id为dataContents，见代码）。Atlas将会把渲染后的ListView放置于此。
- 一个隐藏的div，用来放置ListView的模版。
下面是以上三部分内容的代码，关于ListView控件的模版，请参考我的这篇文章：
<!-- ScriptManager --> < atlas:ScriptManager runat ="server" ID ="scriptManager" /> <!-- Element for ListView (container) --> < div id ="dataContents" > </ div > <!-- Templates --> < div style ="visibility: hidden; display: none" > < div id ="masterTemplate" > < table border ="1" cellpadding ="3" style ="width:30em;" > < thead > < tr > < td >< a href ="#" id ="sortId" > ID </ a ></ td > < td >< a href ="#" id ="sortName" > Name </ a ></ td > < td >< a href ="#" id ="sortTitle" > Title </ a ></ td > </ tr > </ thead > < tbody id ="masterItemTemplateParent" > < tr id ="masterItemTemplate" > < td >< span id ="masterId" ></ span ></ td > < td >< span id ="masterName" ></ span ></ td > < td >< span id ="masterTitle" ></ span ></ td > </ tr > </ tbody > </ table > </ div > </ div >
最后该书写Atlas的XML脚本定义了，有如下四个部分：
第一部分：Atlas客户端控件DataSource，用来从我们上面定义的Web Service中取得数据。
< dataSource id ="dataSource" autoLoad ="true" serviceURL ="SampleDataService.asmx" />
第二部分：一个DataView控件（请参考： ），用来将第一部分中取得的数据排序。
< dataView id ="view" > < bindings > < binding dataContext ="dataSource" dataPath ="data" property ="data" /> </ bindings > </ dataView >
第三部分：一个ListView控件（请参考： ） ， 用于显示排序后的数据。
< listView id ="dataContents" itemTemplateParentElementId ="masterItemTemplateParent" > < bindings > < binding dataContext ="view" dataPath ="filteredData" property ="data" /> </ bindings > < layoutTemplate > < template layoutElement ="masterTemplate" /> </ layoutTemplate > < itemTemplate > < template layoutElement ="masterItemTemplate" > < label id ="masterId" > < bindings > < binding dataPath ="Id" property ="text" /> </ bindings > </ label > < label id ="masterName" > < bindings > < binding dataPath ="Name" property ="text" /> </ bindings > </ label > < label id ="masterTitle" > < bindings > < binding dataPath ="Title" property ="text" /> </ bindings > </ label > </ template > </ itemTemplate > </ listView >
第四部分：三个包含SortBehavior behavior的Atlas控件，用来触发排序的操作。
< control id ="sortId" > < behaviors > < sortBehavior dataView ="view" sortColumn ="Id" /> </ behaviors > </ control > < control id ="sortName" > < behaviors > < sortBehavior dataView ="view" sortColumn ="Name" /> </ behaviors > </ control > < control id ="sortTitle" > < behaviors > < sortBehavior dataView ="view" sortColumn ="Title" /> </ behaviors > </ control >
大功告成，打开浏览器测试一下吧：
初始的顺序：
点击Name，按照Name排序——升序：
再次点击Name， 按照Name排序——降序：
这个DEMO的源文件可以在此下载：