CONFIRMATION BOX WITH YES NO BUTTONS USING AJAX MODAL POPUP EXTENDER IN ASP.NET

Here  I am explained with an example , how to built a confirmation box (confirm box) with Yes , No Buttons or Options using AJAX Control Toolkit ModalPopupExtender control Modal Popup in ASP.Net

In this article, I will explain how to use ASP.Net AJAX Control Toolkit ConfirmButtonExtender with ModalPopupExtender Modal Popup in order to style the ConfirmButtonExtender dialog and also to make it look same in all browsers.

Previous Post  I was Explained about the  jQuery - Allow Alphanumeric (Alphabets & Numbers) Characters in Textbox using JavaScript , Fileupload show selected file in label when file selected , Check for file size with JavaScript before uploading, Show jQuery UI Dialog Popup Window from Server Side ( Code Behind ) in ASP.Net , How to use the window.open()  method

 

By default the Confirmation Box displayed in Internet Explorer as follows

In the following example I will make use of a dummy Button with Confirmation Box using ConfirmButtonExtender with ModalPopupExtender Modal Popup.

HTML Markup

First we need to register the AJAX Control Toolkit on the page

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

Below is an ASP.Net Button with associated ConfirmButtonExtender and ModalPopupExtender for displaying the confirmation box.

  <asp:Button runat="server" Width="130px" Text="Book Room" ID="btnSubmit" OnClick="btnSubmit_Click"
                                            ToolTip="Click To Book Rooms" />

 <ajaxToolkit:ConfirmButtonExtender ID="cbe" runat="server" DisplayModalPopupID="mpe"
            TargetControlID="btnSubmit" ConfirmText="Are you sure you want to Book Room Now?" />
                    <ajaxToolkit:ModalPopupExtender ID="mpe" runat="server" PopupControlID="pnlPopup"
                                TargetControlID="btnSubmit" OkControlID="btnYes" CancelControlID="btnNo" BackgroundCssClass="modalBackground">
                                        </ajaxToolkit:ModalPopupExtender>
           <asp:Panel ID="pnlPopup" runat="server" CssClass="modalPopupConfirm" Style="display: none">
                                            <div class="header">
                                                Confirmation Details
                                            </div>
                                            <div class="body">
                                         <span class="ui-icon ui-icon-alert" style="margin: 8px 8px 0px 10px; float: left;">
                                                </span>Are you sure you want to Book Room(s) now ?
                                            </div>
                                            <div class="footer" align="right">
                                                <asp:Button ID="btnYes" runat="server" Text="Yes" />
                                                <asp:Button ID="btnNo" runat="server" Text="No" />
                                            </div>
                                        </asp:Panel> 

In order to associate a ConfirmButtonExtender with ModalPopupExtender we need to set the following properties

1. TargetControlID – The TargetControlID of both the ConfirmButtonExtender with ModalPopupExtender must be equal.

2. DisplayModalPopupID – The DisplayModalPopupID property of the ConfirmButtonExtender must be set with the ID ModalPopupExtender Modal Popup that we need to display as Confirmation Box.

3. OkControlID and CancelControlID – Since we want the ModalPopupExtender Modal Popup to work as Confirmation Box, it is necessary that we have two buttons one for OK and one for Cancel.

The above three points are necessary so that when the Target Control of the ConfirmButtonExtender is triggered the ModalPopupExtender Modal Popup is displayed.

For more details on using the ASP.Net AJAX ModalPopupExtender please refer article Building Modal Popup using ASP.Net AJAX ModalPopupExtender Control

 

 Model PopUp Style :

<style type="text/css">
        .modalPopupConfirm
        {
            background-color: #FFFFFF;
            width: 300px;
            border: 3px solid #0DA9D0;
        }
        .modalPopupConfirm .header
        {
            background-color: #2FBDF1;
            height: 30px;
            color: White;
            line-height: 30px;
            text-align: center;
            font-weight: bold;
            width: 300px;
        }
        .modalPopupConfirm .body
        {
            min-height: 50px;
            line-height: 30px;
            font-weight: bold;
        }
        .modalPopupConfirm .footer
        {
            padding: 3px;
        }
        .modalPopupConfirm .yes, .modalPopup .no
        {
            height: 23px;
            color: White;
            line-height: 23px;
            text-align: center;
            font-weight: bold;
            cursor: pointer;
        }
        .modalPopupConfirm .yes
        {
            background-color: #2FBDF1;
            border: 1px solid #0DA9D0;
        }
        .modalPopupConfirm .no
        {
            background-color: #9F9F9F;
            border: 1px solid #5C5C5C;
        }
    </style>

Out Put :

I hope this will be helpful for you. I would like to have any feedback from you.  Your valuable feedback, question, or comments about this article are always welcome.