Glisser-déplacer via 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ées par l’utilisateur par glisser-déplacer. L’ordre actuel de la liste doit être conservé sur le serveur.

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. L’ordre actuel de la liste doit être conservé sur le serveur.

Étapes

Le ReorderList contrôle prend en charge la liaison de données d’une base de données à la liste. Mieux encore, il prend également en charge l’écriture de modifications de l’ordre de l’élément de liste dans le magasin de données.

Cet exemple utilise Microsoft SQL Server 2005 Express Edition comme magasin de données. La base de données est une partie facultative (et gratuite) d’une installation de Visual Studio, y compris l’édition express. Il est également disponible sous la forme d’un téléchargement distinct sous https://go.microsoft.com/fwlink/?LinkId=64064. Pour cet exemple, nous partons du principe que le instance du SQL Server 2005 Express Edition est appelé SQLEXPRESS et réside sur la même machine que le serveur web ; il s’agit également de la configuration par défaut. Si votre configuration diffère, vous devez adapter les informations de connexion pour la base de données.

Le moyen le plus simple de configurer la base de données consiste à utiliser Microsoft SQL Server Management Studio Express (https://www.microsoft.com/downloads/details.aspx?FamilyID=c243a5ae-4bd1-4e3d-94b8-5a0f62bf7796& ; DisplayLang=en ). Connectez-vous au serveur, double-cliquez sur Databases et créez une base de données (cliquez avec le bouton droit et choisissez New Database) appelée Tutorials.

Dans cette base de données, créez une table appelée AJAX avec les quatre colonnes suivantes :

• id (clé primaire, entier, identité, non NULL)
• char (char(1), NULL)
• description (varchar(50), NULL)
• position (int, NULL)

Disposition de la table AJAX (cliquer pour afficher l’image en taille réelle)

Ensuite, remplissez le tableau avec quelques valeurs. Notez que la position colonne contient l’ordre de tri des éléments.

Données initiales dans la table AJAX (cliquer pour afficher l’image en taille réelle)

L’étape suivante nécessite de générer un SqlDataSource contrôle pour communiquer avec la nouvelle base de données et sa table. La source de données doit prendre en charge les SELECT commandes SQL et .UPDATE Lorsque l’ordre des éléments de liste est modifié ultérieurement, le ReorderList contrôle envoie automatiquement deux valeurs à la commande de la source de Update données : la nouvelle position et l’ID de l’élément. Par conséquent, la source de données a besoin d’une <UpdateParameters> section pour ces deux valeurs :

<asp:SqlDataSource ID="sds" runat="server" ConnectionString="Data
 Source=(local)\SQLEXPRESS;Initial Catalog=Tutorials;Integrated Security=True"
 ProviderName="System.Data.SqlClient" OldValuesParameterFormatString="original_{0}"
 SelectCommand="SELECT [id], [char], [description], [position] FROM [AJAX] ORDER BY [position]"
 UpdateCommand="UPDATE [AJAX] SET position=@position WHERE [id]=@original_id">
 <UpdateParameters>
 <asp:Parameter Name="position" Type="Int32" />
 <asp:Parameter Name="original_id" Type="Int32" />
 </UpdateParameters>
</asp:SqlDataSource>

Le ReorderList contrôle doit définir les attributs suivants :

• AllowReorder: indique si les éléments de liste peuvent être réorganisés
• DataSourceID: ID de la source de données
• DataKeyField: nom de la colonne de clé primaire dans la source de données
• SortOrderField: colonne de source de données qui fournit l’ordre de tri pour les éléments de liste

Dans les <DragHandleTemplate> sections et <ItemTemplate> , la disposition de la liste peut être affinée. En outre, la liaison de données est possible à l’aide de la Eval() méthode, comme indiqué ici :

<ajaxToolkit:ReorderList ID="rl1" runat="server" SortOrderField="position" 
 AllowReorder="true" DataSourceID="sds" DataKeyField="id">
 <DragHandleTemplate>
 <div class="DragHandleClass">
 </div>
 </DragHandleTemplate>
 <ItemTemplate>
 <asp:Label ID="ItemLabel" runat="server" Text='<%#Eval("description") %>' />
 </ItemTemplate>
</ajaxToolkit:ReorderList>

Les informations de style CSS suivantes (référencées dans la <DragHandleTemplate> section du contrôle) permettent de ReorderList s’assurer que le pointeur de la souris change correctement lorsqu’il pointe sur la poignée de glissement :

<style type="text/css">
 .DragHandleClass
 {
 width: 12px;
 height: 12px;
 background-color: red;
 cursor:move;
 }
</style>

Enfin, un ScriptManager contrôle initialise ASP.NET AJAX pour la page :

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

Exécutez cet exemple dans le navigateur et réorganisez un peu les éléments de liste. Rechargez ensuite la page et/ou examinez la base de données. Les positions modifiées ont été conservées et sont également reflétées par les valeurs de la colonne de la position base de données et cela sans aucun code, simplement à l’aide du balisage.

Les données de la base de données changent en fonction du nouvel ordre d’élément de liste (cliquez pour afficher l’image en taille réelle)

Précédent