次の方法で共有

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>

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

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

Each reordering triggers a postback

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

次へ