Trascinamento della selezione tramite ReorderList (C#)

di Christian Wenz

Scarica il PDF

Il controllo ReorderList in AJAX Control Toolkit fornisce un elenco che può essere riordinato dall'utente tramite trascinamento e rilascio. 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 e rilascio. L'ordine corrente dell'elenco deve essere mantenuto nel server.

Passaggi

Il ReorderList controllo supporta i dati di associazione da un database all'elenco. Meglio di tutto, supporta anche la scrittura di modifiche all'ordine dell'elemento elenco di nuovo 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. È anche disponibile 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 si trovi nello stesso computer del server Web. Questa è anche la configurazione 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 e creare un nuovo database (fare clic con il pulsante destro del mouse Databases 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 full-size)

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

I dati iniziali nella tabella AJAX (Fare clic per visualizzare l'immagine full-size)

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 seguito, 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 necessita di 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: se gli elementi dell'elenco possono essere riorganiati
• DataSourceID: ID dell'origine dati
• DataKeyField: nome della colonna chiave primaria nell'origine dati
• SortOrderField: colonna origine dati che fornisce l'ordine di 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 sullo 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 handle 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 riorganizzare gli elementi dell'elenco a un bit. Ricaricare quindi la pagina e/o esaminare il database. Le posizioni modificate sono state mantenute e vengono riflesse anche dai valori della position colonna nel database e che tutti senza codice, usando solo il markup.

I dati nel database vengono modificati in base al nuovo ordine di elemento elenco (Fare clic per visualizzare l'immagine a dimensioni complete)