Spesso abbiamo la necessità di definire l'ordine sequenziale con cui, immagini, files, news o altro devono essere presentati all'utente di un sito web. Applicando il componente Sortable di jQuery UI a una GridView, abbiamo la possibilità di realizzare un'interfaccia in cui le righe possono essere spostate verso l'alto o verso il basso con semplici drag & drop del mouse.
Il Markup della GridView
Affinché possa essere utilizzata in questo contesto, la griglia deve possedere almeno due colonne, che possono essere nascoste o lasciate visibili a seconda delle esigenze di layout.- colonna id, che deve contenere gli identificativi dei record della tabella;
- colonna ordinale, destinata a contenere il numero progressivo che indica l'ordinamento sequenziale delle righe.
Oltre a questi due elementi necessari, possiamo ovviamente aggiungere tutti i campi che riteniamo opportuni.
<asp:GridView ID="GridView1" runat="server" ...> <Columns> <asp:BoundField DataField="id" HeaderText="ID" /> <asp:BoundField DataField="ordinale" HeaderText="Ordine" /> <asp:BoundField DataField="nome" HeaderText="Nome" /> </Columns> </asp:GridView>
Il codice JavaScript
Per attivare la funzionalità di drag and drop sulla griglia, sono necessarie alcune righe di codice JavaScript (oltre ad aggiungere jQuery e jQuery UI) agli script referenziati:$(function() { $("#GridView1 tbody.content").disableSelection(); $("#GridView1 tbody").addClass('content'); $("#GridView1 tbody.content").sortable(); });
Il significato delle istruzioni è il seguente:
- Con disableSelection abbiamo disabilitato la selezione del testo all'interno della griglia, altrimenti durante il drag & drop selezioneremmo anche il testo presente nelle celle, dando vita ad una certa confusione;
- Con addClass abbiamo assegnato la classe content al tag tbody della griglia, all'interno della quale possiamo per esempio impostare lo stile del cursor a move, così da mostrare il cursore del mouse più adeguato.
- Con sortable attiviamo effettivamente la possibilità di spostare le righe della griglia con il drag & drop.
Salvare il nuovo ordinamento dato alle righe
A seguito di ogni operazione di drag & drop, è necessario che il nuovo ordinamento dei dati venga inviato al server, così che possiamo memorizzarlo (per esempio in un database) e preservare l'ordinamento a ogni renderizzazione della pagina. Per farlo, possiamo avvalerci della funzione stop di Sortable di jQuery. Possiamo modificare lo script precedente in questo modo:$(function() { $("#GridView1 tbody.content").disableSelection(); $("#GridView1 tbody").addClass('content'); $("#GridView1 tbody.content").sortable({ stop: function(event, ui) { arrayId = new Array(); arrayOrdinali = new Array(); var rows = document.getElementById ('GridView1').rows; //loop sulla griglia per riscrivere l'ordine for (var index=1; index<rows.length; index++) { // Rieseguo la numerazione nel campo ordinale da 1 a n, in modo // da mostrare sempre la giusta e naturale sequenza (1,2,3,4 ....n) rows[index].cells[1].innerHTML=index; // Creo gli array delle coppie valori id record e ordinale da inviare // al server per essere riscritti sul database * arrayId[index]= rows[index].cells[0].innerHTML arrayOrdinali[index]= rows[index].cells[1].innerHTML } // Con una chiamata ad un web service si inviano al server // i due vettori di dati che possono essere processati per // salvare il nuovo ordinamento storageWebService.storeSort(arrayId, arrayOrdinali) } }); });
Nella funzione stop eseguiamo tre operazioni:
- Ricalcoliamo la numerazione del campo ordinale della griglia in modo da mostrare sempre la naturale sequenza delle righe secondo la sequenza naturale positiva da 1 a n;
- Compiliamo due vettori (arrayId, arrayOrdinali) che contengono rispettivamente, gli id dei record mostrati in griglia e la loro posizione secondo l'ordinamento;
- Come ultimo passo, possiamo invocare un web service per inviare le coppie di valori (Id Record e posizione) al server che provvederà a salvare il nuovo ordinamento.
Per quanto riguarda le modalità secondo cui possiamo esporre un web service a una pagina in modo che possa essere invocato tramite codice JavaScript, possiamo fare riferimento ai due articoli segnalati tra i riferimenti.
Riferimenti:
jQuery e ASP.NET: come realizzare applicazioni AJAX performantihttps://www.aspitalia.com/articoli/asp.net/jquery-ajax.aspx
Introduzione a Microsoft AJAX Library
https://www.aspitalia.com/articoli/asp.net2/microsoft-ajax-library-p-2.aspx
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Sfruttare i tag nell'output cache di ASP.NET Core 7
Intercettare gli eventi di creazione degli oggetti con Entity Framework 7
Specificare il numero di parentesi graffe nella string interpolation in combinazione con i string literal in C#
Sfruttare il portale Azure per creare script di automazione
Taggare automaticamente un repository con un workflow di GitHub
Installazione di una PWA Blazor
Gestire il fallimento di uno step in un workflow di GitHub
Creare Higher-Order functions in JavaScript
Le novità di .NET 7 e C# 11
Consumare un endpoint generico in Blazor
Collegare servizi a Azure Container App con i service connector
Personalizzare le richieste con i rule set di Azure Front Door
I più letti di oggi
- Sfruttare la local cache del browser tramite gli ETag in #aspnetcore https://aspit.co/cfc di @crad77 #webapi #aspnetmvc #blazor #cache
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Linting di un Dockerfile con un workflow di GitHub
- Effettuare update massivi con Entity Framework Core 7