Partager via

Utilisation de publications (postback) avec ReorderList (C#)

  • Article

par Christian Wenz

Télécharger le PDF

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

Étapes

Il existe plusieurs sources de données possibles pour le ReorderList contrôle. La première 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é à trier
  • AllowReorder: indique s’il faut autoriser l’utilisateur à réorganiser les éléments de liste
  • PostBackOnReorder: s’il faut créer une publication de publication chaque fois que la liste est réorganisé

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 lors de la dernière réorganisation :

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

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

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

Enfin, pour activer les fonctionnalités de ASP.NET AJAX et du Kit de ressources de contrôle, le ScriptManager contrôle doit être placé sur la page :

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

Chaque réorganisation déclenche une publication de publication

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

Next