Usar postbacks con ReorderList (C#)

por 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. Cada vez que se reordena la lista, un postback informará al servidor del cambio.

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. Cada vez que se reordena la lista, un postback informará al servidor del cambio.

Pasos

Hay varios orígenes de datos posibles para el control ReorderList. Uno es usar un control XmlDataSource:

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

Para enlazar este XML a un control ReorderList y habilitar postbacks, se deben establecer los atributos siguientes:

• DataSourceID: el identificador del origen de datos
• SortOrderField: la propiedad en función de la cual se va a ordenar
• AllowReorder: indica si se permite al usuario reordenar los elementos de lista
• PostBackOnReorder: indica si se va a crear un postback cada vez que se reorganiza la lista

Este es el marcado adecuado para el control:

<ajaxToolkit:ReorderList ID="rl1" runat="server" SortOrderField="char"
 AllowReorder="true"
 DataSourceID="XmlDataSource1" PostBackOnReorder="true">

Dentro del control ReorderList, se pueden enlazar datos específicos del origen de datos mediante el método Eval():

<DragHandleTemplate>
 <div class="DragHandleClass">
 </div>
 </DragHandleTemplate>
 <ItemTemplate>
 <div>
 <asp:Label ID="ItemLabel" Text='<%# Eval("description") %>' runat="server" />
 </div>
 </ItemTemplate>
</ajaxToolkit:ReorderList>

En una posición arbitraria de la página, una etiqueta contendrá la información cuando se produjo el último reordenamiento:

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

Esta etiqueta se rellena con texto en el código del lado servidor, controlando el postback:

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

Para activar la funcionalidad de ASP.NET AJAX y el Kit de herramientas de control, el control ScriptManager debe colocarse en la página:

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

Mover el control deslizante desencadena un postback (haga clic para ver la imagen a tamaño completo)