Alan Le

Atlas: Creating a Confirmation Using the ModalPopup Extender

I've been looking into Atlas Framework recently, specifically around the idea of how to apply it to future projects. Today I want to show how to use the Modal Popup Extender found in the Atlas Control Toolkit to create a modal confirmation box.

Although, there is a ConfirmButton Extender that uses the built-in javascript confirm function, I find this type of confirmation really limiting. There is no way to customize the look and feel of the popup. The popup window size is constrained which limits the text you can write in your message. You can only have "Okay" and "Cancel" text for the buttons, when in most cases the action requested is of a "Yes\NO' type.

For my confirmation, I want the following features:

• Has to be modal
• Fully customizable with css
• Has to have "Yes" and "No" buttons
• Postback if the user clicks "Yes"
• No postback if the user clicks "No"
• Provide feedback to the user of the action taken.

ASPX Code
The code on the ModalConfirm.aspx page is fairly straightforward. I have a Panel control which will be my popup box. It contains the popup text, the Yes button, and the No button. I'm using the ModalPopupProperties on the ModalPopupExtender to configure the confirmation box. The Delete button will trigger the confirmation and the Yes/No buttons will dismiss it. When the user clicks "Yes", a javascript function called onYes will be called, and likewise when the user clicks "No".

Notice the settings for the various class attributes. This provides the flexibility to use css to style the confirmation box. Also notice the Style="display: none" attribute to hide the confirmation until the user clicks on the delete button.

<asp:Panel ID="ConfirmtionPanel" runat="server" CssClass="modalPopup" Style="display: none">
    <div class="modalPopup-text">
        Are you sure you want to delete this item?<br />
        <br />
        <asp:Button ID="YesButton" runat="server" Text="Yes" OnClick="YesButton_Click" />&nbsp;&nbsp;
        <asp:Button ID="NoButton" runat="server" Text="No" />
    </div>
</asp:Panel>
<atlastoolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server">
    <atlastoolkit:ModalPopupProperties TargetControlID="DeleteButton" PopupControlID="ConfirmtionPanel"
        OkControlID="YesButton" OnOkScript="onYes()" CancelControlID="NoButton" OnCancelScript="onNo()"
        BackgroundCssClass="modalBackground" />
</atlastoolkit:ModalPopupExtender>

ASPX Code-Behind
In the code-behind, I need to expose the asp.net client-side __doPostBack function in the Page_Load event so that I can programmatically call it from javascript later using Atlas client scripting. I also have the event handler for my YesButton_Click event which will perform the deletion by calling a middle tier object to delete the item. As a last step, I inform the user that the deletion has been performed.

    protected void Page_Load(object sender, EventArgs e)
    {
        // Expose the __doPostBack function to programmatically call it from javascript
        Page.ClientScript.GetPostBackEventReference(this, String.Empty);
    }

    protected void YesButton_Click(object sender, EventArgs e)
    {
        // Code to delete the item goes here...

        Label1.Text = "Item deleted";
    }

Javascript
I have a script block in my header. The block has the two functions that has been mentioned earlier. The onYes function creates a PostBackAction object with the target control set to the YesButton. The performAction method will call __doPostBack. The onNo function simply sets the label text.

<script type="text/javascript">
    function onYes() {
        var postBack = new Sys.WebForms.PostBackAction();
            postBack.set_target('YesButton');
            postBack.set_eventArgument('');
            
            postBack.performAction();
    }
    
    function onNo() {
        //no postback necessary
        $('Label1').innerText = 'Action canceled';
    }
</script>

Modal Confirmation Styles
Here is the corresponding styles for my confirmation box.

<style type="text/css">
body {
font:normal 10pt/13pt Arial, Verdana, Helvetica, sans-serif;
color:#666;
margin:20px;
}
    
/*Modal Popup*/
.modalBackground {
background-color:#000;
filter:alpha(opacity=80);
opacity:0.8;
}
.modalPopup img {
border:solid 5px #fff;
}
.modalPopup-text {
display:block;
color:#000;
background-color:#fff;
text-align:center;
border:solid 2px #000;
padding:10px;
}
.modalPopup-text input {
width:75px;
}    
.feedback
{
color: #00cc00;
font-weight: 700;
}
</style>

End Result

You can try it here:
http://atlas.vertigosoftware.com/atlasmodalconfirm/modalconfirm.aspx

Source Code

I have created a zip file with the source code to this sample. In order to run this sample, you will need:

• Atlas June CTP
• Atlas Control Toolkit