ASP.Net从表中动态创建的行获取信息
问题描述:
我有这张表可以添加和删除行。这工作非常好。ASP.Net从表中动态创建的行获取信息
<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");
}
}
}
答
为了理解这个我建议你理解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
希望这有助于!
“document.getElementById(”tableClientID“)。innerHTML” 究竟会得到什么? –
我已更新答案以回答此查询。 – Winnie