Immaginiamo una semplice Web Form costituita da uno o più controlli di input ed un button per l'invio dei dati e salvataggio degli stessi in una base dati.
In particolari condizioni (connessione dell'utente particolarmente lenta, lunghi tempi di risposta da parte del server, ecc.) può succedere che l'utente, non percependo alcuna risposta da parte della web application, sia portato a fare nuovamente click sul bottone, scatenando un altro postback e, di conseguenza, creando inserimenti multipli nel database.
Per risolvere questo problema è necessario associare poche istruzioni JavaScript all'evento OnClientClick del button per disabilitare (lato client) il tasto all'invio del modulo (qualora l'eventuale validazione del form abbia avuto esito positivo).
Nel codice della classe corrispondente alla pagina che ospita un ipotetico button:
<asp:Button ID="Button1" runat="server" Text="Invia" />
dovremo aggiungere (ad esempio nell'evento OnLoad della pagina stessa) il seguente codice:
Button1.OnClientClick = "if(typeof(Page_ClientValidate)=='function' && !Page_ClientValidate()){return false;}" + "this.value='Attendere...';" + "this.disabled=true;" + ClientScript.GetPostBackEventReference(Button1, "") + ";";
dove il metodo "GetPostBackEventReference" della classe ClientScriptManager (referenziata dalla proprietà ClientScript della classe Page) restituisce la stringa usata nell'evento client per scatenare il postback al server.
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
Effettuare il deploy di immagini solo da container registry approvati in Kubernetes
Usare ASP.NET Core dev tunnels per testare le applicazioni su internet
Utilizzare le Cache API di JavaScript per salvare elementi nella cache del browser
Implementare il throttling in ASP.NET Core
Generare file per il download da Blazor WebAssembly
Utilizzare flat e flatMap per appiattire array innestati in array
Recuperare un elemento inserito nella cache del browser tramite API JavaScript
Eseguire operazioni con timeout in React
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript
Short-circuiting della Pipeline in ASP.NET Core