基于AJAX Control Toolkit - ReorderList 构建ToDo 任务列表
ReorderList是一个全新的控件。它可以实现逐条列出数据并实现交互。用户简单的拖拽就可以改变数据的排列顺序并更新到数据源。在本控件中如果SortOrderField 属性设置之后排序将自动完成。关于ReorderList – AJAX控件的介绍，请参考如下文章：
AJAX 控件 - ReorderList
如下是基于ReorderList 控件创建的ToDo任务列表范例程序：
其中ReorderList 控件脚本如下：
<cc1:ReorderList ID="ReorderList1" runat="server" AllowReorder="True" DataSourceID="SqlDataSourceToDo"
PostBackOnReorder="False" SortOrderField="item_priority">
<ItemTemplate>
<div class="itemArea">
<asp:Label ID="Label1" runat="server" Text='<%# Eval("item_name") %>' Font-Bold="True"></asp:Label>
<br />
<asp:Label ID="Label2" runat="server" Text='<%# Eval("item_description") %>' ForeColor="#999999"></asp:Label>
</div>
</ItemTemplate>
<DragHandleTemplate>
<div class="dragHandle">
</div>
</DragHandleTemplate>
<InsertItemTemplate>
<div style="padding-left: 25px; border-bottom: thin solid transparent;">
<asp:Panel ID="panel1" runat="server" DefaultButton="Button1">
<hr />
<div style="font-family: Verdana; color: Black;">
新增ToDo任务列表:<br />
<table>
<tr>
<th>
任务名称
</th>
<th>
描述
</th>
</tr>
<tr>
<td>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("item_name") %>'>
</asp:TextBox>
</td>
<td>
<asp:TextBox ID="TextBox2" runat="server"
Text='<%# Bind("item_description") %>' Width="400px"></asp:TextBox>
</td>
</tr>
</table>
</div>
<br />
<asp:Button ID="Button1" runat="server" CommandName="Insert" Text="新 增"></asp:Button>
</asp:Panel>
</div>
</InsertItemTemplate>
</cc1:ReorderList>
范例程序采用了AJAX、MasterPage、SqlDataSource等等技术，ToDo范例数据库采用SQL Server 2008。范例程序提供源代码下载，欢迎交流、分享。