Confirm Message Box

• Download demo and source code - 623.75 KB

Introduction

As you might know, some actions in any web applications need user confirmation to avoid losing data (you know, a user can press delete by mistake). So, we (the developers) should provide confirmation messages that ask the user to confirm his/her request. Well, this is usually accomplished by adding the attribute:

OnClientClick="return confirm('Are you sure you want to delete this item?');"

But are you not with me, this looks a little stupid. I mean the title 'Message from web page', the icon, the OK/Cancel buttons and the whole message that is drawn by the browser, which can break the design of the whole page, take a look:

But not any more, we can provide a confirm message that uses ModalPopupExtender that can display a div or a panel as a modal dialog. See this:

For a complete implementation for MessageBox in the web, please check out Message Box Control[^].

Using the Code

Well..., using this confirm message box is so easy. In the Page Load, even you would need to find a reference to the message box, then call its RegisterButtonForConfirmation method, just like:

ConfirmMessageBox ConfirmMessageBox1 = GetConfirmMessageBox1Reference();
IButtonControl deletebutton = GetdeletebuttonReference();
ConfirmMessageBox1.RegisterButtonForConfirmation(deletebutton, text, title);

This method will add some script to onclick event to that button. This script calls the function WebForm_DoPostBackWithOptions if necessary to apply validation and other postback options, and also AcceptDialog() functions which opens the confirmation dialog.

ConfirmMessageBox also provides an AutoPstBack property to perform some actions at server like saving transactions. You can also give the message box the style you want by defining the CSS classes in ConfirmMessageBox.css.

So, Where is the Trick?

The trick is in OpenDialog() and AcceptDialog() functions; first: OpenDialog() returns false to prevent posting back the link button:

OpenDialog: function(text, title, callingbuttonid) {
        $get(this.get_element().id + '_h_callingbuttonid').value = callingbuttonid;
        $get(this.get_element().id + '_lblTitle').innerText = title;
        $get(this.get_element().id + '_lblText').innerText = text;

        $find(this.get_element().id + '_extConfirmMessage').show();
        $get(this.get_element().id + '_cmdYes').focus();

        return false;
    },

And AcceptDialog() refires the postback reference of the link button:

AcceptDialog: function() {
    var callingbuttonid = $get(this.get_element().id + '_h_callingbuttonid').value;
    var callingbutton = $get(callingbuttonid);

    // raise postback event
    // Link buttons.
    if (callingbutton.tagName.toLowerCase() == 'a')
        window.location.href = callingbutton.href;
    // other buttons.
    else if (callingbutton.tagName.toLowerCase() == 'input') {
        var theForm = document.forms['form1'];
        if (!theForm) {
            theForm = document.form1;
        }

        var eventTarget = callingbutton.name;
        var eventArgument = '';
        if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
            theForm.__EVENTTARGET.value = eventTarget;
            theForm.__EVENTARGUMENT.value = eventArgument;
            theForm.submit();
        }
    }

    $get(this.get_element().id + '_h_callingbuttonid').value = '';
    $find(this.get_element().id + '_extConfirmMessage').hide();
},   

History

• Saturday, April 16, 2011: First version
• Saturday, April 23, 2011: Handled postback options
• Monday, June 13, 2011: Added a link to Message Box Control