01 April 2010

Web 2.0 pop-up dialog using Ajax Control Toolkit

Tired of using the old boring Windows Xp style JavaScript pop-ups to get user confirmation on a web page?

 Then you have come to the right place cause i will just show you how easy it is to create a customized Vista type confirm dialog using the Ajax Control Toolkit and ASP.NET 2.0 or greater.

There's absolutely no need to know any hard core JavaScript here !!

So here are the steps:


Step 1: Install the Ajax Control Toolkit on your machine if  already not done. Start your web application and add the Ajax Control Toolkit dll to your bin folder.


Step 2: Include the following  the reference on your page

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


Alternative if you have configured your Toolbox then simply ignore the step 1,2 and go directly to step 3.


Step 3: Now you would require to add a asp:Panel on your page that will hold the HTML required for the popup screen.  ex:


<asp:Panel ID="PanelDeleteAlert" runat="server" CssClass="confirmBox"
Style="display: none;width: 300px;">
           <div id="confirmHeader">
               <span>Confirm</span></div>
           <div id="confirmMsg" align="center">
               <div class="rowdiv">
                   <div class="celldiv">
                       <img src="../images/confirm.gif" alt="" /></div>
                   <div class="celldiv">
                       <span>Delete<asp:Label ID="lblDeleteName"
runat="server" Font-Bold="true" Text="Do you want to delete this?"></asp:Label>
                           from contact list?</span></div>
               </div>
           </div>
           <div id="confirmButtons">
               <asp:Button ID="ButtonOk2" runat="server" Text="OK"
CssClass="button" />
               <asp:Button ID="ButtonCancel2" runat="server"
Text="Cancel" CssClass="button" />
           </div>
</asp:Panel>


Step 4: Now you need a LinkButton/Button on who's click you need to show the pop-up, an ConfirmButtonExtender & an ModalPopupExtenderfrom from Toolkit. Configure these as follows:

<div style="float: right">
       <asp:LinkButton ID="butDelete" OnClick="butDelete_Click"
runat="server" CssClass="linktext"  Text="Delete Contact"></asp:LinkButton>
       <cc1:ConfirmButtonExtender ID="ConfirmButtonExtender2"
runat="server" TargetControlID="butDelete"  ConfirmText="Do you want to delete this
contact?" DisplayModalPopupID="ModalPopupExtender2" Enabled="True">
                   </cc1:ConfirmButtonExtender>
       <cc1:ModalPopupExtender ID="ModalPopupExtender2"
runat="server" TargetControlID="butDelete"  PopupControlID="PanelDeleteAlert"
OkControlID="ButtonOk2" CancelControlID="ButtonCancel2" BackgroundCssClass="modalBackground" />
</div>

Step 5: You need to create proper CSS for the Panel and  for the background when the Pop-up is open. You can use your imagination for designing the Panel and for the Background you can use the following CSS

/*Modal Popup*/

.modalBackground {
    background-color:Gray;

    filter:alpha(opacity=70);
    opacity:0.7;

}


.modalPopup {

    background-color:#ffffdd;

    border-width:3px;

    border-style:solid;

    border-color:Gray;

    padding:3px;

    width:250px;

}

Step 6: That's it go ahead and test your application


So as you can see using your own imagination and some good CSS techniques , you can come up with a really neat looking confirmation dialog!!