This example demonstrates how to use the ContentUrl
property to specify the pop-up window's content, pass a parameter from the content to parent page, and close the pop-up window.
Overview
On the parent page, create a popup control and specify its ContentUrl property. Add a button edit component to the page and handle its client-side ButtonClick
event to invoke a pop-up window.
ASPx<dx:ASPxPopupControl id="ASPxPopupControl1" runat="server" clientinstancename="ASPxPopupControl1"
ContentUrl="~/ContentUrlPage.aspx">
<ContentCollection>
<dx:PopupControlContentControl ID="PopupControlContentControl1" runat="server" />
</ContentCollection>
</dx:ASPxPopupControl>
<dx:ASPxButtonEdit ID="ASPxButtonEdit1" runat="server" ClientInstanceName="ASPxButtonEdit1">
<Buttons>
<dxe:EditButton />
</Buttons>
<ClientSideEvents ButtonClick="function(s, e) {
ASPxPopupControl1.Show();
}" />
</dx:ASPxButtonEdit>
On the ContentUrlPage, create a panel and populate it with a text box editor and a button. On a button click, pass the editor's value as a parameter to the SelectAndClosePopup function on the parent page. This function assigns the editor's value to the button edit control and hides the pop-up window.
ASPx<dx:ASPxPanel ID="ASPxPanel1" runat="server" DefaultButton="ASPxButton1" Width="200px">
<PanelCollection>
<dxp:PanelContent runat="server">
<dx:ASPxTextBox ID="ASPxTextBox1" runat="server" ClientInstanceName="ASPxTextBox1" />
<br />
<dx:ASPxButton ID="ASPxButton1" runat="server" AutoPostBack="False"
Text="Return To Parent Page">
<ClientSideEvents Click="ReturnToParentPage" />
</dxe:ASPxButton>
</dxp:PanelContent>
</PanelCollection>
</dx:ASPxPanel>
JavaScriptfunction ReturnToParentPage() {
var parentWindow = window.parent;
parentWindow.SelectAndClosePopup(ASPxTextBox1.GetValue());
}
JavaScriptfunction SelectAndClosePopup(value){
ASPxButtonEdit1.SetValue(value);
ASPxPopupControl1.Hide();
}
Files to Review
More Examples
- How to return values from the ASPxPopupControl's ContentUrl page and close the popup on both client and server sides
- How to return values from the ASPxPopupControl's ContentCollection and close the popup on both client and server sides
Example Code
ASPx<%-- BeginRegion Page setup --%>
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="PassParamToContentUrlPage" %>
<%@ Register Assembly="DevExpress.Web.v13.1" Namespace="DevExpress.Web"
TagPrefix="dxe" %>
<%@ Register Assembly="DevExpress.Web.v13.1" Namespace="DevExpress.Web"
TagPrefix="dxpc" %>
<%@ Register Assembly="System.Web, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"
Namespace="System.Web.UI" TagPrefix="cc1" %>
<%-- EndRegion --%>
<!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>PopupControl - How to pass parameter to Parent Window (from ContentUrl page) and close PopupControl</title>
<script type="text/javascript">
function SelectAndClosePopup(value){
ASPxButtonEdit1.SetValue(value);
ASPxPopupControl1.Hide();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<dxpc:aspxpopupcontrol id="ASPxPopupControl1" runat="server" clientinstancename="ASPxPopupControl1"
closeaction="CloseButton" contenturl="~/ContentUrlPage.aspx" height="183px"
width="394px" Modal="True" PopupAction="None" PopupElementID="ASPxButtonEdit1" PopupHorizontalAlign="LeftSides" PopupVerticalAlign="Below"><ContentCollection>
<dxpc:PopupControlContentControl ID="PopupControlContentControl1" runat="server"></dxpc:PopupControlContentControl>
</ContentCollection>
</dxpc:aspxpopupcontrol>
<dxe:ASPxButtonEdit ID="ASPxButtonEdit1" runat="server" ClientInstanceName="ASPxButtonEdit1"><Buttons>
<dxe:EditButton>
</dxe:EditButton>
</Buttons>
<ClientSideEvents ButtonClick="function(s, e) {
ASPxPopupControl1.Show();
}" />
</dxe:ASPxButtonEdit>
</form>
</body>
</html>
ASPx<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ContentUrlPage.aspx.cs" Inherits="ContentUrlPage" %>
<%@ Register Assembly="DevExpress.Web.v13.1" Namespace="DevExpress.Web"
TagPrefix="dxp" %>
<%@ Register Assembly="DevExpress.Web.v13.1" Namespace="DevExpress.Web"
TagPrefix="dxe" %>
<!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>Untitled Page</title>
<script type="text/javascript">
function ReturnToParentPage() {
var parentWindow = window.parent;
parentWindow.SelectAndClosePopup(ASPxTextBox1.GetValue());
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<dxp:ASPxPanel ID="ASPxPanel1" runat="server" DefaultButton="ASPxButton1" Width="200px">
<PanelCollection>
<dxp:PanelContent runat="server">
<dxe:ASPxTextBox ID="ASPxTextBox1" runat="server" Width="170px" Text="test value" ClientInstanceName="ASPxTextBox1" />
<br />
<dxe:ASPxButton ID="ASPxButton1" runat="server" AutoPostBack="False" Text="Return To Parent Page">
<ClientSideEvents Click="ReturnToParentPage" />
</dxe:ASPxButton>
</dxp:PanelContent>
</PanelCollection>
</dxp:ASPxPanel>
</div>
</form>
</body>
</html>