通过 ReorderList 进行拖放 (VB)

  • 项目

作者 ：Christian Wenz

下载 PDF

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 表的布局

AJAX 表的布局 (单击以查看全尺寸图像)

接下来，用几个值填充表。 请注意，该 position 列保存元素的排序顺序。

AJAX 表中的初始数据

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

数据库中的数据会根据新的列表项顺序更改

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

上一篇