ASP.Net从表中动态创建的行获取信息

Question

我有这张表可以添加和删除行。这工作非常好。

<asp:Table ID="SiteInfo" runat="server" Style="border-style: solid"> 
    <asp:TableRow> 
     <asp:TableCell Style="border-style: solid"> 
      <asp:Label runat="server" Text="Name of Site"> 
      </asp:Label> 
     </asp:TableCell> 
     <asp:TableCell Style="border-style: solid"> 
      <asp:Label runat="server" Text="Territory"> 
      </asp:Label> 
     </asp:TableCell> 
    </asp:TableRow> 

    <asp:TableRow> 
     <asp:TableCell> 
      <asp:TextBox ID="Site1" runat="server" Style="border-style: solid"></asp:TextBox> 
     </asp:TableCell> 
     <asp:TableCell> 
      <asp:TextBox ID="Territory1" runat="server" Style="border-style: solid"></asp:TextBox> 
     </asp:TableCell> 
    </asp:TableRow> 
</asp:Table> 
<br /> 
<asp:Button ID="addSite" runat="server" Text="Add a Site" OnClientClick="javascript:addRow();"></asp:Button> 
<asp:Button ID="removeSite" runat="server" Text="Remove" OnClientClick="javascript:removeRow();"></asp:Button> 
<!-- Add a row from the site table --> 
<script type="text/javascript" language="javascript"> 
    function addRow() { 
     var table = document.getElementById('<%=SiteInfo.ClientID%>'); 
     var row = table.insertRow(table.rows.length); 
     var cell1 = row.insertCell(0); 
     var cell2 = row.insertCell(1); 
     cell1.innerHTML = '<input type="text" id="Site_' + table.rows.length + ' " Style="border-style: solid" />'; 
     cell2.innerHTML = '<input type="text" id="Territory_' + table.rows.length + ' " Style="border-style: solid" />'; 

    } 
</script> 
<!-- Remove a row from the site table --> 
<script type="text/javascript" language="javascript" id="`"> 
    function removeRow() { 
     var table = document.getElementById('<%=SiteInfo.ClientID%>'); 
     if (table.rows.length - 1 > 1) 
      table.deleteRow(table.rows.length - 1); 
    } 
</script> 

的问题是我有一个提交按钮，需要能够阅读和发送该信息，但我不知道如何从被添加到表的新行的输入。这是我想要做的，但它不起作用。

protected void submit_Click(object sender, EventArgs e) 
{ 
    StringBuilder sb = new StringBuilder(); 
    if (Consent.Checked) 
    { 
     sb.Append("Site Name: " + Site1.Text + " | Territory : " + Territory1.Text + "\n"); 
     if (SiteInfo.Rows.Count > 2) 
     { 
      for (int i = 2; i < SiteInfo.Rows.Count; i++) 
      { 
       sb.Append("Site Name: " + SiteInfo.Rows[i].Cells[0].Text + " Territory : " + SiteInfo.Rows[i].Cells[1].Text + "\n"); 
      } 
     } 
} 

Answer 1

为了理解这个我建议你理解asp.net page life cycle。

背景
您在客户端使用JavaScript.New行创建/当你调用addRow（通过浏览器（DOM maniuplation）删除）/ removeRow（）函数添加行到您的表。请注意，这一变化发生在客户端。
当你点击'提交'按钮'回发'你的网页是一个请求被浏览器发送到服务器，并从头开始加载页面，然后你的submit_Click函数被执行。此时，您在客户端表上所做的更改不可用，因此您不会查找新创建/删除的行。你只能找到aspx页面上声明的内容。

解决方案

创建像一个隐藏字段：

<input type="hidden" id="tab_content" name="tab_content" /> 

在您的 '提交' 按钮呼叫clientClick事件此功能：

function SaveTableData() { 

        var content = document.getElementById("tableClientID").innerHTML; 

        document.getElementById("tab_content").value = content; 
       }; 

终于看完这个隐藏字段值在submit_Click事件上。

的Element.innerHTML属性设置或获取HTML语法描述元素的后代

// HTML: 
// <div id="d"><p>Content</p> 
// <p>Further Elaborated</p> 
// </div> 

const d = document.getElementById("d"); 
console.log(d.innerHTML); 

// the string "<p>Content</p><p>Further Elaborated</p>" 
// is dumped to the console window 

希望这有助于！