2014-08-31 68 views
0

我想使用ajax面板添加保持多个图像动态添加到表格单元格。事情是当我添加第二个图像,第一个消失。asp.net内容丢失在动态生成的表

它真的只是一个愚蠢的例子,试图让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; 
     } 
    } 

回答

0

这是因为在每一次更新您清除当前之前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); 
    } 
+0

实际上,该行只是清除了放入的位置。没有它,占位符和图像同时放入单元格中。 – etw3 2014-08-31 20:05:12

0

上,当你做重装页的表创建每次的Page LifyCycle提到的HTML(不问题是这个回发或不)。你也可以阅读这个post。换句话说,将数据存储在动态生成的控件中是不正确的,因为在页面加载时会丢失数据。

但如果有必要,你可以使用AJAX方法($不用彷徨和$。员额,不是的UpdatePanel)从后端获取数据,这增加产生的控制在客户端