<%@ 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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Modal Popup Demo</title>
<style>
.backgroundColor
{
background-color:Gray;
filter:alpha(opacity=25);
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Button ID="popupBtn" runat="server" Text="Click to see the modal popup." />
<asp:Panel ID="Panel1" runat="server" Style="display: none; padding:10px; border:1px; border-style:solid;" BackColor="#FF9933" Width="400px">
<h3 style="text-align: center;" id="header">Modal Popup</h3>
<p>This is a Modal Popup extender control. You are seeing this because you have clicked the hyperlink button.</p>
<p style="text-align: center;"><asp:Button ID="closeBtn" runat="server" Text="Close" /></p>
</asp:Panel>
<cc1:ModalPopupExtender ID="ModalPopupExtender" runat="server"
TargetControlID="popupBtn"
PopupControlID="Panel1"
OkControlID="closeBtn"
BackgroundCssClass="backgroundColor"
DropShadow="true"
PopupDragHandleControlID="header"/>
</div>
</form>
</body>
</html>
From the above code one can see I have a ScriptManager, an asp:Button control, an asp:Panel control, some contents inside the panel control and then we have the ModalPopupExtender control. Normally when you attach an ASP.NET panel control to a ModalPopupExtender control it will become invisible in the HTML rendered to the browser and if due to some reason if the panel control is being displayed in the page then just set the "Style" property' “display” attribute to “none” as in the above e.g. Now when you click the button you will see a popup as shown below.
using System;
using System.Collections;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
[WebService(Namespace = "http://tempuri.org/")]
/*The below attribute is needed so that the webservice can process calls from ASP.NET AJAX controls. Without the below attribute one may get the following error. "Web Service call failed: 500"*/
[System.Web.Script.Services.ScriptService]
public class Service : System.Web.Services.WebService
{
public Service ()
{
}
/*Method which will be called by the ModalPopupExtender control.*/
[WebMethod]
public string HelloWorld()
{
return "<b>Hello World</b><br/>";
}
}
The above webservice is pretty simple. It has only one web method -- the most famous of them all, the “HelloWorld” method. The method returns a HTML formatted “Hello World” string.
Web Service call failed: 500The mark up for the ModalPopupExtender control to display the webservice’ web method output is pasted below.
<!--Web service content display demo-->
<asp:Panel ID="webServicePanel" runat="server" Width="300px" Height="300" BackColor="Azure">
<asp:Label ID="webServiceContentLbl" runat="server" Text="Label"></asp:Label>
<asp:Button ID="clsBtn" runat="server" Text="Button" />
</asp:Panel>
<asp:Button ID="webServiceCall" runat="server" Text="Click to see the output of a webservice in a popup." />
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="webServiceCall" OkControlID="clsBtn" DynamicServicePath="Service.asmx" DynamicServiceMethod="HelloWorld" DynamicControlID="webServiceContentLbl"
BackgroundCssClass="backgroundColor" PopupControlID="webServicePanel" DropShadow="true">
</cc1:ModalPopupExtender>
The difference from our previous ModalPopupExtender control is that we have configured some extra properties related to webservice request. They are DynamicServicePath where we have given the URL of the web service. DynamicServiceMethod takes the web method name and finally DynamicControlID takes the ID of the control in which the output of the web method should be displayed. We have given the ID of the label control inside the panel control as the DynamicControlID. The label control will display “Hello World” string in bold.
public partial class ModalPopup : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
/// <summary>
/// Page method which will be called by the modal popup extender control.
/// </summary>
/// <returns></returns>
[System.Web.Services.WebMethod(), System.Web.Script.Services.ScriptMethodAttribute()]
public static string HelloWorld()
{
return "<b>Hello World</b><br/>";
}
}
One thing to keep in mind when you declare a method in an aspx that needs to be accessed by the ModalPopupExtender control or any ASP.NET AJAX control is to apply the following attribute.
[System.Web.Services.WebMethod(), System.Web.Script.Services.ScriptMethodAttribute()]
In addition to the above method attributes one needs to declare the method as a static method. If the method is not declared static then you may not be able to ping from the client side. In the case of web service the method need not be static. Some of the errors you may face because of not declaring the method static or because of not applying the above attributes are listed below.
1. Web Service call failed: 12030If the above two errors popup you know what to do? First check whether the method attributes are applied and second, see to it that the method is declared as static in the code behind.
2. Web Service call failed: 500
<!--Web service content display demo-->
<asp:Panel ID="webServicePanel" runat="server" Width="300px" Height="300" BackColor="Azure">
<asp:Label ID="outputContentLbl" runat="server" Text="Label"></asp:Label>
<asp:Button ID="clsBtn" runat="server" Text="Button" />
</asp:Panel>
<asp:Button ID="webServiceCall" runat="server" Text="Click to see the output of a webservice in a popup." />
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" DynamicServicePath="ModalPopup.aspx"
TargetControlID="webServiceCall" OkControlID="clsBtn" DynamicServiceMethod="HelloWorld" DynamicControlID="outputContentLbl" BackgroundCssClass="backgroundColor" PopupControlID="webServicePanel" DropShadow="true">
</cc1:ModalPopupExtender>
You can see in the above mark up everything is same except for the webservice related properties. DynamicServicePath is used to specify the url of the page. If left blank it will refer the same page. DynamicServiceMethod is the method name in the aspx/codebehind which will be pinged by the ModalPopupExtender to retrieve data. DynamicControlID is the ID of the control in which you would like to display the output of the method. DynamicControlID should have the ID of a control inside the ASP.NET Panel control in our case or any control inside whatever container control the user is making use for popup. Also if you have any argument then you can use DynamicContextKey to pass the string argument.
<asp:Button ID="popupScriptBtn" runat="server" Text="Click to view the modal popup using javascript" OnClientClick=”javascript:showModalPopup();return false;” />
<asp:Button ID="popupBtn" runat="server" Text="Click to see the modal popup." />
<div ID="div1" runat="server" >
<asp:Panel ID="Panel1" runat="server" Style="display: none; padding:10px; border:1px; border-style:solid;" BackColor="#FF9933" Width="400px">
<table id="Table1" style="background-color: #C0C0C0; width: 400px; height: 5px;"><tr><td><h3 style="text-align: center;" id="header">Modal Popup</h3></td></tr></table>
<p>This is a Modal Popup extender control. You are seeing this because you have clicked the hyperlink button.</p>
<p style="text-align: center;"><asp:Button ID="closeBtn" runat="server" Text="Close" /></p>
</asp:Panel>
</div>
<cc1:ModalPopupExtender ID="ModalPopupExtender" runat="server" TargetControlID="popupBtn"
PopupControlID="Panel1" OkControlID="closeBtn"
BackgroundCssClass="backgroundColor"
DropShadow="true" PopupDragHandleControlID="header"
CancelControlID="" Drag="true" RepositionMode="None" />
The above markup is pretty much same as the one we used at the beginning of this article. The only difference is that we have an extra ASP.NET button that shows the ModalPopupExtender control with the help of javascript. In the above markup we have used the “OnClientClick” property to assign the javascript, showModalPopup, that needs to be called when the button is clicked. The javascript to show and hide the popup is pasted below.
<script type="text/javascript" language="javascript">
//Javascript function to hide the popup control.
function closeModalPopup()
{
//Using the $find javascript method to retrieve the modal popup control.
var modalPopup = $find('<%=ModalPopupExtender.ClientID %>');
if (modalPopup != null)
{
modalPopup.hide();
}
}
//Javascript function to show the ModalPopupExtender control.
function showModalPopup()
{
//Using the $find javascript method to retrieve the modal popup control.
var modalPopup = $find('<%=ModalPopupExtender.ClientID %>');
if (modalPopup != null)
{
modalPopup.show();
}
}
</script>
Note: <%=ModalPopupExtendender.C<asp:GridView ID="backIssueGrid" runat="server" AutoGenerateColumns="False"
DataMember="issue" DataSourceID="backIssuesXML">
<RowStyle BorderColor="Tan" BorderStyle="Solid" BorderWidth="1px" />
<Columns>
<asp:TemplateField HeaderText="Back Issues" HeaderStyle-CssClass="headerText">
<ItemTemplate>
<asp:HyperLink ID="title" runat="server"
Text='<%# XPath("@title") %>' CssClass="gridText" NavigateUrl='<%# XPath("url") %>'></asp:HyperLink>
<asp:Panel ID="webServicePanel" runat="server" Width="300px" Height="300" BackColor="Azure">
<asp:Label ID="outputContentLbl" runat="server" Text="Label"></asp:Label>
<asp:Button ID="clsBtn" runat="server" Text="Button" />
</asp:Panel>
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" DynamicServicePath="ModalPopup.aspx"
TargetControlID="title" OkControlID="clsBtn"
DynamicServiceMethod="HelloWorld"
DynamicControlID="outputContentLbl"
BackgroundCssClass="backgroundColor" PopupControlID="webServicePanel"
DropShadow="true">
</cc1:ModalPopupExtender>
</ItemTemplate>
<HeaderStyle CssClass="headerText"></HeaderStyle>
<ItemStyle BorderColor="Tan" BorderStyle="Solid" BorderWidth="1px" />
</asp:TemplateField>
<asp:TemplateField HeaderStyle-CssClass="headerText">
<ItemTemplate>
<asp:TextBox ID="quantityTxt" Width="30" runat="server" Text='<%#XPath("@noOfCopies") %>' CssClass="gridText"></asp:TextBox>
</ItemTemplate>
<ItemStyle BorderColor="Tan" HorizontalAlign="Center" BorderStyle="Solid" BorderWidth="1px" />
<HeaderStyle CssClass="headerText"></HeaderStyle>
<HeaderTemplate>
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="some.gif" />
<asp:Panel ID="webServicePanel2" runat="server" Width="300px" Height="300" BackColor="Azure">
<asp:Label ID="outputContentLbl1" runat="server" Text="Label"></asp:Label>
<asp:Button ID="clsBtn" runat="server" Text="Button" />
</asp:Panel>
<cc1:ModalPopupExtender ID="ModalPopupExtender2" runat="server" DynamicServicePath="ModalPopup.aspx"
TargetControlID="ImageButton1" OkControlID="clsBtn"
DynamicServiceMethod="HelloWorld"
DynamicControlID="outputContentLbl1"
BackgroundCssClass="backgroundColor" PopupControlID="webServicePanel2"
DropShadow="true">
</cc1:ModalPopupExtender>
</HeaderTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="Label4" CssClass="gridText" runat="server" Text='<%# Add(XPath("@noOfCopies"), XPath("@price"))%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:CommandField ShowSelectButton="True" ButtonType="Button"
SelectText="Remove" ControlStyle-CssClass="buttonText" >
<ControlStyle CssClass="buttonText"></ControlStyle>
<ItemStyle BorderColor="Tan" BorderStyle="Solid" BorderWidth="1px" />
</asp:CommandField>
</Columns>
<EditRowStyle BorderStyle="Solid" />
</asp:GridView>
In the above example you can see in the markups that in the first portion I have placed a popup control in the “ItemTemplate” and hooked the ModalPopupExtender control to a hyperlink control. Pretty simple, isn’t it? In the second section I have put the popup control in the HeaderTemplate of the column and hooked it to a ImageButton. So when one clicks on the image button in the header he will see a popup. If you want you can add javascript “onmouseover” and “onmouseout” behavior to the image in the code behind by adding attributes to the ImageButton control.
<asp:GridView ID="backIssueGrid" runat="server"
AutoGenerateColumns="False" DataMember="issue"
DataSourceID="backIssuesXML">
<RowStyle BorderColor="Tan"
BorderStyle="Solid" BorderWidth="1px" />
<Columns>
<asp:TemplateField
HeaderStyle-CssClass="headerText">
<HeaderTemplate>
<asp:HyperLink ID="title"
runat="server" Text="Name" CssClass="gridText"
NavigateUrl='javascript:showModalPopup("helpOne"
);'></asp:HyperLink>
</HeaderTemplate>
<ItemTemplate>
<asp:HyperLink ID="title"
runat="server" Text='<%# XPath("@title") %>'
CssClass="gridText" NavigateUrl='<%#
XPath("url") %>'></asp:HyperLink> </ItemTemplate>
<HeaderStyle
CssClass="headerText"></HeaderStyle>
<ItemStyle BorderColor="Tan"
BorderStyle="Solid" BorderWidth="1px" /> </asp:TemplateField>
<asp:TemplateField
HeaderStyle-CssClass="headerText"> <ItemTemplate>
<asp:TextBox
ID="quantityTxt" Width="30" runat="server"
Text='<%#XPath("@noOfCopies") %>'
CssClass="gridText"></asp:TextBox>
</ItemTemplate>
<ItemStyle BorderColor="Tan"
HorizontalAlign="Center" BorderStyle="Solid"
BorderWidth="1px" />
<HeaderStyle
CssClass="headerText"></HeaderStyle>
<HeaderTemplate>
<asp:HyperLink ID="title"
runat="server" Text="Address" CssClass="gridText" NavigateUrl='javascript:showModalPopup("helpTwo"
);'></asp:HyperLink> </HeaderTemplate>
</asp:TemplateField>
<asp:CommandField
ShowSelectButton="True" ButtonType="Button"
SelectText="Remove" ControlStyle-CssClass="buttonText" >
<ControlStyle
CssClass="buttonText"></ControlStyle>
<ItemStyle BorderColor="Tan"
BorderStyle="Solid" BorderWidth="1px" />
</asp:CommandField>
</Columns>
</asp:GridView>
<asp:XmlDataSource ID="backIssuesXML"
runat="server"
DataFile="~/Data/BackIssue.xml"></asp:XmlDataSou
rce>
<asp:HyperLink ID="title" runat="server"
Style="display:none;"> </asp:HyperLink>
<asp:Panel ID="webServicePanel"
runat="server" Width="300px" Height="300"
BackColor="Azure">
<asp:Label ID="outputContentLbl"
runat="server" Text="Label"></asp:Label>
<asp:Button ID="clsBtn"
runat="server" Text="Button" />
</asp:Panel>
<cc1:ModalPopupExtender ID="ModalPopupExtender1"
runat="server" DynamicServicePath="ModalPopup.aspx"
TargetControlID="title" OkControlID="clsBtn"
DynamicServiceMethod="HelloWorld"
DynamicControlID="outputContentLbl"
BackgroundCssClass="backgroundColor" PopupControlID="webServicePanel" DropShadow="true">
</cc1:ModalPopupExtender>
The above code has ASP.NET hyper link controls in the header template that calls a javascript function using its NavigateUrl property and passes a string value to the javascript function based on which the help text is retrieved. Also as you can see we have a ModalPopupExtender control outside of GridView. A javascript function is used to show the popup control when you click the hyperlink controls inside the header template of the gridview. Also note the hyperlink control outside the GridView which has its style set to “None” so that the control becomes invisible. The javascript that is executed on clicking the hyperlink controls inside the GridView is pasted below.
//Javascript function to show the ModalPopupExtender control.
function showModalPopup(helpId)
{
var modalPopup = $find('<%=ModalPopupExtender1.ClientID %>');
if (modalPopup != null)
{
modalPopup._DynamicContextKey = helpId;
modalPopup.show();
}
}
In the above javascript we are setting the “_DynamicContextKey” with the help of the method argument. The argument is passed by the hyperlink controls in the header template of the GridView. DynamicContextKey is nothing but the string arguments to be passed to webservice/webpage method. So by varying the DynamicContextKey we can get different messages to be displayed in the ModalPopupExtender control.
[System.Web.Services.WebMethod(), System.Web.Script.Services.ScriptMethodAttribute()]
public static string HelloWorld(string contextKey)
{
return "<b>Hello World</b><br/>" + contextKey;
}
Below are some of the important javascript properties and methods of ModalPopupExtender control.
Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.
Comments (8)
Commented:
I changed DropShadow to false this morning, and I am not getting that error anymore, so this has become a non-issue. It is still a curiosity, though.
Author
Commented:Open in new window
I tried getting it using the $get method but it returned me null. Using the developer tool I was able to change the color successfully but using javascript I was not able to get the shadow div. If I get time will try to find out why this is happening.
Commented:
Author
Commented:Commented:
Im very new to this ajax controls. I just tried to get the popup. I had pasted your code as it is . It is not giving any error but if run on browser and click on the button, the popup (panel) is not being showed ;-(
Dont know where i went wrong. Should i write anything in code behind to make it work?
Please help me.
Thanks in Advance
Nandini
View More