透過 ReorderList 拖放 (VB)
AJAX Control Toolkit 中的 ReorderList 控制項提供可透過拖放方式由使用者重新排序的清單。 清單的目前順序應該保存在伺服器上。
概觀
AJAX Control Toolkit 中的 ReorderList 控制項提供可透過拖放方式由使用者重新排序的清單。 清單的目前順序應該保存在伺服器上。
步驟
ReorderList 控制項支援將資料從資料庫繫結至清單。 最重要的是，它也支援將變更寫入清單項目的順序回到資料存放區。
此範例使用 Microsoft SQL Server 2005 Express Edition 作為資料存放區。 資料庫是 Visual Studio 安裝 (包含 Express 版本) 中的可選部分 (免費)。 它也可在下 https://go.microsoft.com/fwlink/?LinkId=64064以個別下載的形式提供。 在此範例中，我們假設會呼叫 SQLEXPRESS SQL Server 2005 Express Edition 的執行個體，並位於與網頁伺服器相同的機器上；這也是預設設定。 如果您的設定不同，您必須調整資料庫的連接資訊。
設定資料庫最簡單的方式是使用 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>
下列 CSS 樣式資訊 (在 ReorderList 控制項的 <DragHandleTemplate> 區段中參考) 可確保滑鼠指標在拖曳控點上停留時適當地變更：
<style type="text/css">
.DragHandleClass
{
width: 12px;
height: 12px;
background-color: red;
cursor:move;
}
</style>
最後，ScriptManager 控制項會初始化頁面的 AJAX ASP.NET：
<asp:ScriptManager ID="asm" runat="server" />
在瀏覽器中執行此範例，並稍微重新排列清單項目。 然後，重新載入頁面和/或查看資料庫。 已保留已改變的位置，而且也會由資料庫中 position 資料行中的值反映，而且所有不含任何程序碼，只要使用標記即可。
資料庫中的資料會根據新的清單項目順序而變更 (按一下以檢視完整大小的影像)
