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
Load test di ASP.NET Core con k6
Recuperare un elemento inserito nella cache del browser tramite API JavaScript
Eseguire operazioni con timeout in React
Short-circuiting della Pipeline in ASP.NET Core
Implementare il throttling in ASP.NET Core
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript
Utilizzare le Cache API di JavaScript per salvare elementi nella cache del browser
Effettuare il deploy di immagini solo da container registry approvati in Kubernetes
Generare file per il download da Blazor WebAssembly
Personalizzare l'errore del rate limiting middleware in ASP.NET Core
I più letti di oggi
- Paginare i risultati con QuickGrid in Blazor
- Eliminare una determinata proprietà da un oggetto JavaScript
- Utilizzare il trigger SQL con le Azure Function
- Low code e pro code: come estendere Power Platform con .NET e Visual Studio
- Modernizzare le applicazioni WPF e Windows Forms con Blazor
- Q# for Quantum Programming, an "only for the brave" session