如何在ASP.NET WebForm中根据用户输入动态生成N个表格？

实现思路 #

1. 前端提供输入框和触发按钮，用PlaceHolder作为动态控件的容器
2. 后端获取用户输入，按逗号拆分得到目标列表
3. 循环遍历列表，为每个条目生成独立的Table控件，添加到容器中

前端页面代码（.aspx） #

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DynamicTables.aspx.cs" Inherits="WebFormDemo.DynamicTables" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>动态生成表格</title>
    <style>
        .dynamic-table {
            border-collapse: collapse;
            margin: 15px 0;
            width: 300px;
        }
        .dynamic-table th, .dynamic-table td {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: left;
        }
        .dynamic-table th {
            background-color: #f5f5f5;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="txtInput" runat="server" Width="400px" PlaceHolder="输入PDO编号，用逗号分隔，例如：PDO123045,PDO122111"></asp:TextBox>
            <asp:Button ID="btnGenerate" runat="server" Text="生成表格" OnClick="btnGenerate_Click" />
            <asp:PlaceHolder ID="phTables" runat="server"></asp:PlaceHolder>
        </div>
    </form>
</body>
</html>

后端逻辑代码（.aspx.cs） #

using System;
using System.Web.UI.WebControls;

namespace WebFormDemo
{
    public partial class DynamicTables : System.Web.UI.Page
    {
        protected void btnGenerate_Click(object sender, EventArgs e)
        {
            // 清空容器，避免重复生成
            phTables.Controls.Clear();

            // 获取用户输入并去除首尾空白
            string input = txtInput.Text.Trim();
            if (string.IsNullOrEmpty(input))
                return;

            // 按逗号拆分输入内容，过滤空条目
            string[] pdoNumbers = input.Split(new[] { ',' }, StringSplitOptions.RemoveEmptyEntries);

            foreach (string pdo in pdoNumbers)
            {
                // 创建Table控件并设置样式
                Table table = new Table();
                table.CssClass = "dynamic-table";

                // 创建表头行
                TableHeaderRow headerRow = new TableHeaderRow();
                TableHeaderCell headerCell = new TableHeaderCell();
                headerCell.Text = $"PDO编号: {pdo.Trim()}";
                headerRow.Cells.Add(headerCell);
                table.Rows.Add(headerRow);

                // 添加示例数据行（可根据实际需求替换）
                TableRow dataRow = new TableRow();
                TableCell dataCell1 = new TableCell();
                dataCell1.Text = "示例数据1";
                TableCell dataCell2 = new TableCell();
                dataCell2.Text = "示例数据2";
                dataRow.Cells.Add(dataCell1);
                dataRow.Cells.Add(dataCell2);
                table.Rows.Add(dataRow);

                // 将表格添加到容器中
                phTables.Controls.Add(table);
            }
        }
    }
}

效果说明 #

• 当输入PDO123045,PDO122111时，页面会生成2个独立表格，每个表格对应一个PDO编号
• 当输入PDO123045,PDO122111,PDO111345时，页面会生成3个独立表格
• 样式可通过CSS自定义，表格内的内容可根据业务需求动态填充

内容的提问来源于stack exchange，提问作者muhammad hazieq