AJAX 控件工具包中的 ReorderList 控件提供了一个列表，用户可以通过拖放对该列表进行重新排序。 列表的当前顺序应保留在服务器上。
概述
ReorderList AJAX 控件工具包中的控件提供了一个列表，用户可以通过拖放重新排序该列表。 列表的当前顺序应保留在服务器上。
步骤
控件 ReorderList 支持将数据从数据库绑定到列表。 最重要的是，它还支持将列表元素顺序的更改写回到数据存储。
此示例使用 Microsoft SQL Server 2005 Express Edition 作为数据存储。 数据库是 Visual Studio 安装（包括快速版）的可选 (和免费) 部分。 它还在 下 https://go.microsoft.com/fwlink/?LinkId=64064作为单独下载提供。 对于此示例，我们假定SQL Server 2005 Express Edition的实例被调用SQLEXPRESS并驻留在 Web 服务器所在的计算机上;这也是默认设置。 如果设置不同，则必须调整数据库的连接信息。
设置数据库的最简单方法是使用 Microsoft SQL Server Management Studio Express (https://www.microsoft.com/downloads/details.aspx?FamilyID=c243a5ae-4bd1-4e3d-94b8-5a0f62bf7796&DisplayLang=en ) 。 连接到服务器，双击 Databases 并创建新数据库， (右键单击并选择 New Database 名为 Tutorials的) 。
在此数据库中，使用以下四列创建名为 AJAX 的新表：
-
id(主键、整数、标识，而不是 NULL) -
char(char (1) ，NULL) -
description(varchar (50) ，NULL) -
position(int，NULL)
AJAX 表的布局 (单击以查看全尺寸图像)
接下来，用几个值填充表。 请注意，该 position 列保存元素的排序顺序。
AJAX 表中的初始数据 (单击以查看全尺寸图像)
下一步需要生成控件 SqlDataSource 以与新数据库及其表通信。 数据源必须支持 SELECT 和 UPDATE SQL 命令。 稍后更改列表元素的顺序时，控件 ReorderList 会自动将两个值提交到数据源的 Update 命令：新位置和元素的 ID。 因此，数据源需要这两个 <UpdateParameters> 值的节：
<asp:SqlDataSource ID="sds" runat="server" ConnectionString="Data
Source=(local)\SQLEXPRESS;Initial Catalog=Tutorials;Integrated Security=True"
ProviderName="System.Data.SqlClient" OldValuesParameterFormatString="original_{0}"
SelectCommand="SELECT [id], [char], [description], [position] FROM [AJAX] ORDER BY [position]"
UpdateCommand="UPDATE [AJAX] SET position=@position WHERE [id]=@original_id">
<UpdateParameters>
<asp:Parameter Name="position" Type="Int32" />
<asp:Parameter Name="original_id" Type="Int32" />
</UpdateParameters>
</asp:SqlDataSource>
控件 ReorderList 需要设置以下属性：
-
AllowReorder：列表项是否可以重新排列 -
DataSourceID：数据源的 ID -
DataKeyField：数据源中主键列的名称 -
SortOrderField：为列表项提供排序顺序的数据源列
在 <DragHandleTemplate> 和 <ItemTemplate> 部分中，可以微调列表的布局。 此外，可以使用 Eval() 方法进行数据绑定，如下所示：
<ajaxToolkit:ReorderList ID="rl1" runat="server" SortOrderField="position"
AllowReorder="true" DataSourceID="sds" DataKeyField="id">
<DragHandleTemplate>
<div class="DragHandleClass">
</div>
</DragHandleTemplate>
<ItemTemplate>
<asp:Label ID="ItemLabel" runat="server" Text='<%#Eval("description") %>' />
</ItemTemplate>
</ajaxToolkit:ReorderList>
控件) 节ReorderList中<DragHandleTemplate>引用的以下 CSS 样式信息 (确保鼠标指针在悬停在拖动句柄上时发生相应更改：
<style type="text/css">
.DragHandleClass
{
width: 12px;
height: 12px;
background-color: red;
cursor:move;
}
</style>
最后，控件 ScriptManager 初始化页面 ASP.NET AJAX：
<asp:ScriptManager ID="asm" runat="server" />
在浏览器中运行此示例，并稍微重新排列列表项。 然后，重新加载页面和/或查看数据库。 更改后的位置已保留，并且也反映在数据库中的 position 列中的值，并且无需任何代码，只需使用标记即可。
数据库中的数据会根据新的列表项顺序更改 (单击以查看全尺寸图像)
