Dynamically add user control in page ON button click whic is also in user control (ModalPopExtender in user control)

Question

I have a simple user control which I want to create dynamically every time user click button (button also saves data in db.) This is just a kind of Discussion forum where user reply and it appears beneath message.

When user click on Reply button a ModalPopupExtender window pops up and user enter its reply and submit.

When I click on submit in popup data get saved in db but OnInit execute before ButtonClick, how to create new control and add in controls in this scenario.

Control Code ASPX

<div style="border: .25em solid #000; margin: 10px; padding: 10px">
    <div>
        <asp:Label ID="lblMessage" runat="server" Width="200px"></asp:Label>
    </div>
    <div>
        <asp:Button ID="btnReply" runat="server" Text="Reply" />
    </div>
</div>
<table>
    <tr>
        <td>
            <asp:ModalPopupExtender ID="mpeReply" runat="server" TargetControlID="btnReply" PopupControlID="pnlReply"
                BackgroundCssClass="ModalPopupBG1">
            </asp:ModalPopupExtender>
            <asp:Panel ID="pnlReply" runat="server">
                <div class="popupbody">
                    <table width="90%">
                        <tr>
                            <td>
                                <asp:TextBox ID="txtReply" runat="server" Width="400px" CssClass="input1" TextMode="MultiLine"
                                    ValidationGroup="ReplyPopup"></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <asp:Button ID="btnSubmit" runat="server" Text="Submit" ValidationGroup="ReplyPopup"
                                    OnClick="btnSubmit_Click" />
                                <asp:Button ID="btnClose" runat="server" Text="Cancel" CausesValidation="false" />
                            </td>
                        </tr>
                    </table>
                </div>
            </asp:Panel>
        </td>
    </tr>
</table>

User control .cs (button click just save message into db)

protected void btnSubmit_Click(object sender, EventArgs e)
{
    message.Save();
}

Page .cs

protected void Page_Init(object sender, EventArgs e)
{
    LoadControl();
}

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

private void LoadControl()
{
    divMessageControl.Controls.Clear();

    MessageCollection msgs = MessageCollection.LoadAll();
    foreach (Message msg in msgs)
    {
        AddControlInPlaceHolder(msg);
    }
}

private void AddControlInPlaceHolder(Message msg)
{
    Control myUserControl = (Control)Page.LoadControl("~/Controls/MessageControl.ascx");

    Label lblMessage = myUserControl.FindControl("lblMessage") as Label;
    if (lblMessage != null)
    {
        lblMessage.Text = msg.MsgTxt;
    }

    divMessageControl.Controls.Add(myUserControl);
}

Answer 1

When you working with dynamically added controls you need to re-create in Page_Init handler all previously added controls. But for new control it's ok to add it just in postback control event handler. Try to call AddControlInPlaceHolder method right in btnSubmit click handler. If you need to have database message's id int that method, consider to update message id in Save method with new value.