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

  • [アーティクル]

作成者: 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">
 Sub Page_Load()
 If Page.IsPostBack Then
 lastUpdate.Text = "List last reordered at " & DateTime.Now.ToLongTimeString()
 End If
 End Sub
</script>

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

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

Each reordering triggers a postback

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

前へ次へ