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
Gestione dei nomi con le regole @layer in CSS
Bloccare l'esecuzione di un pod in mancanza di un'artifact attestation di GitHub
Gestire progetti NPM in .NET Aspire
Change tracking e composition in Entity Framework
Recuperare App Service cancellati su Azure
Abilitare automaticamente il force push di un gruppo su Azure DevOps
Aggiornare a .NET 9 su Azure App Service
Managed deployment strategy in Azure DevOps
Creare una libreria CSS universale: Nav menu
Ricevere notifiche sui test con Azure Load Testing
Applicare un filtro per recuperare alcune issue di GitHub
Persistere la ChatHistory di Semantic Kernel in ASP.NET Core Web API per GPT
I più letti di oggi
- Gestione ciclo di vita in .NET Aspire
- Sfruttare i nuovi overload di TimeSpan.From* per creare timespan usando numeri interi
- vuoi scoprire tutte le novità per #wpdev in #wp81? iscriviti subito al nostro evento dell'08/07 a Milano! https://aspit.co/wp81-day
- #MAUI per sviluppare applicazioni #Windows e #XPlatf con #net5 con @leoncini117 Seguiteci live su #aspilive da https://aspit.co/ReBuild-20
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Centralizzare gli endpoint AI Foundry con Azure API Management