Trascinamento della selezione tramite ReorderList (VB)

di Christian Wenz

Scarica il PDF

Il controllo ReorderList in AJAX Control Toolkit fornisce un elenco che può essere riordinato dall'utente tramite trascinamento della selezione. L'ordine corrente dell'elenco deve essere mantenuto nel server.

Panoramica

Il ReorderList controllo in AJAX Control Toolkit fornisce un elenco che può essere riordinato dall'utente tramite trascinamento della selezione. L'ordine corrente dell'elenco deve essere mantenuto nel server.

Passaggi

Il ReorderList controllo supporta l'associazione di dati da un database all'elenco. Al meglio, supporta anche la scrittura di modifiche all'ordine dell'elemento elenco nell'archivio dati.

Questo esempio usa Microsoft SQL Server 2005 Express Edition come archivio dati. Il database è una parte facoltativa (e gratuita) di un'installazione di Visual Studio, inclusa l'edizione express. È disponibile anche come download separato in https://go.microsoft.com/fwlink/?LinkId=64064. Per questo esempio si presuppone che l'istanza del SQL Server 2005 Express Edition venga chiamata SQLEXPRESS e risieda nello stesso computer del server Web. Si tratta anche dell'installazione predefinita. Se la configurazione è diversa, è necessario adattare le informazioni di connessione per il database.

Il modo più semplice per configurare il database consiste nell'usare Microsoft SQL Server Management Studio Express (https://www.microsoft.com/downloads/details.aspx?FamilyID=c243a5ae-4bd1-4e3d-94b8-5a0f62bf7796& DisplayLang=en ). Connettersi al server, fare doppio clic su Databases e creare un nuovo database (fare clic con il pulsante destro del mouse e scegliere New Database) denominato Tutorials.

In questo database creare una nuova tabella denominata AJAX con le quattro colonne seguenti:

• id (chiave primaria, integer, identità, non NULL)
• char (char(1), NULL)
• description (varchar(50), NULL)
• position (int, NULL)

Layout della tabella AJAX (fare clic per visualizzare l'immagine a dimensione intera)

Compilare quindi la tabella con un paio di valori. Si noti che la position colonna contiene l'ordinamento degli elementi.

Dati iniziali nella tabella AJAX (fare clic per visualizzare l'immagine a dimensione intera)

Il passaggio successivo richiede di generare un SqlDataSource controllo per comunicare con il nuovo database e la relativa tabella. L'origine dati deve supportare i SELECT comandi e UPDATE SQL. Quando l'ordine degli elementi dell'elenco viene modificato in un secondo momento, il ReorderList controllo invia automaticamente due valori al comando dell'origine Update dati: la nuova posizione e l'ID dell'elemento. Pertanto, l'origine dati richiede una <UpdateParameters> sezione per questi due valori:

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

Il ReorderList controllo deve impostare gli attributi seguenti:

• AllowReorder: indica se è possibile ridisporre gli elementi dell'elenco
• DataSourceID: ID dell'origine dati
• DataKeyField: nome della colonna chiave primaria nell'origine dati
• SortOrderField: colonna dell'origine dati che fornisce l'ordinamento per gli elementi dell'elenco

<DragHandleTemplate> Nelle sezioni e <ItemTemplate> il layout dell'elenco può essere ottimizzato. È anche possibile usare il Eval() metodo databinding, come illustrato di seguito:

<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 informazioni di stile CSS seguenti(a cui si fa riferimento nella <DragHandleTemplate> sezione del ReorderList controllo) assicurano che il puntatore del mouse venga modificato in modo appropriato quando passa il puntatore del mouse sul punto di trascinamento:

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

Infine, un ScriptManager controllo inizializza ASP.NET AJAX per la pagina:

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

Eseguire questo esempio nel browser e ridisporre un po' le voci dell'elenco. Ricaricare quindi la pagina e/o esaminare il database. Le posizioni modificate sono state mantenute e vengono riflesse anche dai valori nella position colonna del database e che tutti senza codice, usando solo markup.

I dati nel database cambiano in base al nuovo ordine degli elementi dell'elenco (fare clic per visualizzare l'immagine a dimensione intera)

Indietro