Passing data into a ModalPopupExtender

Question

I have a ModalPopupExtender that allows a customer to apply payment info. It has been working great. Then the customer asked to see the total due on the ModalPopup. This did not seem like a big deal to just take the total due from the parent control and pass it into the ModalPopup control. It seems like there is no easy way do to this.

Here is my HTML code, keep in mind this code is wrapped in a UpdatePanel

<asp:LinkButton ID="lnkMakePayment" runat="server" Visible="true" OnClick="lnkMakePayment_Click" >

<asp:Label ID="lblMakePayment" runat="server" Text="Make Payment"/></asp:LinkButton>

<asp:Button ID="btnDummy" style="display: none;" runat="server" 
            OnClick="btnDummy_Click" />

<ajaxToolkit:ModalPopupExtender ID="mdlPopupPayment" runat="server" 
 TargetControlID="btnDummy" PopupControlID="pnlMakePayment"
 CancelControlID="popUpCancel" DropShadow="true" BackgroundCssClass="modalBackground">
</ajaxToolkit:ModalPopupExtender>

 <asp:Panel ID="pnlMakePayment" runat="server" Style="display: none;"
            SkinID="PopUpPanel" class="ContentBoxColor" Width="400px" Height="170px">
    <MP1:MakePaymentPopup ID="MakePayment"  runat="server" />
    <div style="text-align: right; width: 100%; margin-top: 5px;">
       <asp:Button ID="popUpCancel" runat="server" Text="Cancel" Width="0px" />
    </div>
 </asp:Panel>

Now here is the codebehind

protected void btnDummy_Click(object sender, EventArgs e) { }

protected void lnkMakePayment_Click(object sender, EventArgs e)
{
    mdlPopupPayment.Show();
} 

So when the user clicks the make payment link the ModalPopup works fine. And it even fires an event that the parent control listens for to apply payment info and all the associated payment details that the user fills out in the popup. Again this all works fine.

My first attempt at sending the total due to the ModalPopup is as follows:

protected void lnkMakePayment_Click(object sender, EventArgs e)
{
    // MakePayment is the actual ModalPopup control and total due is a public property
    MakePayment.TotalDue = txtTotalDue.Text
    mdlPopupPayment.Show();
} 

The problem with this is that when I click the link to show the ModalPopup the PageLoad event does not fire so I have no way to assign my property to a label inside the ModalPopup. I even attempted to use the session object but had the same issue. I can not even make a trip to the database because I can not pass in a customer ID. Any ideas? I am a novice at Javascript and perfer a server side soultion but at this point I am willing to try anything.

The MakePayment user control contains 3 asp textboxes. One for the user to input a payment amount, another for payment type, and a third for notes like check numbers. Also on the control there is an apply and cancel button. The parent control is a basic ascx page which is a data entry screen that contains the ModalPopupExtender and all html code to activate it.

Answer 1

<asp:Panel runat="server" ID="pPopupQuoteSearch" CssClass="modalPopupQuote" Style="display: none">
    <asp:LinkButton ID="lbClose" Text="Close" runat="server" />
    <div id="dQuoteContainer" runat="server">
    </div>
</asp:Panel>
<asp:Button ID="Button5" runat="server" Style="display: none" />
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Button5"
        PopupControlID="pPopupQuoteSearch" BackgroundCssClass="modalBackground" OkControlID="lbClose">
</cc1:ModalPopupExtender>

C# CODE

protected void btnQuteSearch_Click(object sender, EventArgs e)
{
    pPopupQuoteSearch.Style.Remove("display");
    pPopupQuoteSearch.Style.Add("display", "inline");

    dQuoteContainer.InnerHtml = "some HTML code";

    ModalPopupExtender1.Show();
}

Answer 2

It is not necessary to create a user control to pass data into a modal popup. I would only create a user control if I needed to reuse it in different locations. If you don't need to reuse it in multiple locations then you don't need a user control. Instead do this:

Suppose you need a popup that displays a string and has OK and Cancel buttons, but you need to set the string value before it pops up.

1. Create a Panel.
2. Place an UpdatePanel inside the Panel from step 1.
3. Place a Button and ModalPopupExtender inside the UpdatePanel.

4. Place a Label, the Ok and Cancel buttons inside the UpdatePanel, underneath the popup extender. This is shown below:

   <asp:Panel ID="Panel1" runat="server" CssClass="popup" Width="320px" Style="display:none">
      <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
          <ContentTemplate>
              <asp:Button ID="Button1" runat="server" Style="display:none" />
              <cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
                  TargetControlID="Button1"
                  PopupControlID="Panel1"
                  CancelControlID="CancelButton">
              </cc1:ModalPopupExtender>
              <asp:Label ID="Label1" runat="server" />
              <asp:Button ID="OkButton" runat="server" Text="Ok" CausesValidation="true" OnClick="OkButton_OnClick" />&nbsp;
              <asp:Button ID="CancelButton" runat="server" Text="Cancel" CausesValidation="false" />
          </ContentTemplate>
      </asp:UpdatePanel>
   </asp:Panel>
   

