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.