Utilisation de publications (postback) avec ReorderList (VB)

par Christian Wenz

Télécharger le PDF

Le contrôle ReorderList dans ajax Control Toolkit fournit une liste qui peut être réorganisé par l’utilisateur par glisser-déplacer. Chaque fois que la liste est réorganisées, une publication doit informer le serveur de la modification.

Vue d’ensemble

Le ReorderList contrôle dans ajax Control Toolkit fournit une liste qui peut être réorganisé par l’utilisateur par glisser-déplacer. Chaque fois que la liste est réorganisées, une publication doit informer le serveur de la modification.

Étapes

Il existe plusieurs sources de données possibles pour le ReorderList contrôle. L’une consiste à utiliser un XmlDataSource contrôle :

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

Pour lier ce code XML à un ReorderList contrôle et activer les publications, les attributs suivants doivent être définis :

• DataSourceID: ID de la source de données
• SortOrderField: propriété par laquelle trier
• AllowReorder: indique s’il faut autoriser l’utilisateur à réorganiser les éléments de liste
• PostBackOnReorder: indique s’il faut créer une publication à chaque fois que la liste est réorganée

Voici le balisage approprié pour le contrôle :

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

Dans le ReorderList contrôle, des données spécifiques de la source de données peuvent être liées à l’aide de la Eval() méthode :

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

À une position arbitraire sur la page, une étiquette contient les informations lorsque la dernière réorganisation s’est produite :

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

Cette étiquette est remplie de texte dans le code côté serveur, qui gère la publication :

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

Enfin, pour activer les fonctionnalités d’ASP.NET AJAX et de Control Toolkit, le ScriptManager contrôle doit être placé sur la page :

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

Chaque réorganisation déclenche une publication (cliquer pour afficher l’image en taille réelle)

PrécédentSuivant