ReorderList 経由でドラッグ アンド ドロップする (VB)

作成者: Christian Wenz

PDF のダウンロード

AJAX Control Toolkit の ReorderList コントロールには、ドラッグ アンド ドロップでユーザーが並べ替えることができるリストが用意されています。 リストの現在の順序は、サーバーに保持されます。

概要

AJAX Control Toolkit のコントロールには ReorderList 、ドラッグ アンド ドロップでユーザーが並べ替えることができるリストが用意されています。 リストの現在の順序は、サーバーに保持されます。

手順

コントロールは ReorderList 、データベースからリストへのデータのバインドをサポートしています。 何より、リスト要素の順序の変更をデータ ストアに書き戻すこともできます。

このサンプルでは、Microsoft SQL Server 2005 Express Edition をデータ ストアとして使用します。 データベースは、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ダブルクリックして、 という名前Tutorialsの新しいデータベースを作成します (右クリックして 選択New Databaseします)。

このデータベースで、次の 4 つの列を含む という AJAX 名前の新しいテーブルを作成します。

• id (主キー、整数、ID、NULL ではない)
• char (char(1), NULL)
• description (varchar(50), NULL)
• position (int, NULL)

AJAX テーブルのレイアウト (クリックするとフルサイズの画像が表示されます)

次に、テーブルに 2 つの値を入力します。 列には position 要素の並べ替え順序が保持されることに注意してください。

AJAX テーブル内の初期データ (フルサイズの画像を表示する場合はクリックします)

次の手順では、新しいデータベースとそのテーブルと通信するためのコントロールを生成 SqlDataSource する必要があります。 データ ソースは、 および UPDATE SQL コマンドをSELECTサポートしている必要があります。 リスト要素の順序が後で変更されると、 ReorderList コントロールは、新しい位置と要素の ID という 2 つの値をデータ ソースの Update コマンドに自動的に送信します。 したがって、データ ソースには、次の <UpdateParameters> 2 つの値のセクションが必要です。

<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>

次の CSS スタイル情報 (コントロールのReorderListセクションで<DragHandleTemplate>参照) を使用すると、マウス ポインターがドラッグ ハンドルの上にカーソルを合わせると、マウス ポインターが適切に変更されます。

<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 値によっても反映され、マークアップを使用するだけでコードなしですべて反映されます。

データベース内のデータは、新しいリスト アイテムの順序に従って変更されます (フルサイズの画像を表示するには、ここをクリックします)

[戻る]