使用ASP.NET Atlas SortBehavior实现客户端排序

使用ASP.NET Atlas SortBehavior实现客户端排序

English Version: http://dflying.dflying.net/1/archive/128_sorting_your_list_using_aspnet_atlas_sortbehavior.html

在这个系列中，我将介绍一些Atlas Sys.UI.Data中较高级的控件，包括：

1. Sys.UI.Data.ListView：使用ASP.NET Atlas ListView控件显示列表数据
2. Sys.UI.Data.ItemView：使用ASP.NET Atlas ItemView控件显示集合中的单个数据
3. Sys.UI.Data.DataNavigator：使用 ASP.NET Atlas PageNavigator控件实现客户端分页导航 
4. Sys.UI.Data.SortBehavior：使用ASP.NET Atlas SortBehavior实现客户端排序
5. Sys.UI.Data.XSLTView：使用ASP.NET Atlas XSLTView控件用XSLT修饰并显示XML数据

这篇是其中的第四篇： 使用ASP.NET Atlas SortBehavior实现客户端排序

为您的列表添加排序功能将是非常酷的。一些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对象有如下属性：

1. dataView：对某个DataView对象的引用，这个SortBehavior将把页面的排序操作应用到其上。您应该总是指定这个属性。
2. sortColumn：DataView中某一列的列名，SortBehavior将根据这个列中的内容来进行排序。您应该总是指定这个属性。
3. sortAscendingCssClass：触发排序的控件的CSS Class（升序时）。
4. 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页面中，我们需要考虑并定义如下三部分的内容：

1. 一个ScriptManager控件，用来包含页面必须的Atlas Framework相关脚本文件。通常情况下，这也是每个Atlas页面必须包含的。
2. 一个占位（place holder）的div（id为dataContents，见代码）。Atlas将会把渲染后的ListView放置于此。
3. 一个隐藏的div，用来放置ListView的模版。

下面是以上三部分内容的代码，关于ListView控件的模版，请参考我的这篇文章：使用ASP.NET Atlas 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控件（请参考：Atlas命名空间Sys.Data下控件介绍——DataView和DataFilter ），用来将第一部分中取得的数据排序。

< dataView  id ="view" >
     < bindings >
         < binding  dataContext ="dataSource"  dataPath ="data"  property ="data" />
     </ bindings >
</ dataView >

第三部分：一个ListView控件（请参考： 使用ASP.NET Atlas 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的源文件可以在此下载：http://www.cnblogs.com/Files/dflying/SortBehaviorDemo.zip