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

  • [アーティクル]

作成者: Christian Wenz

PDF のダウンロード

AJAX コントロール ツールキットの 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 )。 サーバーに接続し、 をダブルクリックして、 という名前TutorialsのDatabases新しいデータベースを作成します (右クリックして 選択New Database)。

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

  • id (主キー、整数、ID、NULL ではありません)
  • char (char(1), NULL)
  • description (varchar(50), NULL)
  • position (int,NULL)

AJAX テーブルのレイアウト

AJAX テーブルのレイアウト (フルサイズの画像を表示する場合にクリックします)

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

AJAX テーブルの初期データ

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

次の手順では、新しいデータベースとそのテーブルと通信するためのコントロールを生成 SqlDataSource する必要があります。 データ ソースでは、 コマンドと UPDATE SQL コマンドがサポートされているSELECT必要があります。 リスト要素の順序が後で変更されると、 ReorderList コントロールは 2 つの値をデータ ソースのコマンド (新しい位置と要素の Update ID) に自動的に送信します。 したがって、データ ソースには、次の <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 値にも反映され、マークアップを使用するだけでコードなしですべて反映されます。

データベース内のデータは、新しいリスト アイテムの順序に従って変更されます

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

前へ次へ