Verwenden von Postbacks mit dem ReorderList-Steuerelement (VB)

von Christian Wenz

PDF herunterladen

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

Überblick

Das ReorderList Steuerelement im AJAX Control Toolkit stellt eine Liste bereit, die vom Benutzer per Drag and Drop neu angeordnet werden kann. Wenn die Liste neu sortiert wird, informiert ein Postback den Server über die Änderung.

Schritte

Es gibt mehrere mögliche Datenquellen für das ReorderList Steuerelement. Eine besteht darin, ein XmlDataSource -Steuerelement zu verwenden:

<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 diese 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 zu sortierende Eigenschaft
• AllowReorder: Gibt an, ob der Benutzer die Listenelemente neu anordnen kann.
• PostBackOnReorder: Gibt an, ob bei jeder Neuordnung der Liste ein Postback erstellt werden soll.

Hier sehen Sie das geeignete Markup für das -Steuerelement:

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

Innerhalb des Steuerelements ReorderList 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 Bezeichnung die Informationen, wenn die letzte Neuanordnung erfolgt ist:

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

Diese Bezeichnung ist mit Text im serverseitigen Code gefüllt, der das 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 schließlich die Funktionalität von ASP.NET AJAX und dem Control Toolkit zu aktivieren, muss das ScriptManager Steuerelement auf der Seite platziert werden:

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

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

ZurückWeiter