Question

我尝试使用ajax面板添加动态添加到表格单元格的多个图像。事情就是当我添加第二张图片时，第一张图片消失了。

尝试让ajax控件为另一个项目工作真的只是一个愚蠢的例子。我在第3行第3列中放置了比尔盖茨的图像，在第1行第5列中放置了史蒂夫乔布斯的图像。我有一个按钮来放置每个图像。

我似乎无法同时显示两者。

我已经写了一个函数来生成单元格id（GenerateTableCellID），因为我已经被告知我需要这个。还有一个函数来提取元组中的单元格和行（GetColumnAndRow）。

我不确定如何使用Session对象来保存数据。我认为使用AJAX会是答案，不过我认为我错过了它的一个主要方面。

<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;
        }
    }

Answer 1

这是因为在每次更新时都会清除之前显示的html cell.InnerHtml = "";将其删除并尝试

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);
    }

Answer 2

如Page LifyCycle所述，每当你重新加载页面时都会创建你的表（无论这个回发与否都无关紧要）。你也可以阅读这个post。换句话说，将数据存储在动态生成的控件中是不正确的，因为在页面加载时会丢失数据。

但是如果有必要你可以使用AJAX方法（$ .get和$ .post，而不是UpdatePanel）从后端获取数据并将其添加到客户端生成的控件

asp.net内容在动态生成的表中丢失

2 个答案: