Verwenden von Postbacks mit dem ReorderList-Steuerelement (C#)

von Christian Wenz

PDF herunterladen

Das ReorderList-Steuerelement im AJAX Control Toolkit stellt eine Liste bereit, die vom Benutzer per Drag and Drop neu sortiert 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 sortiert 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 Neuanordnung der Listenelemente zulassen soll
• PostBackOnReorder: Gibt an, ob ein Postback erstellt werden soll, wenn die Liste neu angeordnet wird

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 aufgetreten ist:

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

Diese Bezeichnung wird mit Text im serverseitigen Code gefüllt, der das Postback behandelt:

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

Um schließlich die Funktionalität von ASP.NET AJAX und des Control Toolkits 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).

Nächste