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.

Solution

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());
} 

Comments

[Ron Skufca]

sorry if i was unclear i added some more info to the question