UpdatePanel (ASP), I lose inserted objects when I insert new objects dynamically

Question

I'm trying to insert one object (Panel) after another inside an UpdatePanel type object (by means of a button), this with the aim of forming an array that looks horizontal visually when the user inserts it inside the UpdatePanel. The problem I have is that every time I insert a new object, it deletes the previous one, that is, I insert object 2 and it deletes 1, if I insert object 3 it deletes 2 and so on only inserting an object inside. The two Textboxes that I use are to control the positions and know how many objects I already have inside.

I am using UpdatePanel, precisely to avoid losing those objects that I insert since each object will have a specific action within the array.

How can I avoid losing the objects already inserted?, any idea?

This is the code I am using

Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click

        Dim PanelS As Panel

        Dim pos As Int32 = Val(TextBox1.Text)
        Dim numPanel As Int32 = Val(TextBox2.Text)

        PanelS = New Panel
        PanelS.ID = "pnl" & (numPanel + 1)
        PanelS.Style.Add(HtmlTextWriterStyle.Height, "500px")
        PanelS.Style.Add(HtmlTextWriterStyle.Width, "110px")
        PanelS.Style.Add(HtmlTextWriterStyle.Left, pos.ToString & "px")
        PanelS.Style.Add(HtmlTextWriterStyle.Position, "absolute")
        PanelS.Style.Add(HtmlTextWriterStyle.BackgroundImage, "~/Images/W1.jpg")
        UpdatePanel1.ContentTemplateContainer.Controls.Add(PanelS)
        TextBox1.Text += 110
        TextBox2.Text += 1


    End Sub

and in ASP this is what I use

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <div class="jumbotron">
    <div class="row">
            <asp:Button ID="Button1" runat="server" Text="INSERT MOD" Width="120px" />
    </div>

    <div class="row">
        <div class="col-md-12">
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                        <ContentTemplate>
                                <asp:TextBox ID="TextBox2" runat="server">0</asp:TextBox>
                                <asp:TextBox ID="TextBox1" runat="server">20</asp:TextBox>
                        </ContentTemplate>
                </asp:UpdatePanel>
        </div>
   </div>
   </div>
</asp:Content>

Waiting for your kind comments... Thank you in advance.

Answer 1

The issue is that on postback your UpdatePanel is getting reset. This needs to be beefed up a bit to handle adding the first one, etc. You might need to use Page_PreRender instead of Page_Load for example. I would recommend reading up on the page lifecycle. As-is the last one is duplicated but it should get you on the right track.

Also it's C# as I'm not that familiar with VB. Principles are the same, though.

protected void Page_Load(object sender, EventArgs e)
{
    var numPanel = Int32.Parse(TextBox2.Text);
    for (int i = 0; i < numPanel; i++)
    {
        var PanelS = new Panel();
        PanelS.ID = "pnl" + (i + 1);
        PanelS.Style.Add(HtmlTextWriterStyle.Height, "500px");
        PanelS.Style.Add(HtmlTextWriterStyle.Width, "110px");
        PanelS.Style.Add(HtmlTextWriterStyle.Left, (i * 110).ToString() + "px");
        PanelS.Style.Add(HtmlTextWriterStyle.Position, "absolute");
        PanelS.Style.Add(HtmlTextWriterStyle.BackgroundImage, "~/Images/W1.jpg");
        UpdatePanel1.ContentTemplateContainer.Controls.Add(PanelS);
    }
}

protected void Button1_Click(object sender, EventArgs e)
{
    var pos = Int32.Parse(TextBox1.Text);
    var numPanel = Int32.Parse(TextBox2.Text);

    var PanelS = new Panel();
    PanelS.ID = "pnl" + (numPanel + 1);
    PanelS.Style.Add(HtmlTextWriterStyle.Height, "500px");
    PanelS.Style.Add(HtmlTextWriterStyle.Width, "110px");
    PanelS.Style.Add(HtmlTextWriterStyle.Left, pos.ToString() + "px");
    PanelS.Style.Add(HtmlTextWriterStyle.Position, "absolute");
    PanelS.Style.Add(HtmlTextWriterStyle.BackgroundImage, "~/Images/W1.jpg");
    UpdatePanel1.ContentTemplateContainer.Controls.Add(PanelS);

    TextBox1.Text = (pos + 110).ToString();
    TextBox2.Text = (numPanel + 1).ToString();
}

EDIT: Using Page_PreRender example, which behaves more the way described:

protected void Page_PreRender(object sender, EventArgs e)
{
    var numPanel = Int32.Parse(TextBox2.Text);
    for (int i = 0; i < numPanel; i++)
    {
        var PanelS = new Panel();
        PanelS.ID = "pnl" + (i + 1);
        PanelS.Style.Add(HtmlTextWriterStyle.Height, "500px");
        PanelS.Style.Add(HtmlTextWriterStyle.Width, "110px");
        PanelS.Style.Add(HtmlTextWriterStyle.Left, (i* 110).ToString() + "px");
        PanelS.Style.Add(HtmlTextWriterStyle.Position, "absolute");
        PanelS.Style.Add(HtmlTextWriterStyle.BackgroundImage, "~/Images/W1.jpg");
        UpdatePanel1.ContentTemplateContainer.Controls.Add(PanelS);
    }
}

protected void Button1_Click(object sender, EventArgs e)
{
    var pos = Int32.Parse(TextBox1.Text);
    var numPanel = Int32.Parse(TextBox2.Text);

    TextBox1.Text = (pos + 110).ToString();
    TextBox2.Text = (numPanel + 1).ToString();
}