javascript - 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 在客户端的表中添加行。当您调用 addRow()/removeRow() 函数时，浏览器(DOM 操作)会创建/删除新行。请注意，此更改发生在客户端。
当您单击“提交”按钮时，您将“回发”您的网页，即浏览器将请求发送到服务器，并且页面从头开始加载，然后执行您的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

希望这有帮助!