Arrastrar y colocar mediante ReorderList (VB)

de Christian Wenz

Descargar PDF

El control ReorderList del Kit de herramientas de control de AJAX proporciona una lista que el usuario puede reordenar mediante arrastrar y colocar. El orden actual de la lista se conservará en el servidor.

Información general

El control ReorderList del Kit de herramientas de control de AJAX proporciona una lista que el usuario puede reordenar mediante arrastrar y colocar. El orden actual de la lista se conservará en el servidor.

Pasos

El control ReorderList admite el enlace de datos de una base de datos a la lista. Lo mejor de todo, también admite la escritura de cambios en el orden del elemento de lista de vuelta al almacén de datos.

En este ejemplo se usa Microsoft SQL Server 2005 Express Edition como almacén de datos. La base de datos es una parte opcional (y gratuita) de una instalación de Visual Studio, incluida la edición Express. También está disponible como una descarga independiente en https://go.microsoft.com/fwlink/?LinkId=64064. En este ejemplo, se supone que la instancia de SQL Server 2005 Express Edition se llama SQLEXPRESS y reside en la misma máquina que el servidor web; esta es también la configuración predeterminada. Si la configuración es diferente, tiene que adaptar la información de conexión de la base de datos.

La manera más fácil de configurar la base de datos es usar Microsoft SQL Server Management Studio Express (https://www.microsoft.com/downloads/details.aspx?FamilyID=c243a5ae-4bd1-4e3d-94b8-5a0f62bf7796& DisplayLang=en). Conéctese al servidor, haga doble clic en Databases y cree una nueva base de datos (haga clic con el botón derecho y elija New Database) denominada Tutorials.

En esta base de datos, cree una tabla denominada AJAX con las cuatro columnas siguientes:

• id (clave principal, entero, identidad, no NULL)
• char (char(1), NULL)
• description (varchar(50), NULL)
• position (int, NULL)

El diseño de la tabla de AJAX (haga clic para ver la imagen a tamaño completo)

A continuación, rellene la tabla con un par de valores. Tenga en cuenta que la columna position contiene el criterio de ordenación de los elementos.

Los datos iniciales de la tabla de AJAX (haga clic para ver la imagen a tamaño completo)

El siguiente paso requiere generar un control SqlDataSource para comunicarse con la nueva base de datos y su tabla. El origen de datos debe admitir los comandos SQL SELECT y UPDATE. Cuando se cambia el orden de los elementos de lista más adelante, el control ReorderList envía automáticamente dos valores al comando Update del origen de datos: la nueva posición y el identificador del elemento. Por lo tanto, el origen de datos necesita una sección <UpdateParameters> para estos dos valores:

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

El control ReorderList debe establecer los atributos siguientes:

• AllowReorder: si se pueden reorganizar los elementos de lista
• DataSourceID: el identificador del origen de datos
• DataKeyField: el nombre de la columna de clave principal en el origen de datos
• SortOrderField: la columna de origen de datos que proporciona el criterio de ordenación para los elementos de lista

En las secciones <DragHandleTemplate> y <ItemTemplate>, el diseño de la lista se puede ajustar. Además, el enlace de datos es posible mediante el método Eval(), como se muestra aquí:

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

La siguiente información de estilo CSS (a la que se hace referencia en la sección <DragHandleTemplate> del control ReorderList) se asegura de que el puntero del mouse cambia adecuadamente cuando se mantiene sobre el controlador de arrastre:

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

Por último, un control ScriptManager inicializa AJAX de ASP.NET para la página:

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

Ejecute este ejemplo en el explorador y reorganice un poco los elementos de lista. A continuación vuelva a cargar la página o eche un vistazo a la base de datos. Las posiciones modificadas se han mantenido y también son reflejadas por los valores de la columna position de la base de datos; y todo esto sin código, simplemente mediante el marcado.

Los datos de la base de datos cambian según el nuevo orden de elementos de la lista (haga clic para ver la imagen a tamaño completo)

Anterior