Nello script #999 abbiamo visto come sia semplice, tramite jQuery UI, visualizzare una finestra di dialogo. Con una minima modifica al codice, essa può essere configurata per mostrare un paio di pulsanti, Ok e Annulla, in modo da fungere da dialog di conferma:
<script type="text/javascript"> $(function() { $('#dialog').dialog({ bgiframe: true, resizable: false, height: 140, modal: true, autoOpen: false, buttons: { Ok: function() { okClicked(); $(this).dialog('close'); }, Cancel: function() { $(this).dialog('close'); } } }); } ); var onClicked; function showDialog(callback) { okClicked = new Function(callback); $('#dialog').dialog('open'); } </script> <div id="dialog">Sei sicuro di voler proseguire?</div>
In particolare, nella definizione dei due pulsanti Ok e Cancel, si ha l'opportunità di indicare il codice Javascript da eseguire alla loro pressione. Nel nostro esempio, il Cancel provoca la chiusura della finestra di dialogo, mentre un click sul pulsante Ok invoca la funzione okClicked; quest'ultima viene generata dinamicamente all'apertura della finestra di dialogo, utilizzando del codice di callback che viene fornito come argomento alla funzione showDialog.
Questa infrastruttura, anche se magari può sembrare non proprio banale, permette di gestire facilmente casi in cui, ad esempio, al click su un Button "Elimina" si vuole chiedere una conferma all'utente prima di procedere al postback. Per farlo, è infatti sufficiente configurare opportunamente la proprietà OnClientClick del pulsante da intercettare:
<asp:Button runat="server" ID="Button1" Text="Elimina!" OnClick="theButton_Click" /> <script runat="server"> public void Page_Load(object sender, EventArgs e) { this.theButton.OnClientClick = string.Format("showDialog(\"{0}\"); return false", this.ClientScript.GetPostBackEventReference(this.theButton, null)); } public void theButton_Click(object sender, EventArgs e) { // gestore server-side dell'evento } </script>
Quando l'utente effettua un click sul pulsante, viene dapprima invocata showDialog passando come argomento di callback la chiamata a __doPostBack(...) (ottenuta tramite GetPostBackEventReference); quel "return false" su OnClientClick è necessario perché showDialog ritorna immediatamente e quindi, se non ci fosse, il postback verrebbe comunque scatenato subito dopo la visualizzazione della dialog. Alla successiva pressione del tasto Ok, invece, la richiesta verrà effettivamente inviata al server per essere processata.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Recuperare un elemento inserito nella cache del browser tramite API JavaScript
Eseguire operazioni con timeout in React
Effettuare il deploy di immagini solo da container registry approvati in Kubernetes
Personalizzare l'errore del rate limiting middleware in ASP.NET Core
Utilizzare le Cache API di JavaScript per salvare elementi nella cache del browser
Short-circuiting della Pipeline in ASP.NET Core
Load test di ASP.NET Core con k6
Implementare il throttling in ASP.NET Core
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript
Generare file per il download da Blazor WebAssembly