透過 ReorderList 拖放 (C#)
作者 ：擷取 Wenz
AJAX 控制件工具組中的 ReorderList 控件提供可透過拖放方式由使用者重新排序的清單。 清單的目前順序應該保存在伺服器上。
概觀
ReorderList AJAX 控制件工具組中的控制項提供可透過拖放方式由使用者重新排序的清單。 清單的目前順序應該保存在伺服器上。
步驟
控制項 ReorderList 支援將數據從資料庫系結至清單。 最佳做法是，它也支援將變更寫入清單元素的順序回到數據存放區。
此範例使用 Microsoft SQL Server 2005 Express Edition 作為數據存放區。 資料庫是 Visual Studio 安裝的選擇性 (和免費) 部分，包括 express edition。 它也可在 下 https://go.microsoft.com/fwlink/?LinkId=64064作為個別下載。 在此範例中，我們假設呼叫 SQL Server 2005 Express Edition SQLEXPRESS 的實例，並位於與網頁伺服器相同的計算機上;這也是預設設定。 如果您的設定不同，您必須調整資料庫的連線資訊。
設定資料庫最簡單的方式是使用 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 命令：新位置和元素的標識符。 因此，數據源需要這兩個值的 區 <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：數據源的識別碼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 值反映，而且只要使用標記，就全部沒有任何程序代碼。
資料庫中的數據會根據新的清單項目順序變更， (按兩下即可檢視大小完整的影像)
