ConfirmButtonExtender Control With AJAX Using ASP.NET

Article

Introduction

The ConfirmButtonExtender control is used for confirmation messages. In any application, if there is a need to update or delete important data, then the programmer adds a confirmation message so that if user is doing this by mistake then he can see the alert message. Like - " Are you sure? " or " Do you want to delete ? ", etc. Actually the programmer is ensuring that the user does not mistakenly make changes to important data. So, the ConfirmButtonExtender control is best for those situations where this type of problem can occur. By using the ConfirmButtonExtender control you can add this facility to Buttons. Here are the properties of the ConfirmButtonExtender of which we will use in our application.

TargetControlID : It is used to set the ID of the control which is to be attached with ConfirmButtonExtender.
ConfirmText : It sets the alert message which is to be displayed as the confirmation message.
OnClientCancel : It specifies the client-side script that executes when the user clicks the cancel button in the confirmation dialog.

Now we use this control in our application. Use the following steps.

Step 1 : Open Visual Studio 2010 and take a ASP.NET Web Application.

Step 2 : At first, go to the Toolbox and take a ScriptManager to use AJAX controls.

Step 3 : Go to the Toolbox and take two Labels, one Button and one RadiButtonList and put it in the Panel.

Code on .aspx page

   <div>
        <asp:Panel ID="Panel1" CssClass="background" runat="server">
        <asp:RadioButtonList ID="rbl" runat="server" Font-Bold="True" ForeColor="Red" Font-Size="15pt"
                Width="166px">
            <asp:ListItem>Black</asp:ListItem>
            <asp:ListItem>Red</asp:ListItem>
            <asp:ListItem>Green</asp:ListItem>
            <asp:ListItem>Yellow</asp:ListItem>
            <asp:ListItem>Blue</asp:ListItem>
            <asp:ListItem>Pink</asp:ListItem>
            <asp:ListItem>White</asp:ListItem>
       </asp:RadioButtonList>
       </asp:Panel>
       <asp:Button ID="btn" Width="100" Height="40" Font-Bold="true" Font-Size="18" Text="Delete" ForeColor="Green" runat="server" onclick="btn_Click" /><br /><br />
        <asp:Label ID="lbl1" Text="You have deleted :" Font-Size="15" ForeColor="Red" runat="server"></asp:Label>
        <asp:Label ID="lbl2" Text=" " Font-Size="15" ForeColor="Red" runat="server"></asp:Label>
    </div>

Step 4 : Go to the Toolbox and take a ConfirmButtonExtender control.

Code on .aspx page

<asp:ConfirmButtonExtender ID="ConfirmButtonExtender1" runat="server">
        </asp:ConfirmButtonExtender>

Step 5 : Set the properties of ConfirmButtonExtendercontrol.

<asp:ConfirmButtonExtender ID="ConfirmButtonExtender1" TargetControlID="btn" ConfirmText="Are you sure ?" OnClientCancel="CancelClick" runat="server">
        </asp:ConfirmButtonExtender>

Step 6 : Write the following code on the click event of the Button.

protected void btn_Click(object sender, EventArgs e)
        {
            lbl2.Text = rbl.SelectedValue.ToString();
        }

Code on .aspx page

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
    .background
    {
        width:auto;
        height:auto;
        padding:0 23px;
        float:left;
        color:inherit;
        background:#252525
     }
    </style>
    <script type="text/javascript">
        function CancelClick() {
            document.getElementById("<%=lbl2.ClientID %>").innerHTML = "None";
        }
</script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <asp:Panel ID="Panel1" CssClass="background" runat="server">
        <asp:RadioButtonList ID="rbl" runat="server" Font-Bold="True" ForeColor="Red" Font-Size="15pt"
                Width="166px">
            <asp:ListItem>Black</asp:ListItem>
            <asp:ListItem>Red</asp:ListItem>
            <asp:ListItem>Green</asp:ListItem>
            <asp:ListItem>Yellow</asp:ListItem>
            <asp:ListItem>Blue</asp:ListItem>
            <asp:ListItem>Pink</asp:ListItem>
            <asp:ListItem>White</asp:ListItem>
       </asp:RadioButtonList>
       </asp:Panel>

       <asp:Button ID="btn" Width="100" Height="40" Font-Bold="true" Font-Size="18" Text="Delete" ForeColor="Green" runat="server" onclick="btn_Click" /><br /><br />
        <asp:Label ID="lbl1" Text="You have deleted :" Font-Size="15" ForeColor="Red" runat="server"></asp:Label>
        <asp:Label ID="lbl2" Text=" " Font-Size="15" ForeColor="Red" runat="server"></asp:Label>
        <asp:ConfirmButtonExtender ID="ConfirmButtonExtender1" TargetControlID="btn" ConfirmText="R u sure ?" OnClientCancel="CancelClick" runat="server">
        </asp:ConfirmButtonExtender>

    </div>
    </form>
</body>
</html>

Now run the application.
Output

Choose a color to delete ( It will not delete the selected color. I am only describing how it works.)

Click the delete button. You will see a confirmation message.

Click the "ok" button. The output will look like the following figure.

Again run the application -> Select a color and click the "Delete" button. When the confirmation message appears, click the "Cancel" button. The output will look as in the following figure.