ReorderList でポストバックを使用する (C#)

作成者: Christian Wenz

PDF のダウンロード

AJAX Control Toolkit の ReorderList コントロールには、ドラッグ アンド ドロップでユーザーが並べ替えることができるリストが用意されています。 リストの順序が変更されるたびに、ポストバックによってサーバーに変更が通知されます。

概要

AJAX Control Toolkit のコントロールには ReorderList 、ドラッグ アンド ドロップでユーザーが並べ替えることができるリストが用意されています。 リストの順序が変更されるたびに、ポストバックによってサーバーに変更が通知されます。

手順

コントロールには、いくつかのデータ ソースが ReorderList 考えられます。 1 つは、コントロールを使用する方法です XmlDataSource 。

<asp:XmlDataSource ID="XmlDataSource1" runat="server" XPath="acronym/letter">
 <Data>
 <acronym>
 <letter char="A" description="Asynchronous" />
 <letter char="J" description="JavaScript" />
 <letter char="A" description="And" />
 <letter char="X" description="XML" />
 </acronym>
 </Data>
</asp:XmlDataSource>

この XML をコントロールに ReorderList バインドし、ポストバックを有効にするには、次の属性を設定する必要があります。

• DataSourceID: データ ソースの ID
• SortOrderField: 並べ替えるプロパティ
• AllowReorder: ユーザーがリスト要素の順序を変更できるようにするかどうか
• PostBackOnReorder: リストが再配置されるたびにポストバックを作成するかどうか

コントロールに適したマークアップを次に示します。

<ajaxToolkit:ReorderList ID="rl1" runat="server" SortOrderField="char"
 AllowReorder="true"
 DataSourceID="XmlDataSource1" PostBackOnReorder="true">

コントロール内では ReorderList 、 メソッドを使用して、データ ソースからの特定のデータを Eval() バインドできます。

<DragHandleTemplate>
 <div class="DragHandleClass">
 </div>
 </DragHandleTemplate>
 <ItemTemplate>
 <div>
 <asp:Label ID="ItemLabel" Text='<%# Eval("description") %>' runat="server" />
 </div>
 </ItemTemplate>
</ajaxToolkit:ReorderList>

ページ上の任意の位置で、ラベルは最後の並べ替えが行われたときに情報を保持します。

<div>
 <asp:Label ID="lastUpdate" runat="server" />
</div>

このラベルには、ポストバックを処理するサーバー側コードのテキストが入力されています。

<script runat="server">
 void Page_Load()
 {
 if (Page.IsPostBack)
 {
 lastUpdate.Text = "List last reordered at " + 
 DateTime.Now.ToLongTimeString();
 }
 }
</script>

最後に、AJAX と Control Toolkit の機能 ASP.NET アクティブにするには、コントロールを ScriptManager ページに配置する必要があります。

<asp:ScriptManager ID="asm" runat="server" />

並べ替えごとにポストバックがトリガーされます (クリックするとフルサイズの画像が表示されます)

次へ