ASP.NET Web Form中使用jQuery运行时动态创建GridView列

基础页面结构搭建 #

先在aspx页面放入核心控件，注意给控件设置静态ClientID，避免前端选择器因为嵌套层级失效：

<%-- 列数输入区 --%>
<div style="margin:10px 0;">
    自定义录入列数：
    <asp:TextBox ID="txtColCount" runat="server" ClientIDMode="Static" style="width:60px;"></asp:TextBox>
    <asp:Button ID="btnGenerate" runat="server" Text="生成录入列" ClientIDMode="Static" style="margin-left:8px;" />
    <input type="button" id="btnAddRow" value="新增录入行" style="margin-left:8px;" />
</div>

<%-- GridView容器，关闭自动生成列，预留固定列 --%>
<asp:GridView ID="gvInput" runat="server" CssClass="dynamic-grid" AutoGenerateColumns="false" ClientIDMode="Static" border="1" cellpadding="4" cellspacing="0">
    <Columns>
        <asp:BoundField HeaderText="序号" DataField="RowIndex" />
    </Columns>
</asp:GridView>

前端jQuery核心逻辑 #

直接在页面脚本块或者独立js文件中写入以下逻辑，实现无回发动态列生成：

$(function () {
    // 绑定生成列按钮事件
    $('#btnGenerate').click(function (e) {
        e.preventDefault();
        // 校验输入合法性
        const colCount = parseInt($('#txtColCount').val().trim());
        if (isNaN(colCount) || colCount < 1) {
            alert('请输入大于0的正整数作为列数');
            return;
        }
        if (colCount > 30) {
            alert('最多支持单次生成30个录入列，避免页面加载异常');
            return;
        }

        const $grid = $('#gvInput');
        // 先清空历史动态列，防止重复叠加
        $grid.find('.dynamic-col').remove();

        // 生成表头列
        const $header = $grid.find('thead tr:first');
        for (let i = 1; i <= colCount; i++) {
            $header.append(`<th class="dynamic-col">录入项${i}</th>`);
        }

        // 给已有数据行追加输入单元格
        const $rows = $grid.find('tbody tr');
        $rows.each(function () {
            const $row = $(this);
            for (let i = 1; i <= colCount; i++) {
                $row.append(`
                    <td class="dynamic-col">
                        <input type="text" name="dynamic_col_${i}" style="width:120px;" />
                    </td>
                `);
            }
        });

        // 无数据时默认生成1行空录入行
        if ($rows.length === 0) {
            let newRow = '<tr><td>1</td>';
            for (let i = 1; i <= colCount; i++) {
                newRow += `<td class="dynamic-col"><input type="text" name="dynamic_col_${i}" style="width:120px;" /></td>`;
            }
            newRow += '</tr>';
            $grid.find('tbody').append(newRow);
        }
    });

    // 可选：动态新增录入行逻辑
    $('#btnAddRow').click(function (e) {
        e.preventDefault();
        const $grid = $('#gvInput');
        const colNum = $grid.find('th.dynamic-col').length;
        if (colNum < 1) {
            alert('请先生成录入列再添加行');
            return;
        }
        const rowIndex = $grid.find('tbody tr').length + 1;
        let addRow = `<tr><td>${rowIndex}</td>`;
        for (let i = 1; i <= colNum; i++) {
            addRow += `<td class="dynamic-col"><input type="text" name="dynamic_col_${i}" style="width:120px;" /></td>`;
        }
        addRow += '</tr>';
        $grid.find('tbody').append(addRow);
    });
});

后端取值说明 #

动态生成的输入框不需要注册为服务器端控件，页面提交后直接通过Request.Form按命名规则取值即可：

// 后端提交按钮点击事件中取值示例
protected void btnSubmit_Click(object sender, EventArgs e)
{
    // 遍历所有动态列的提交值
    for (int i = 1; i <= int.Parse(txtColCount.Text); i++)
    {
        // 拿到第i列所有行的录入值，同列多个值自动用逗号分隔
        string colValues = Request.Form[$"dynamic_col_{i}"];
        // 后续自行做入库或者业务处理即可
    }
}

注意事项 #

• 所有需要前端操作的服务器控件必须设置ClientIDMode="Static"，避免母版页、控件嵌套导致ID被篡改，jQuery选择器失效
• 动态列统一加dynamic-col样式类，每次重新生成列前先清除该类对应的元素，避免列重复叠加
• 输入框的name属性必须保持统一命名规则，否则后端无法按顺序批量取值
• 不推荐用服务器端代码动态创建GridView列的方案，该方案需要在每次页面生命周期重建列、维护ViewState，逻辑冗余且容易出现值丢失的问题

内容的提问来源于stack exchange，提问作者sajid Jamshed