Glisser-déposer avec un ReoderList

Date de publication : 08 mai 2009

Par Christian Wenz
 Pascal ROZE (Traducteur) (Page perso) (Blog)
 

Le contrôle ReorderList de l'AJAX Control Toolkit permet de générer une liste qui peut être réorganisée par l'utilisateur via un glisser- déposer. L'ordre actuel de la liste doit pouvoir persister sur le serveur.

               Version PDF (Miroir)   Version hors-ligne (Miroir)

Traduction
Vue générale
Etapes


Traduction

Cet article est la traduction la plus fidèle possible de l'article original: en Drag and Drop via ReorderList


Vue générale

Le contrôle ReorderList de l'AJAX Control Toolkit permet de générer une liste qui peut être réorganisée par l'utilisateur via un glisser- déposer. L'ordre actuel de la liste doit pouvoir persister sur le serveur.


Etapes

Le contrôle ReorderList supporte le binding à partir d'une base de données. Encore plus fort, il permet également de répercuter dans la base de données les changements effectués par l'utilisateur.

Cet exemple utilise Microsoft SQL Server 2005 Express Edition. Il peut être installé lors de l'installation de Visual Studio, version express incluse. Il est également disponible à l'adresse suivante: http://go.microsoft.com/fwlink/?LinkId=64064. Dans cet exemple, nous supposons que l'instance de SQL Server 2005 Express Edition est appelée SQLEXPRESS et tourne sur la même machine que le serveur web. Si votre configuration diffère, il faudra modifier les informations de connection à la base.

La façon la plus simple d'installer la base de données est d'utiliser Microsoft SQL Server Management Studio Express (http://www.microsoft.com/downloads/details.aspx?FamilyID=c243a5ae-4bd1-4e3d-94b8-5a0f62bf7796). Connectez vous au serveur, double-cliquez sur Databases et créez une nouvelle base de données (clic droit puis New Database) appelée Tutorials.

Dans cette base de données, créez une nouvelle table appelée AJAX avec les 4 colonnes suivantes:
- id (primary key, integer, identity, not NULL)
- char (char(1), NULL)
- description (varchar(50), NULL)
- position (int, NULL)

Le modèle de la table AJAX

Ensuite, remplissez la table avec quelques données. Notez que la colonne position correspond à l'ordre des éléments de la liste.

Les données initiales de la table AJAX

La prochaine étape est un contrôle SqlDataSource pour communiquer avec la nouvelle base de données et sa table. La source de données doit supporter les commandes SQL SELECT et UPDATE. Quand l'ordre des éléments de la liste sera modifié dans le futur, le contrôle ReorderList soumettra automatiquement deux valeurs à la commande UPDATE de la source de données: la nouvelle position et l'ID de l'élément. Par conséquent, la source de données nécessite une section <UpdateParameters> 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>
Les attributs suivants du contrôle ReorderList doivent être définis:
- AllowReorder: Indique si oui ou non la liste peut être réorganisée
- DataSourceID: L'ID de la source de données
- DataKeyField: Le nom de la clé primaire dans la source de données
- SortOrderField: La colonne de la source de données sur laquelle s'appliquera le tri

Dans les sections <DragHandleTemplate> et <ItemTemplate>, le modèle de la liste peut être personnalisé. Le databinding est possible en utilisant la méthode Eval() comme montré ci-dessous: 

<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>
Le CSS ci-dessous (référencé dans la section <DragHandleTemplate> du contrôle ReorderList) fait en sorte que le pointeur de la souris change lorsqu'il survole la partie qui gère le glisser: 

<style type="text/css">      
	.DragHandleClass      
	{           
		width: 12px;           
		height: 12px;           
		background-color: red;           
		cursor:move;      
	} 
</style>
Pour terminer, un contrôle ScriptManager doit être ajouté dans la page ASP.NET AJAX: 

<asp:ScriptManager ID="asm" runat="server" />
Exécuter cette page dans votre navigateur et réorganiser un peu la liste. Puis, rechargez la page et/ou regarder la base de données. Les nouvelles positions ont été maintenues et sont visibles dans la colonne position de la table -- et c'est tout, sans aucune ligne de code.

Les données de la table changent suivant la nouvelle position des éléments de la liste.


               Version PDF (Miroir)   Version hors-ligne (Miroir)

Valid XHTML 1.1!Valid CSS!

Copyright © 2009 Equipe Dotnet. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts. Droits de diffusion permanents accordés à Developpez LLC. Cette page est déposée.

 
 
Developpez.com

Nous contacter

Participez

Informations légales

 
Services

Forum Microsoft DotNET

Blogs

Hébergement

 
Partenaires

Hébergement Web