asp.net content lost in dynamically generated table

Question

I'm trying to use an ajax panel to add keep multiple images added to table cells dynamically. Thing is when I add the second image, the first one dissapears.

Its really just a silly example to try and get ajax controls working for another project. I'm putting an image of Bill Gates in row 3, column 3 and an image of Steve Jobs in row 1, column 5. I have a button to place each image.

I can't seem to get both to display at the same time.

I have written a function to generate the cell id (GenerateTableCellID), as I've been told I would need to to this. Also there is a function to extract the cell and row in a tuple (GetColumnAndRow).

I'm not sure how to use a Session object to save the data. I thought using AJAX would be the answer, though I think I'm missing a major aspect of it.

<asp:Content ContentPlaceHolderID="MainContent" runat="server">
    <asp:UpdatePanel ID="UpdatePanel2" runat="server">
        <ContentTemplate>
            <div id="tablePlaceHolder" runat="server"></div>
            <asp:Button ID="tblButton2" runat="server" Text="Add Steve Jobs" OnClick="tblButton_Click_Jobs" />
            <asp:Button ID="tblButton" runat="server" Text="Add Bill Gates" OnClick="tblButton_Click" />
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>


    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void Page_Init(object sender, EventArgs e)
    {
        int tableSize = 5;
        var t = new HtmlTable();
        t.ID = "myTable";  
        var placeHolderURL = "http://wiki.tripwireinteractive.com/images/4/47/Placeholder.png";

        for (int r = 0; r < tableSize; r++)
        {
            var tableRow = new HtmlTableRow();
            tableRow.ID = "row_" + r.ToString();
            for (int c = 0; c < tableSize; c++)
            {
                var tableCell = new HtmlTableCell();
                var id = GenerateTableCellID(r, c);
                tableCell.ID = id;                    
                tableCell.Height = "20";
                tableCell.Width = "20";
                tableCell.InnerHtml = string.Format("<img src='{0}' width='20' height='20' />", placeHolderURL);
                tableRow.Controls.Add(tableCell);
            }
            t.Controls.Add(tableRow);
        }
        tablePlaceHolder.Controls.Add(t);
    }

    protected void tblButton_Click(object sender, EventArgs e)
    {
        int c =2;
        int r = 2;
        var id = GenerateTableCellID(c, r);
        var image = GenerateImage("http://www.mnn.com/sites/default/files/billgates.jpg");
        var cell = (HtmlTableCell)UpdatePanel2.FindControl(id);
        cell.InnerHtml = "";
        cell.Controls.Add(image);
    }

    protected void tblButton_Click_Jobs(object sender, EventArgs e)
    {
        int c = 4;
        int r = 0;
        var id = GenerateTableCellID(c, r);
        var image = GenerateImage("http://images.boomsbeat.com/data/images/full/209/jobs-jpg.jpg");
        var cell = (HtmlTableCell)UpdatePanel2.FindControl(id);
        cell.InnerHtml = "";
        cell.Controls.Add(image);
    }

    protected Image GenerateImage(string url)
    {
        var image = new Image();
        image.ImageUrl = url;
        image.Width = 20;
        image.Height = 20;
        return image;
    }

    protected string GenerateTableCellID(int c, int r)
    {
        return "column_" + c.ToString() + "_row_" + r.ToString();
    }

    protected Tuple<int, int> GetColumnAndRow(string tableCellID)
    {
        string[] splitString = tableCellID.Split('_');
        int column, row;
        if (Int32.TryParse(splitString[1], out column) && Int32.TryParse(splitString[3], out row))
        {
            return new Tuple<int, int>(column, row);
        }
        else
        {
            return null;
        }
    }

score 0 · Answer 1 · answered Aug 31 '14 at 19:31

It is because at every update you clear the html present before by cell.InnerHtml = ""; remove this and try

protected void tblButton_Click_Jobs(object sender, EventArgs e)
    {
        int c = 4;
        int r = 0;
        var id = GenerateTableCellID(c, r);
        var image = GenerateImage("http://images.boomsbeat.com/data/images/full/209/jobs-jpg.jpg");
        var cell = (HtmlTableCell)UpdatePanel2.FindControl(id);
        //cell.InnerHtml = "";
        cell.Controls.Add(image);
    }

Actually, that line just clears the place holder I put in. Without it, both the placeholder and the image are put in the cell at the same time. — sucasa, Aug 31 '14 at 20:05

score 0 · Answer 2 · edited May 23 '17 at 10:26

As mentioned on the Page LifyCycle your table is created everytime when you do reload page (does not matter is this postback or not). Also you could read this post. In other words, it is not proper way store your data in the dynamic generated controls, because you lose your data on page load.

But if it is necessary for you could use AJAX methods ($.get and $.post, not UpdatePanel) to get data from the backend and add this to generated control on the client side

asp.net content lost in dynamically generated table

2 Answers2