Una tipica esigenza di quando si sviluppano applicazioni che sfruttano AJAX, è quella di intercettare gli eventi di inizio, fine e errore nell'ambito di una chiamata out of bound. Gli scopi sono molteplici, ad esempio quello di mostrare un pannello di loading oppure per centralizzare la gestione degli errori.
ASP.NET MVC, dalla versione 3, sfrutta jQuery per effettuare questo tipo di invocazioni e, pertanto, possiamo utilizzare gli handler standard di jQuery, ad esempio ajaxStart, ajaxStop e ajaxError:
$(function () { // AJAX global hooks $(document).ajaxStart(function () { $('#loadingMessage').show(); }); $(document).ajaxStop(function () { $('#loadingMessage').hide(); }); $(document).ajaxError(function () { alert('Si è verificato un errore durante la comunicazione, riprovare!'); }); });
In particolare, gli eventi ajaxStart e ajaxStop sono ideali per gestire la visualizzazione di un messaggio di loading (un div "loadingMessage" nel nostro caso), in quanto gestiscono anche più request contemporanee e vengono scatenati, rispettivamente, all'inizio della prima chiamata AJAX e al termine dell'ultima, a prescindere che si siano concluse con un errore, che siano state annullate o abbiano avuto successo.
Questa tecnica, seppure molto comoda, ha il difetto però di intercettare indistintamente tutte le chiamate che sfruttano il metodo $.ajax e, pertanto, se ad esempio abbiamo in pagina un autocomplete di jQuery UI, anche quello scatenerà la visualizzazione del pannello di loading. Nel caso in cui vogliamo circoscrivere questo comportamento solo ad alcune tipologie di chiamate, dobbiamo sfruttare gli eventi ajaxSend e ajaxComplete, che espongono anche l'informazione dell'URL invocato. Supponiamo, ad esempio, di avere in pagina uno o più ActionLink come quello in basso:
@Ajax.ActionLink("link", "AjaxTest", new AjaxOptions() { UpdateTargetId = "targetdiv" }) <div id="targetdiv"> </div>
Se vogliamo visualizzare il pannello di loading solo in corrispondenza di queste tipologie di chiamate, ed escludere tutte le altre, possiamo sfruttare il codice javascript seguente:
$(function () { $(document).ajaxSend(function (event, xhr, options) { if (options.data !== null && options.data.indexOf('X-Requested-With=XMLHttpRequest') > -1) { $('#loader').show(); } }); $(document).ajaxComplete(function (event, xhr, options) { if (options.data !== null && options.data.indexOf('X-Requested-With=XMLHttpRequest') > -1) { $('#loader').hide(); } }); });
In particolare, nel nostro caso, possiamo verificare che nell'URL della chiamata sia presente la chiave di querystring X-Requested-With=XMLHttpRequest che viene aggiunta dall'helper Ajax.ActionLink.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Log streaming di una Azure Container App
Impostare il contenuto dell'head all'interno di ogni pagina Blazor
Leggere la configurazione da Azure KeyVault con logica di retry in ASP.NET Core
Montare blob e file share su Azure App Service
Ottimizzare il codice JavaScript con i Shorthand Patterns - terza parte
Impostare il tema light o dark utilizzando i CSS
Consumare un endpoint generico in Blazor
Dichiarare una variabile in JavaScript con le parole chiave var, let e const
Impostare il forward degli header in un sito ASP.NET Core dietro a un reverse proxy
Gestire il fallimento di uno step in un workflow di GitHub
Usare il throttling per limitare la frequenza degli eventi in Blazor
YARP: un reverse proxy in ASP.NET Core
I più letti di oggi
- ASP.NET MVC, Aree e Controller: risolvere le ambiguità
- Raggruppare i parametri di una minimal API in un singolo oggetto in ASP.NET Core
- Gestire tipi complessi in query string grazie a IParsable in ASP.NET Core 7.0
- Leggere e scrivere su cookie tramite Blazor
- Migliorare la scalabilità di ASP.NET Core 7 grazie all'output cache
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!