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 

希望這有助於！