How to show modal Dialog panel in asp.net? (In normal asp.net pages or in Master Child Asp.net web applications)

Show only a dialog panel disabling the other part of the page by pressing a button.
In this article i will show how can we use this feature for displaying a image and set background disabled.
This will be a very good tutorial for learning one more feature of Ajax.
Even grid and different other data can be shown on the modal dialog where then user can do some work and close the dialog box.

First you have to download Ajax control toolkit for Asp.net 2.0



Now add the reference AjaxControlToolKit.dll to your web project. Learn how to develop a web application with Asp Master Pages

Please look at the image below and I will explain on how this works:



In the image I have done the following:

First of all i have registered AjaxControlToolKit and prefix it by cc1

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


I have added Script manager in between the content template of the detail page.

asp:ScriptManager ID="ScriptManager1" runat="server">
/asp:ScriptManager>

I have added two button because btnShowPopup will run for ModalPopupExtender as a client side control. Therefore i have disabled it. The other button btnTest is our control where we write the code to show the modal dialog panel or load any required data in the modal dialog panel and show the dialog.

asp:Button ID="btnTest" runat="server" Text="TestPopup" OnClick="btnTest_Click" />

asp:Button id="btnShowPopup" runat="server" style="display:none" />

Now I have added ModalPopupExtender from ajax tool kit and named it mdlPopup and it has targetcontrolID as btnshowpopup and popupcontrolID which it will show is pnlImage. Finally btnClose will close the modal

cc1:ModalPopupExtender ID="mdlPopup" runat="server"
TargetControlID="btnShowPopup" PopupControlID="pnlImage"
CancelControlID="btnClose"
BackgroundCssClass="modalBackground">/cc1:ModalPopupExtender>

Now put the Panel where we want to display the modal and make it invisible at the beginning.

asp:Panel ID="pnlImage" runat="server" style="display:none;">
asp:UpdatePanel ID="upCities" runat="server" UpdateMode="Conditional">
ContentTemplate>

Now put the label for Image name and the image and close the content template and update panel

asp:Label ID="lblImg" runat="server" Text="This is My Image">/asp:Label>
asp:Image ID="Image1" ImageUrl="~/images/logo.gif" runat="server" />

/ContentTemplate>
/asp:UpdatePanel>

Now put the button that closes the dialog

asp:Button ID="btnClose" runat="server" Text="Close" Width="50px" />

Now close the panel tag
/asp:Panel>


Now try running your application should work sweetly. Enjoy coding

Related Posts by Categories