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?

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

This is the code that I use.

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")
        Panel1.Controls.Add(PanelS)
        TextBox1.Text += 110
        TextBox2.Text += 1


    End Sub

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Name="MsAjaxBundle" />
            <asp:ScriptReference Name="jquery" />
            <asp:ScriptReference Name="bootstrap" />
            <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
            <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
            <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
            <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
            <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
            <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
            <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
            <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
            <asp:ScriptReference Name="WebFormsBundle" />
        </Scripts>
    </asp:ScriptManager>
    <asp:Button ID="Button2" runat="server" Text="Prueba" />
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <div class="jumbotron">
                <asp:Button ID="Button1" runat="server" Text="Button" />
                <asp:TextBox ID="TextBox1" runat="server">20</asp:TextBox>
                <asp:TextBox ID="TextBox2" runat="server">0</asp:TextBox>
                <asp:Panel ID="Panel1" runat="server" BorderStyle="Solid" HorizontalAlign="Left" ScrollBars="Both"></asp:Panel>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>


</asp:Content>

Answer 1

For the control created in the Button1_Click method, the view-state information from a previous request is not restored because it too late to create the control so that the LoadViewState method for the control works properly. That is probably why. Please investigate it.

Answer 2

Hi @LA RC

I think the cause of the problem may be that you didn't increment the counter for the Panel. At the same time, we need to set a variable on the Page_PreInit page to make each Control's ID different. Take TextBox as an example (better display).

Code:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
    End Sub
    Protected Sub Page_PreInit(ByVal sender As Object, ByVal e As EventArgs)
        Dim keys As List(Of String) = Request.Form.AllKeys.Where(Function(key) key.Contains("txtDynamic")).ToList()
        Dim i As Integer = 1
        For Each key As String In keys
            Me.Create("txtDynamic" & i)
            i += 1
        Next
    End Sub
    Protected Sub Add(ByVal sender As Object, ByVal e As EventArgs)
        Dim index As Integer = Panel1.Controls.OfType(Of TextBox)().ToList().Count + 1
        Me.Create("txtDynamic" & index)
    End Sub
    Private Sub Create(ByVal id As String)
        Dim txt As TextBox = New TextBox()
        txt.ID = id
        Panel1.Controls.Add(txt)
        Dim lt As Literal = New Literal()
        lt.Text = "<br />"
        Panel1.Controls.Add(lt)
    End Sub

<asp:ScriptManager ID="ScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Name="MsAjaxBundle" />
            <asp:ScriptReference Name="jquery" />
            <asp:ScriptReference Name="bootstrap" />
            <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
            <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
            <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
            <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
            <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
            <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
            <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
            <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
            <asp:ScriptReference Name="WebFormsBundle" />
        </Scripts>
    </asp:ScriptManager>
    <asp:Button ID="Button2" runat="server" Text="Prueba" />
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <div class="jumbotron">
                <asp:Button ID="Button1" runat="server" Text="Button" onclick="Add" />
                <asp:TextBox ID="TextBox1" runat="server">20</asp:TextBox>
                <asp:TextBox ID="TextBox2" runat="server">0</asp:TextBox>
                <asp:Panel ID="Panel1" runat="server" BorderStyle="Solid" HorizontalAlign="Left" ScrollBars="Both"></asp:Panel>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>

As for how you want to change the style, just set it yourself.

Result:

Best regards,
Qi You

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.