使用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的源文件可以在此下载：https://files.cnblogs.com/dflying/SortBehaviorDemo.zip