Populating a ModalPopupExtender Dynamically
Populating a ModalPopupExtender Dynamically
In the following week 
I was asked to dynamically
populate a popup that is
created by a ModalPopupExtender.
The answer is simple. There are
two ways to that and in this post
I’ll show them both.
Building the Script Service
The first thing I did was to create a ScriptService. The service will
create dynamically the controls I want to populate the popup of
the ModalPopupExtender with. The following ScriptService will
write a div and a bold text to its GetData method callers:
/// <summary>
/// Summary description for ExampleService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
[ScriptService]
public class ExampleService : WebService
{ [WebMethod]
public string GetData(string contextKey)
{ StringBuilder sb = new StringBuilder();
using (StringWriter underlineWriter = new StringWriter(sb))
{ using (HtmlTextWriter writer = new HtmlTextWriter(underlineWriter))
{ HtmlGenericControl div = new HtmlGenericControl
{ ID = "div",
InnerText = "Some Div",
TagName = "div"
};
div.RenderControl(writer);
writer.Write("<b>Data</b>"); }
}
return sb.ToString();
}
}
I deliberately used RenderControl option and also a hard coded string
to show that you can write any control any way you want.
Building the Page – First Attempt
One option to use when we want to populate a ModalPopupExtender
dynamically is to use the DynamicPopulateExtender. This extender
helps us to dynamically populate target controls. You need to supply to
the extender the trigger for the population in the PopulateTriggerControlID,
the service that will help you to populate the control (in my example – the
ExampleService) and the TargetControlID. The following code shows a
DynamicPopulateExtender with it’s relevant properties:
<cc1:DynamicPopulateExtender ID="dpe" runat="server" TargetControlID="panelInfo"
PopulateTriggerControlID="btnDummy" ServicePath="ExampleService.asmx"
ServiceMethod="GetData" />
The following is a web page example that uses the DynamicPopulateExtender
to dynamically populate data into a ModalPopupExtender’s shown modal:
%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="TestModalDialog.WebForm2" %>
<%@ 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></title>
<style type="text/css">
.modal
{ background-color: Gray;
filter: alpha(opacity=40);
opacity: 0.7;
}
.modalPopup
{ background-color: #ffffdd;
border-width: 3px;
border-style: solid;
border-color: Gray;
padding: 3px;
width: 250px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="ExampleService.asmx" />
</Services>
</asp:ScriptManager>
<div>
<input type="button" id="btnDummy" runat="server" value="Get Data" />
<asp:Panel ID="pnlPopup" runat="server" CssClass="modalPopup">
<div>
<asp:Panel ID="panelInfo" runat="server">
</asp:Panel>
</div>
<cc1:DynamicPopulateExtender ID="dpe" runat="server" TargetControlID="panelInfo"
PopulateTriggerControlID="btnDummy" ServicePath="ExampleService.asmx" ServiceMethod="GetData" />
<div>
<asp:Button ID="btnDlgOK" runat="server" Text="OK" /></div>
</asp:Panel>
<cc1:ModalPopupExtender ID="mpeData" runat="server" OkControlID="btnDlgOK" PopupControlID="pnlPopup"
TargetControlID="btnDummy" BackgroundCssClass="modal" DropShadow="true">
</cc1:ModalPopupExtender>
</div>
</form>
</body>
</html>
Building the Page – Second Attempt
In the first example I used the DynamicPopulateExtender to populate
my modal popup. In this example I use the ModalPopupExtender’s
properties in order to do the same thing. ModalPopupExtender exposes
three properties:
- DynamicControlID – the control that will be populated dynamically.
- DynamicServicePath – the path to the ScriptService which will be used
to dynamically populate the control.
- DynamicServiceMethod – the method to call in the ScriptService.
Using these properties enables us to populate dynamically a control when a
modal pops up. The following example is doing the same like in the
first attempt but using the ModalPopupExtender’s properties:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="TestModalDialog.WebForm2" %>
<%@ 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></title>
<style type="text/css">
.modal
{ background-color: Gray;
filter: alpha(opacity=40);
opacity: 0.7;
}
.modalPopup
{ background-color: #ffffdd;
border-width: 3px;
border-style: solid;
border-color: Gray;
padding: 3px;
width: 250px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="ExampleService.asmx" />
</Services>
</asp:ScriptManager>
<div>
<input type="button" id="btnDummy" runat="server" value="Get Data" />
<asp:Panel ID="pnlPopup" runat="server" CssClass="modalPopup">
<div>
<asp:Panel ID="panelInfo" runat="server">
</asp:Panel>
</div>
<div>
<asp:Button ID="btnDlgOK" runat="server" Text="OK" /></div>
</asp:Panel>
<cc1:ModalPopupExtender ID="mpeData" runat="server" OkControlID="btnDlgOK" PopupControlID="pnlPopup"
TargetControlID="btnDummy" BackgroundCssClass="modal" DropShadow="true" DynamicControlID="panelInfo"
DynamicServiceMethod="GetData" DynamicServicePath="ExampleService.asmx">
</cc1:ModalPopupExtender>
</div>
</form>
</body>
</html>
Summary
There are two ways to dynamically populate a ModalPopupExtender.
The first way is to use the DynamicPopulateExtender. The second
way is to use the ModalPopupExtender’s properties that enables
dynamic content to show up in the modal popup.
CodeProject