5. Next, on your page, place a Button and a TextBox like this:

   <asp:TextBox ID="MyTextBox" runat="server" />
   <asp:Button ID="MyButton" runat="server" Text="Popup" OnClick="MyButton_OnClick" />
   

6. Now, in the code behind for your page, place the handler for MyButton:

   protected void MyButton_OnClick(object sender, EventArgs e)
   {
        Label1.Text = MyTextBox.Text;
        UpdatePanel1.Update();
        ModalPopupExtender1.Show();
   }
   

Answer 3

Once I realized what I was doing wrong the solution I came up with was pretty straight forward. I must thank Arnold Matusz for it was his blog entry that showed me the light. http://blog.dreamlabsolutions.com/post/2009/01/10/ModalPopupExtender-to-show-a-MessageBox.aspx

Instead of having the ModalPopup entender call a user control that just displayed some html. I made a user control that was the ModalPopupExtender. This way I can call it and pass in some data.

My MakePayment user control's HTML looks like

<asp:Button ID="btnDummy" style="display: none;" runat="server"  
   OnClick="btnDummy_Click" />
<ajaxToolkit:ModalPopupExtender ID="mdlPopupPayment" runat="server"  
            TargetControlID="btnDummy" PopupControlID="pnlMakePayment" 
            CancelControlID="popUpCancel" DropShadow="true"
            BackgroundCssClass="modalBackground">
</ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="pnlMakePayment" runat="server" Style="display: none;"  
    SkinID="PopUpPanel" class="ContentBoxColor" Width="400px" Height="170px">
<div class="contentbox">
    <div class="contentboxHeader1">
        <asp:Label ID="lblPopupTitle" Width="350px" runat="server" Text=""></asp:Label>
    </div>
    <div class="contentbox">
        <div style="text-align: left">
            <asp:Label ID="lblTotalDue" Width="100px" runat="server" Text="">  
            </asp:Label>
            <asp:Label ID="lblTotalDueValue" Width="100px" runat="server">
            </asp:Label>
         </div>
        <div style="text-align: left">
            <asp:Label ID="lblPayment" Width="100px" runat="server" Text=""></asp:Label>
            <asp:TextBox ID="txtPayment" Width="100px" runat="server"></asp:TextBox>
            <ajaxToolkit:FilteredTextBoxExtender ID="ftbePayment" runat="server" 
               TargetControlID="txtPayment" FilterType="Custom, Numbers" 
                 ValidChars="."> </ajaxToolkit:FilteredTextBoxExtender>
        </div>
        <div style="text-align: left">
            <asp:Label ID="lblPaymentRefNo" Width="100px" runat="server" Text=""> 
            </asp:Label>
            <asp:TextBox ID="txtPaymentRefNo" Width="100px" runat="server">
            </asp:TextBox>
        </div>
        <div style="text-align: left">
        <asp:Label ID="lblPaymentType" Width="100px" runat="server" Text=""></asp:Label>
            <asp:TextBox ID="txtPaymentType" Width="250px" runat="server"></asp:TextBox>
        </div>
    </div>
    <div class="contentbox" style="text-align=right">
        <asp:Button ID="btnApplyPayment" runat="server" Text="" 
             OnClick="btnApplyPayment_Click" />
        <asp:Button ID="btnCancel" runat="server" Text="" OnClick="btnCancel_Click" />
    </div>
</div>
<div style="text-align: right; width: 100%; margin-top: 5px;">
    <asp:Button ID="popUpCancel" runat="server" Text="Cancel" Width="0px" />
</div>
</asp:Panel>

And in the code behind I have a public method

public void MakePayment(string szAmountDue)
{
    lblTotalDueValue.Text = szAmountDue;
    mdlPopupPayment.Show();
}

On my main form I have a link called Make Payment

<asp:LinkButton ID="lnkMakePayment" runat="server" Visible="true" 
      OnClick="lnkMakePayment_Click" >
     <asp:Label ID="lblMakePayment" runat="server" Text=""/>
</asp:LinkButton>

When the Make Payment link is clicked the code behind calls the MakePayment control passing in any data I wish to display.

protected void lnkMakePayment_Click(object sender, EventArgs e)
{
    MakePayment.MakePayment(lblTotalValue.Text.ToString());
} 

Answer 4

I think you need to provide a bit more information. Can you show us or describe the markup/codebehind contained within your MakePayment user control? And when you talk about the "parent control" which element are you referring to? MakePayment, pnlMakePayment, pnlDummy?