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
Implementare il throttling in ASP.NET Core
Recuperare un elemento inserito nella cache del browser tramite API JavaScript
Short-circuiting della Pipeline in ASP.NET Core
Effettuare il deploy di immagini solo da container registry approvati in Kubernetes
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript
Personalizzare l'errore del rate limiting middleware in ASP.NET Core
Eseguire operazioni con timeout in React
Load test di ASP.NET Core con k6
Generare file per il download da Blazor WebAssembly
I più letti di oggi
- Utilizzare Docker Compose con Azure App Service
- Modernizzare le applicazioni WPF e Windows Forms con Blazor
- annunciato #netstandard 2.1. .NET Core lo supporterà a partire da #netcore3, così come le prossime versione di #xamarin, #mono e #unity.il supporto per #netfx 4.8, invece, non ci sarà. https://aspit.co/bq2
- Steel Style CheckBox per Silverlight 4.0
- Utilizzare QuickGrid di Blazor con Entity Framework