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

• 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

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

$(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 performanti
https://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