Verwenden von Postbacks mit ReorderList (VB)

von Christian Wenz

PDF herunterladen

Das ReorderList-Steuerelement im AJAX Control Toolkit stellt eine Liste bereit, die vom Benutzer über Ziehen und Ablegen neu angeordnet werden kann. Wenn die Liste neu angeordnet wird, informiert ein Postback den Server über die Änderung.

Übersicht

Das ReorderList Steuerelement im AJAX Control Toolkit stellt eine Liste bereit, die vom Benutzer über Ziehen und Ablegen neu angeordnet werden kann. Wenn die Liste neu angeordnet wird, informiert ein Postback den Server über die Änderung.

Schritte

Es gibt mehrere mögliche Datenquellen für das ReorderList Steuerelement. Eines ist die Verwendung eines XmlDataSource Steuerelements:

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

Um dieses XML an ein ReorderList Steuerelement zu binden und Postbacks zu aktivieren, müssen die folgenden Attribute festgelegt werden:

• DataSourceID: Die ID der Datenquelle
• SortOrderField: Die eigenschaft, nach der sortiert werden soll
• AllowReorder: Gibt an, ob der Benutzer die Neuanordnung der Listenelemente zulassen soll.
• PostBackOnReorder: Gibt an, ob ein Postback erstellt werden soll, wenn die Liste neu angeordnet wird.

Hier sehen Sie das entsprechende Markup für das Steuerelement:

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

Innerhalb des ReorderList Steuerelements können bestimmte Daten aus der Datenquelle mithilfe der Eval() Methode gebunden werden:

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

An einer beliebigen Position auf der Seite enthält eine Beschriftung die Informationen, wenn die letzte Neuanordnung erfolgt ist:

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

Diese Beschriftung wird mit Text im serverseitigen Code gefüllt, der den "Postback" behandelt.

<script runat="server">
 Sub Page_Load()
 If Page.IsPostBack Then
 lastUpdate.Text = "List last reordered at " & DateTime.Now.ToLongTimeString()
 End If
 End Sub
</script>

Um die Funktionalität von ASP.NET AJAX und dem Steuerelement-Toolkit zu aktivieren, muss das ScriptManager Steuerelement auf der Seite platziert werden:

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

Jede Neuanordnung löst einen Postback aus (Klicken, um das Bild in voller Größe anzuzeigen)