通过 ReorderList 进行拖放 (C#)

项目
01/18/2024

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 列中的值，并且这些位置无需任何代码，只需使用标记即可。

数据库中的数据根据新的列表项顺序更改 (单击以查看全尺寸图像)

通过

通过 ReorderList 进行拖放 (C#)

概述

步骤

反馈

其他资源