使用ASP.NETAJAXControlToolkit中的ReorderList控件

ASP.NET AJAX Control Toolkit中的ReorderList控件将在页面中呈现出一个由数据绑定自动生成的条目列表。用户可以通过鼠标拖动某一项来直接改变该列表中条目彼 此之间的相对位置关系，且在拖动的过程中，ReorderList控件提供了丰富的、可定制的视觉效果。当用户在某个位置放开鼠标之 后，ReorderList控件也将同样会自动通知与其绑定的数据源控件，以Ajax的异步或整页回送的同步方式更新服务器端数据。

列 表是一切GUI应用程序中都非常常见的元素，而根据用户喜好改变列表中条目的排列顺序也就自然地成为了一个常见的需求。实现这个需求最直观的方法非直接用 鼠标拖动莫属，-18即显示了在Windows的“开始”菜单中通过鼠标拖动改变其中条目排列顺序时的界面样式。

-18 在Windows的“开始”菜单中通过鼠标拖动改变其中条目排列顺序

而 对于传统的Web应用程序来讲，这种对用户最为直观的方式似乎并不是那么易于实现。所以，很多时候我们都会采用在每个条目中添加一对“上移”和“下移”按 钮、或添加一个用来输入次序值的文本框来实现，如-19所示的Mambo CMS（http://www.mamboserver.com/）的菜单管理界面。这种设计的缺点有很多，包括“上移”和“下移”按钮每次只能将条目移 动一个位置，逐一填写次序值文本框非常麻烦，浪费宝贵页面空间等，而唯一的优势就是实现起来相对简单。

-19 管理列表中的“上移”和“下移”按钮和用来输入次序值的文本框

在 当今流行的Web 2.0应用程序中，这种完全忽视易用性的设计正逐渐地被抛弃，取而代之的是越来越类似桌面应用程序的操作方式。例如流行的在线RSS阅读网站 Bloglines（http://www.bloglines.com/），即允许用户用类似维护Windows开始菜单一样的方式通过鼠标拖动改变列 表条目的位置，如-20所示。

-20 在Web页面中实现通过鼠标拖动改变列表中条目排列顺序

使用ASP.NET AJAX Control Toolkit中的ReorderList扩展器控件，我们也可以方便地实现这样的功能。

ReorderList 是一个全功能的数据绑定控件，即能够用统一的模版以列表的方式显示多个拥有共同类型的数据条目，比如DataTable中的某一行、Array中的某一项 等，并支持多种模版，例如ItemTemplate、EditItemTemplate、InsertItemTemplate等。若是其绑定的数据条目 中有一个类似Order或Priority之类的表示排序信息的整数类型字段，那么即可将该字段设置为ReorderList的排序字段。这样，当用户拖 动某一项改变其在列表中的位置之后，ReorderList将根据当前的条目次序自动请求服务器，并修改需要更新的条目的排序字段。我们需要做的只是提供 数据源的更新方法以及列表条目的排序字段而已，至于如何增加、减少并且协调列表中各个条目中排序字段的值，都将由ReorderList自动代为处理。

对于用户对列表条目进行的排序操作，ReorderList既可以通过整页的回送，也可以通过Ajax方式的异步回送来通知服务器。而若是 需要对某个列表条目进行编辑或删除，则必须使用传统的整页回送模型，当然，我们仍然可以用UpdatePanel将该ReorderList包围起来以得 到我们所期望的Ajax行为。

ReorderList控件继承于System.Web.UI.WebControls.CompositeDataBoundControl，也 就自然拥有了CompositeDataBoundControl数据绑定控件的所有属性/方法/事件，声明ReorderList控件时所常用的属性标 签如表10-5所示。

10-5 声明ReorderList控件时的常用属性标签

DataSourceID：页面中某个DataSource控件的ID，用于通过数据绑定自动生成列表项目。

DataKeyField：数据源中键字段的名称，该字段中的值应该在所右记录中是唯一且不变的，ReorderList将用条目中该字段的值作为记录的标志，将在更新/删除中使用。

AllowReorder：是否允许用户对列表中的项目进行重新排序，若指定了，则该属性将自动被设置为true。

SortOrderField：数据源中作为排序字段的名称。在用户进行重新排序之后，ReorderList将自动修改需要更新的条目的该字段

DragHandleAlignment：条目的可拖动区域与条目之间的相对位置关系。可选Top（上部）、Bottom（下部）、Left（左边）和Right（右边）。

PostBackOnReorder：若设置该属性值为true，则当用户对列表中的项目进行重新排序之后，将自动引发一次整页的回送。否则将以异步回调的方式向服务器端发送请求。

EditItemIndex：列表中当前处于编辑模式下的项目的索引值。

ShowInsertItem：若该属性值为true，则列表中将显示出一个用来添加新条目的特殊行，即模版中定义的内容。

ItemInsertLocation：插入的新行在整个列表中的位置。可选Beginning（第一项）或End（最后一项）。

<ItemTemplate>：该标签内将定义列表中普通条目的模版。

<DragHandleTemplate>：该标签内将定义列表条目中可拖放区域的模版。用户只有在该区域中拖拽才能够对该条目进行重排序。

<ReorderTemplate>：该标签内将定义拖动列表条目时列表中可投放区域的模版。

<InsertItemTemplate>：该标签内将定义用来添加新条目的特殊行的模版。

<EditItemTemplate>：该标签内将定义处于编辑状态中的列表条目的模版。

<EmptyListTemplate>：该标签内将定义空列表的模版。若列表中没有任何条目，则将显示出该模版中定义的内容。

需要特别注意的是，ReorderList控件并不会在客户端自动根据SortOrderField对条目进行排序，因此我们在进行数据绑定的时 候，要保证条目已经按照SortOrderField进行了排序。事实上，SortOrderField属性也仅仅在更新排序信息时使用。换句话 说，ReorderList将只负责更新条目的SortOrderField属性，而并不负责根据该属性对项目排序。

对于PostBackOnReorder属性，若该ReorderList控件将只提供对项目重新排序的功能，则应该将其设置为 false，这样可以充分利用ReorderList自带的异步回调功能。而若是该ReorderList控件同样支持对条目的添加、删除、编辑等复杂功 能，则应该将PostBackOnReorder属性设置为true，并用UpdatePanel包围该ReorderList，以期得到Ajax的异步 回送功能。

10.4.3 示例程序：可排序的音乐列表

在本示例程序中，我们将基于前面Rating控件的音乐列表，使用ReorderList控件让用户可以根据喜好通过简单直观的鼠标拖动改变某个音乐在列表中的位置。

回到-16中所示的MusicEntry类的类图上，可以看到MusicEntry类包含了一个名为Order的Int类型属性，该属性即将用来存储音乐在列表中的次序。

-16 MusicEntry类的类图

在初始化10条肖邦的名曲时，我们已经依照顺序分别指定了其Order属性为0-9。但由于ReorderList控件将在运行时改变某些 MusicEntry的Order属性，所以在MusicData类中的用来返回所有音乐列表的GetMusicList()方法中，我们还要首先对现有 的MusicEntry根据其Order属性进行排序。修改后的GetMusicList()方法如下：