top button
Flag Notify
    Connect to us
      Facebook Login
      Site Registration Why to Join

Facebook Login
Site Registration

How to use AJAX ModalPopupExtender in ASP.NET?

+1 vote
111 views
How to use AJAX ModalPopupExtender in ASP.NET?
posted Feb 12, 2016 by Latha

Share this question
Facebook Share Button Twitter Share Button LinkedIn Share Button

1 Answer

+1 vote
 
Best answer

AJAX Control Toolkit is loaded with many control extenders and these controls extenders provide excellent features to use in ASP.NET websites and applications. These control extenders provide different functionalities for different purposes in a simple and easy way. ModalPopupExtender is one of these control extenders which is used extensively in ASP.NET website and applications. ModalPopupExtender displays a popup box according to your defined functionality and layout and disables entire page other than popup box. All other functionality on the web page will be disabled by the ModalPopupExtender and user can only use functionality provided in popup box. So it prevents user to interact with any other control in the page except the controls in popup box. This popup box can contain any control and functionality that you want to implement and you can also set its layout using style sheets. You can also set the position of the ModalPopupExtender popup box as absolute and can set the content vertical or horizontal but by default it is displayed at the center of the page.

Some important properties for ModalPopupExtender

PopupControlID: ID of control which will be appeared as popup box. This can be panel control or div tag.
TargetControlID: It is the ID of the control which will be used to activate the popup box. This can be a Button control or LinkButton control.
CancelControlID: The ID of the control which will be used to cancel the popup box.
OkControlID: The ID of the control which will be used to OK the functionality in popup box and close the popup box.
BackGroundCssClass: This property is used to define the layout in style sheet for background of the popup box.

Important properties for PopupControlID

Style=”display:none” : This is used to hide the popup control and all other controls in popup control before we need to display it.
CssClass: This is used to set the layout using style sheet for the text and controls in popup control.

1.Open Visual Studio 2010
2.File > New > Website
3.Visual basic or Visual C# > ASP.NET Empty Web Site
4.Website > Add New Item > Web Form
5.Open Toolbox > Right Click > Add Tab
6.Name the Tab As “AJAX Control Toolkit”
7.Click on Tab > Choose Items
8.Browse the “AjaxControlToolkit.dll” > Click Ok
9.I have downloaded and extracted AJAX Control Toolkit in “Ajax” folder in “C” Drive so my path to the file is “C:\Ajax\ AjaxControlToolkit.dll”
10.Open web form and add a ScriptManager control from “AJAX Extensions” tab.

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

ScriptManager control is necessary when you are using Ajax functionality in your application.

11.Add a style tag in between head tag for following CSS classes

<style type="text/css">
    .modalBackground
    {
        background-color:Gray;
    }
    .modalPopup
    {
        background-color:White;
        text-align:center;
        padding-top:20px;
        border-width: 5px;
        border-style: solid;
        border-color: black;
        width: 500px;
        height: 200px;
    }
</style>

12.Add a Button control and a Panel control and a Button control inside the Panel control. Also add a ModalPopupExtender control from “AJAX Control Toolkit. Entire code in body tag will look like as below.

<form id="form1" runat="server">

    <div>

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

        </asp:ScriptManager>

        <asp:Button ID="Button1" runat="server" Text="Create Modal Popup" />

        <asp:Panel ID="Panel1" runat="server" style="display:none" CssClass="modalPopup" >

            <h3>Welcome to AJAX Control Toolkit</h3>

            This is simple example for AJAX ModalPopupExtender

            <br />

            <br />

            <asp:Button ID="Button2" runat="server" Text="Close" />

        </asp:Panel>

        <ajax:ModalPopupExtender ID="ModalPopupExtender1" PopupControlID="Panel1" TargetControlID="Button1"

        CancelControlID="Button2" DropShadow="true" BackgroundCssClass="modalBackground" runat="server">

        </ajax:ModalPopupExtender>

    </div>

</form>

13.Now see the web site in browser

answer Feb 12, 2016 by Shivaranjini
Contact Us
+91 9880187415
sales@queryhome.net
support@queryhome.net
#280, 3rd floor, 5th Main
6th Sector, HSR Layout
Bangalore-560102
Karnataka INDIA.
QUERY HOME
...