Glisser-déposer avec un ReoderList

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

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.

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)

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

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.