Attraverso jQuery.UI è possibile sfruttare un comodo sistema, chiamato sortable, che consente di applicare facilmente il drag&drog a liste, per consentire ad esempio di decidere la posizione di una ipotetica classifica in maniera visuale.
Una volta scaricato jQuery.UI, l'aggiunta del supporto per il drag&drop ad una serie di elmenti è semplice.
Per prima cosa è necessario comporre un markup che consenta facilmente di gestire dal punto di vista visuale questo comportamento, quindi è opportuno lavorare con uno stile che indichi chiaramente che l'elemento può essere trascinati. A questo scopo si presta bene un elenco puntato:
<ul id="tutorials"> <li id="1">ASP.NET</li> <li id="3">ASP.NET 3.5</li> <li id="4">ASP.NET 4.0</li> <li id="99">Silverlight</li> <li id="15">Entity Framework</li> </ul>
Probabilmente l'ordinamento scelto dall'utente dovrà poi essere gestito lato server dalla nostra applicazione. Purtroppo, però, l'elenco puntato non viene inviato in post dal browser e pertanto diventa necessario prevedere un campo hidden in cui salvare questa informazione (nell'esempio allegato è un campo di tipo text affinché sia possibile vedere come varia al variare dell'ordinamento).
L'ID associato agli elementi è in questo caso l'ID dell'elemento all'interno del database, ma è possibile adottare tecniche alternative, l'importante è poi avere una strategia unica per salvare la posizione corrispondente nel database.
A questo punto è sufficiente scrivere un piccolo pezzo di codice che attivi l'ordinamento:
<script type="text/javascript"><!-- var setSelector = "#tutorials"; $(function() { $(setSelector).sortable({ axis: "y", cursor: "move", update: function() { getOrder(); } }); getOrder(); }); function getOrder() { $('#order').val($(setSelector).sortable("toArray")); } //--></script>
La funzione getOrder si occupa di salvare l'ordine corrente all'interno di un campo nascosto: a questo punto per inviare il valore direttamente al server è sufficiente inserire un pulsante di submit della form.
Questa tecnica è facilmente implementabile con ASP.NET grazie all'uso del controllo Repeater, che consente di produrre un markup con dati prelavati da database, sostituendo solo l'ID dove serve:
<asp:Repeater id="TutorialList" runat="server"> <HeaderTemplate> <ul id="tutorials"> </HeaderTemplate> <ItemTemplate> <li id="<%#Eval("ID")%>"><%#Eval("TutorialName")</li> </ItemTemplate> <FooterTemplate> </ul> </FooterTemplate> </asp:Repeater>
Per maggiori informazioni su jQuery:
http://tags.aspitalia.com/jQuery/
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Ottimizzare il codice JavaScript utilizzando WeakMap e WeakSet
Utilizzo di Set e Array in JavaScript
Load test di ASP.NET Core con k6
Short-circuiting della Pipeline in ASP.NET Core
Gestire la query string nell'output cache di ASP.NET Core
Sfruttare l'output cache di ASP.NET Core 7 con i controller
Raggruppare i parametri di una minimal API in un singolo oggetto in ASP.NET Core
Organizzare il codice JavaScript utilizzando i moduli
Sottoscrizione agli eventi sul contenitore in JavaScript
Catturare la telemetria degli eventi di output cache in ASP.NET Core
Implementare il throttling in ASP.NET Core
Utilizzare le Cache API di JavaScript per salvare elementi nella cache del browser
I più letti di oggi
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Utilizzare database e servizi con gli add-on di Container App
- Usare Refit e Polly in Blazor per creare client affidabili e fortemente tipizzati
- Proteggersi dagli attacchi di Open Redirect in ASP.NET Core MVC