Skip to main content

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.
 
By default the Confirmation Box displayed in Internet Explorer as follows
ASP.Net AJAX ConfirmButtonExtender with ModalPopupExtender Example

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.


Labels:

Comments

Post a Comment

Popular posts from this blog

How to hide url parameters in asp.net

There are different ways to Hide the URL in asp.net , you can choose any one from bellow options . Previously I was Explained about the  Difference between Convert.tostring and .tostring() method Example  ,   Reasons to use Twitter Bootstrap , How to Register AJAX toolkit in web.config file in asp.net a) Using Post Method b) Using Of Session . c) URL Encoding & decoding process . d) Using Server.Transfer() instead of Response.Redirect() method (1)Use a form and POST the information. This might require additional code in source pages, but should not require logic changes in the target pages (merely change Request.QueryString to Request.Form). While POST is not impossible to muck with, it's certainly less appealing than playing with QueryString parameters. (2)Use session variables to carry information from page to page. This is likely a more substantial effort compared to (1), because you will need to take session variable checking into account...
Post a Comment
Read more

How to send mail asynchronously in asp.net with MailMessage

With Microsoft.NET Framework 2.0 everything is asynchronous and we can send mail also asynchronously. This features is very useful when you send lots of bulk mails like offers , Discounts , Greetings . You don’t have to wait for response from mail server and you can do other task . By using     SmtpClient . SendAsync Method (MailMessage, Object)    you need to do  System.Net.Mail has also added asynchronous support for sending email. To send asynchronously, you need need to Wire up a SendCompleted event Create the SendCompleted event Call SmtpClient.SendAsync smtpClient.send() will initiate the sending on the main/ui  thread and would block.  smtpClient.SendAsync() will pick a thread from the .NET Thread Pool and execute the method on that thread. So your main UI will not hang or block . Let's create a simple example to send mail. For sending mail asynchronously you need to create a event handler that will notify that mail success...
Post a Comment
Read more

12 Sentences that Change Your Attitude at Work

If you work with the right attitude and right way, you’ll have your productivity up another level, and eventually, success will be just a step away. These are the 12 encouraging sentences that could change your attitude at work. #1 Don’t work harder, work deeper. #2 When you are young, work to learn, not to earn. #3 If you work really hard and are kind, amazing things will happen. #4 Productivity is never an accident. It is always the result of commitment to excellence, intelligent planning, and focused effort. #5 Most people work just hard enough not to get fired and get paid just enough money not to quit. #6 Boost your productivity by taking action immediately after setting a target even without perfect plans. Adjust your course along the way. #7 To be successful, the first thing to do is to fall in love with your work. #8 Identify your peak hour of productivity. Schedule your most important task for this period. Work on unimportant tasks during non-peak hours. #9 Be a mo...
Post a Comment
Read more