How to use Ajax ModalPopUpExtender control ?


Hi

Here is the simple steps to configure this control

Step 1: Take a ScriptManager ajax control

step 2: Take a ModalPopupExtender  ajax control

Step 3:Configure the ModalPopupExtender like this

<cc1:ModalPopupExtender
ID=”ModalPopUpExtender”
runat=”server”
TargetControlID=”Button”
PopupControlID=”Panel1″
CancelControlID=”btnCancel” />

The complete asp.net html page is like this

<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”ModalPopUp.aspx.cs” Inherits=”ModalPopUp” %>

<%@ Register assembly=”AjaxControlToolkit” namespace=”AjaxControlToolkit” tagprefix=”cc1″ %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head runat=”server”>
<title></title>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>

<asp:ScriptManager ID=”ScriptManager1″ runat=”server”/>

<cc1:ModalPopupExtender
ID=”ModalPopUpExtender”
runat=”server”
TargetControlID=”Button”
PopupControlID=”Panel1″
CancelControlID=”btnCancel” />

<asp:Button
ID=”Button”
runat=”server”
Text=”Click Here”
onclick=”Button_Click” />

<asp:Panel ID=”Panel1″
runat=”server”
Height=”100px”
Width=”125px”
BorderColor=”blue”
BorderWidth=”10px”>

<asp:RadioButtonList
ID=”RadioButtonList1″
runat=”server”>

<asp:ListItem Value=”1″>Asp.net</asp:ListItem>

<asp:ListItem Value=”2″>C#</asp:ListItem>

<asp:ListItem Value=”3″>SQL Server</asp:ListItem>

</asp:RadioButtonList>

<asp:Button
ID=”btnCancel”
runat=”server”
Text=”Cancel” />

</asp:Panel>

</div>
</form>
</body>
</html>

Now Compile the page. You will see page like this

Advertisement

5 thoughts on “How to use Ajax ModalPopUpExtender control ?

  1. mubu June 13, 2012 / 11:09 am

    what is this namespace in register tag?

    • Chandra Dev June 17, 2012 / 11:25 am

      Hi,

      If you will drag and drop this control then that namespace will come. so no need to bother about this.

  2. Armando April 26, 2014 / 3:37 am

    Hey very nice blog!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.