Populating a ModalPopupExtender Dynamically

August 14, 2009

Populating a ModalPopupExtender Dynamically


In the following week Using DynamicPopulateExtender to Populate a Modal Popup Dynamically
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.


DotNetKicks Image

Add comment
facebook linkedin twitter email

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

2 comments

  1. .Net Training ClassesSeptember 2, 2009 ב 16:05

    This code is really helpful to me…
    Thanks

    .Net Training Classes
    Sharma Web Academy

    Contact Us at
    http://www.sharmawebacademy.com
    Mail Us at
    harish.solanki@sharmainfoway.com

    Reply
  2. Jeff DorothyOctober 18, 2009 ב 22:41

    how do i pass the contextKey string to GetData method from the page.

    Reply