在这个系列中,我将介绍一些Atlas Sys.UI.Data中较高级的控件,包括:
- Sys.UI.Data.ListView:使用ASP.NET Atlas ListView控件显示列表数据
- Sys.UI.Data.ItemView:使用ASP.NET Atlas ItemView控件显示集合中的单个数据
- Sys.UI.Data.DataNavigator:使用 ASP.NET Atlas PageNavigator控件实现客户端分页导航
- Sys.UI.Data.SortBehavior:使用ASP.NET Atlas SortBehavior实现客户端排序
- Sys.UI.Data.XSLTView:使用ASP.NET Atlas XSLTView控件用XSLT修饰并显示XML数据
为您的列表添加排序功能将是非常酷的。一些ASP.NET服务器控件,例如DataGrid,GridView等已经拥有了内建的排序功能。Atlas同样提供了Sys.UI.Data.SortBehavior Behavior(有关Atlas Behavior,请参考:在ASP.NET Atlas中创建自定义的Behavior),让您在客户端即可实现排序功能。
SortBehavior将与DataView控件(请参考:Atlas命名空间Sys.Data下控件介绍——DataView和DataFilter)配合工作,它将通过设定DataView控件的sortDirection属性来实现排序功能。SortBehavior对象有如下属性:
- dataView:对某个DataView对象的引用,这个SortBehavior将把页面的排序操作应用到其上。您应该总是指定这个属性。
- sortColumn:DataView中某一列的列名,SortBehavior将根据这个列中的内容来进行排序。您应该总是指定这个属性。
- sortAscendingCssClass:触发排序的控件的CSS Class(升序时)。
- sortDescendingCssClass:触发排序的控件的CSS Class(降序时)。
介绍到此为止,我们来看如下的示例程序。
首先我们需要暴露一个Web Service以便Atlas页面使用。该Web Service将返回5个名人(除了我)的简介。下面为代码:
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控件的模版,请参考我的这篇文章:使用ASP.NET Atlas ListView控件显示列表数据
< 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中取得数据。
第二部分:一个DataView控件(请参考:Atlas命名空间Sys.Data下控件介绍——DataView和DataFilter ),用来将第一部分中取得的数据排序。
< bindings >
< binding dataContext ="dataSource" dataPath ="data" property ="data" />
</ bindings >
</ dataView >
第三部分:一个ListView控件(请参考: 使用ASP.NET Atlas ListView控件显示列表数据 ) , 用于显示排序后的数据。
< 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控件,用来触发排序的操作。
< 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的源文件可以在此下载:http://files.cnblogs.com/dflying/SortBehaviorDemo.zip