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

LA RC 41 Reputation points
2023-03-15T22:54:17.7233333+00:00

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>
ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,417 questions
VB
VB
An object-oriented programming language developed by Microsoft that is implemented on the .NET Framework. Previously known as Visual Basic .NET.
2,668 questions
0 comments No comments
{count} votes

Accepted answer
  1. QiYou-MSFT 4,311 Reputation points Microsoft Vendor
    2023-03-16T07:58:25.28+00:00

    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:Panel

    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.

    1 person found this answer helpful.
    0 comments No comments

1 additional answer

Sort by: Most helpful
  1. SurferOnWww 2,491 Reputation points
    2023-03-16T01:18:04.71+00:00

    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.

    0 comments No comments