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

Advertisements
Posted in Ajax. 5 Comments »

5 Responses to “How to use Ajax ModalPopUpExtender control ?”

  1. mubu Says:

    what is this namespace in register tag?

    • Chandra Dev Says:

      Hi,

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

  2. Shubh Says:

    really nice sir …
    you can try another example of it here this is also very helpful…
    http://www.alltechmantra.com/2013/12/how-to-use-pop-up-control-in-asp.net.html

  3. Armando Says:

    Hey very nice blog!

    • Chandra Dev Says:

      Thanks.


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 )

Google+ photo

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

Connecting to %s

%d bloggers like this: