Home / AJAX

HOW TO Use the ConfirmButton Control

RSS
Modified on 2010/01/18 05:51 by Mike Pope Categorized as Uncategorized

ConfirmButton Demonstration



ConfirmButton Description

ConfirmButton is an extender that catches clicks on a button (or on any instance of a type that is derived from Button) and displays a message to the user. If the user clicks OK, the button or link functions normally. If the user does not click OK, the click event is trapped and the button does not perform its default submit behavior. Optionally, you can specify client script to execute when the buttons are clicked in the confirm dialog box. This is useful if you use the ConfirmButton extender with a button that performs a delete operation or another task that might require confirmation from the user.

Video - How Do I: Use the ASP.NET AJAX ConfirmButton Extender?

ConfirmButton Client Code Sample

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> <style type="text/css"> .modalBackground { background-color:Gray; filter:alpha(opacity=70); opacity:0.7; } #popup { background-color:White; } </style> <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.js" type="text/javascript"></script> <script src="http://ajax.microsoft.com/ajax/beta/0911/Start.debug.js" type="text/javascript"></script> <script src="http://ajax.microsoft.com/ajax/beta/0911/extended/ExtendedControls.debug.js" type="text/javascript"></script> <script type="text/javascript"> Sys.debug = true; Sys.require([Sys.components.confirmButton, Sys.components.modalPopup], function() { $("#confirm1").confirmButton("Are you SURE?"); $("#confirm2").modalPopup({ id: "modal", PopupControlID: "popup", OkControlID: "cmdok", CancelControlID: "cmdclose", BackgroundCssClass: "modalBackground" }); $("#confirm2").confirmButton("", { displayModalPopupID: "modal", postBackScript: "alert('post')" }); }); </script> </head> <body> <form id="form1" runat="server"> <div> <input type="button" id="confirm1" value="Confirm (window.confirm)" /> <input type="button" id="confirm2" value="Confirm (modal dialog)" /> <div id="popup"> Popup Element Popup Element Popup Element Popup Element <br /> Popup Element Popup Element Popup Element Popup Element <br /> Popup Element Popup Element Popup Element Popup Element <br /> Popup Element Popup Element Popup Element Popup Element <br /> Popup Element Popup Element Popup Element Popup Element <br /> <input type="button" id="cmdok" value="OK" /> <input type="button" id="cmdclose" value="Cancel" /> </div> </div> </form> </body> </html>

ConfirmButton Client Reference

Sys.Extended.UI.ConfirmButtonBehavior Class

Events

  • showing(handler) - Adds or removes an event handler for the showing event.
    • Parameters - A function that represents the event handler.
  • hidden(handler) - Adds or removes an event handler for the hidden event.
    • Parameters - A function that represents the event handler.

Methods

  • initialize() - Initializes the ConfirmButton behavior.
  • dipose() - Disposes the ConfirmButton behavior.
  • raiseShowing(eventArgs) - Raises the showing event.
    • Parameters - A Sys.EventArgs object that represents event arguments for the showing event.
  • raiseHidden(eventArgs) - Raises the hidden event.
    • Parameters - A Sys.EventArgs object that represents event arguments for the hidden event.

Properties

  • OnClientCancel - Gets or sets a string that contains client script that executes when the Cancel button is clicked in the confirm dialog box.
  • ConfirmText - Gets or sets the confirmation text to display.
    • Remarks - HTML entities can be used, such as &#10; for a newline character.
  • ConfirmOnFormSubmit - Gets or sets a Boolean value that specifies that the confirm dialog box should not be displayed until just before the form is submitted. This is useful if the page contains ASP.NET validator controls and the confirm dialog box should be displayed only after all validation checks pass.
  • displayModalPopupID - Gets or sets a string that contains the ID of a ModalPopupBehavior control to use instead of the default window.confirm dialog box.
  • postBackScript - Gets or sets a string that contains script to run in order to initiate a postback.

Sys.Extended.UI.ConfirmButtonHiddenEventArgs Class

  • Summary - Defines arguments for the hidden event.
  • Parameters - Boolean confirmed

Properties

  • confirmed - Gets a Boolean value that indicates whether the user clicked OK.

ConfirmButton Server Code Sample

        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                
                    <asp:LinkButton ID="LinkButton" runat="server" OnClick="Button_Click">Click Me</asp:LinkButton>
                    <ajaxToolkit:ConfirmButtonExtender ID="ConfirmButtonExtender1" runat="server" 
                        TargetControlID="LinkButton"
                        ConfirmText="Are you sure you want to click the link button?" 
                        OnClientCancel="cancelClick" />
                    <br />
                    <br />
                    <asp:Button ID="Button" runat="server" Text="Click Me" OnClick="Button_Click" /><br />
                    <ajaxToolkit:ConfirmButtonExtender ID="ConfirmButtonExtender2" runat="server" 
                        TargetControlID="Button"
                        OnClientCancel="cancelClick"
                        DisplayModalPopupID="ModalPopupExtender1" />
                    <br />
                    <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Button" PopupControlID="PNL" OkControlID="ButtonOk" CancelControlID="ButtonCancel" BackgroundCssClass="modalBackground" />
                    <asp:Panel ID="PNL" runat="server" style="display:none; width:200px; background-color:White; border-width:2px; border-color:Black; border-style:solid; padding:20px;">
                        Are you sure you want to click the button?
                        <br /><br />
                        <div style="text-align:right;">
                            <asp:Button ID="ButtonOk" runat="server" Text="OK" />
                            <asp:Button ID="ButtonCancel" runat="server" Text="Cancel" />
                        </div>
                    </asp:Panel>
               
                <asp:Label ID="Label1" runat="server" />
            </ContentTemplate>
        </asp:UpdatePanel>


ConfirmButton Server Reference

The properties in italics are optional.

<ajaxToolkit:ConfirmButtonExtender ID="cbe" runat="server"
    TargetControlID="LinkButton1"
    ConfirmText="Are you sure you want to click this?"
    OnClientCancel="CancelClick" />
  • TargetControlID - The ID of the Button control to extend.
  • ConfirmText - The confirmation text to display. HTML entities can be used, such as &#10; for a newline character.
  • OnClientCancel - The client script to execute when the Cancel button is clicked in the confirm dialog box.
  • ConfirmOnFormSubmit - true if the confirm dialog box should not be displayed until just before the form is submitted. This is useful if the page contains ASP.NET validator controls and the confirm dialog box should be displayed only after all validation checks pass.
  • DisplayModalPopupID - Specifies the ID of a ModalPopup control to use to display the confirm dialog box instead of the default window.confirm window. When you use the DisplayModalPopupID property, the following conditions must be met:
    • The ModalPopup control must be configured with the same TargetControlID value as the ConfirmButton extender. (It will work properly if the ConfirmButton extender is disabled.)
    • The ModalPopup control must specify the OkControlID or the CancelControlID properties in order to identify the buttons that correspond to the the OK and Cancel buttons in the confirm dialog box.
    • The ModalPopup must not specify a OnOkScript or OnCancelScript property.



ConfirmButton Additional Code Samples