如何在C#开发的Web应用中实现asp:GridView的行复制粘贴功能

完全可以实现该需求，以下是两种主流场景下的落地实现方案：

1. 前端纯JS实现（适用于前端渲染/客户端绑定的GridView） #

核心思路是监听复制操作，获取当前行所有表单控件的有效值，克隆行节点后回填数据再插入表格，示例代码如下：

// 行复制逻辑
function copyRowHandler(e) {
  const currentRow = e.target.closest('tr');
  // 深克隆节点（第二个参数true表示克隆绑定的事件）
  const newRow = currentRow.cloneNode(true);
  // 清空主键、唯一标识字段，避免提交冲突
  const idInput = newRow.querySelector('input[data-field="primaryId"]');
  if (idInput) idInput.value = '';
  
  // 手动同步所有表单控件的动态值（部分浏览器cloneNode不会同步用户输入的动态值）
  const currentInputs = currentRow.querySelectorAll('input, select, textarea');
  const newInputs = newRow.querySelectorAll('input, select, textarea');
  currentInputs.forEach((el, index) => {
    if (el.type === 'checkbox' || el.type === 'radio') {
      newInputs[index].checked = el.checked;
    } else if (el.tagName === 'SELECT') {
      newInputs[index].selectedIndex = el.selectedIndex;
    } else {
      newInputs[index].value = el.value;
    }
    // 重置元素id避免重复
    newInputs[index].id = `${newInputs[index].id}_${Date.now()}`;
  });

  // 把新行插入到当前行下方
  currentRow.parentNode.insertBefore(newRow, currentRow.nextSibling);
}

注意事项：

• 如果用jQuery的clone()方法，传入true参数即可自动克隆绑定的事件和节点数据
• 克隆完成后必须重置所有元素的id属性，避免重复id导致DOM选择、表单提交异常
• 如果有自定义的行内编辑器组件，需要额外触发组件的初始化逻辑

2. 服务端渲染GridView（如ASP.NET Web Forms场景）实现方案 #

服务端控件的GridView需要维护ViewState，不能仅修改前端DOM，需要同步触发服务端事件更新数据源：

protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
    if (e.CommandName == "CopyCurrentRow")
    {
        int sourceRowIndex = Convert.ToInt32(e.CommandArgument);
        GridViewRow sourceRow = GridView1.Rows[sourceRowIndex];
        // 读取缓存的当前数据源
        DataTable gridDt = ViewState["GridDataSource"] as DataTable;
        
        // 新建行并拷贝原行数据
        DataRow newRow = gridDt.NewRow();
        // 跳过主键列，拷贝其他字段值
        for (int i = 1; i < gridDt.Columns.Count; i++)
        {
            // 如果是模板列，需要先通过FindControl拿到输入控件的值
            if (sourceRow.Cells[i].Controls.Count > 0)
            {
                TextBox input = sourceRow.Cells[i].FindControl($"txt_{gridDt.Columns[i].ColumnName}") as TextBox;
                newRow[i] = input?.Text ?? string.Empty;
            }
            else
            {
                newRow[i] = gridDt.Rows[sourceRowIndex][i];
            }
        }
        // 主键设为空，交由数据库自动生成
        newRow[0] = DBNull.Value;
        // 插入到原行下方
        gridDt.Rows.InsertAt(newRow, sourceRowIndex + 1);
        
        // 重新绑定GridView并更新缓存
        GridView1.DataSource = gridDt;
        GridView1.DataBind();
        ViewState["GridDataSource"] = gridDt;
    }
}

注意事项：

• 必须缓存当前编辑状态的数据源到ViewState/Session，不能每次绑定都拉取数据库原始数据
• 不要纯前端修改服务端渲染的GridView DOM，否则ViewState校验会不通过，提交时新行数据会被忽略

常见问题排查 #

• 克隆后行按钮点击无响应：要么用深克隆同步事件，要么插入新行后手动重新绑定行内按钮的点击事件
• 提交时新行数据丢失：检查新行的表单控件name属性是否符合GridView的命名规则，服务端渲染场景必须通过服务端逻辑插入行
• 下拉框/复选框状态没有复制：克隆时要单独处理选中状态，不能仅拷贝value属性

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