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

本文关键字:net 动态 asp | 更新日期: 2023-09-27 18:20:06

我正在尝试使用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;
        }
    }

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

这是因为在每次更新时,您都会通过cell.InnerHtml = "";清除之前存在的html,删除它并尝试

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

正如Page LifyCycle中提到的,每次重新加载页面时都会创建表(无论是否回发)。你也可以阅读这篇文章。换句话说,将数据存储在动态生成的控件中是不合适的,因为在页面加载时会丢失数据。

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