Asp.Net GridView能否将FooterTemplate显示为表格首行？

方法一：后台代码调整DOM结构（推荐） #

利用GridView的PreRender事件直接操作表格行集合，把Footer行移动到Header行下方。这种方法能完整保留FooterTemplate里所有控件的事件绑定，无需修改原有模板逻辑。

protected void GridView1_PreRender(object sender, EventArgs e)
{
    // 确保Footer行存在且GridView已渲染出表格
    if (GridView1.FooterRow != null && GridView1.Controls[0] is Table gridTable)
    {
        int headerRowIndex = gridTable.Rows.GetRowIndex(GridView1.HeaderRow);
        // 移除原位置的Footer行
        gridTable.Rows.Remove(GridView1.FooterRow);
        // 插入到Header行的下一行位置
        gridTable.Rows.AddAt(headerRowIndex + 1, GridView1.FooterRow);
    }
}

方法二：前端JavaScript动态调整（适合无后台交互需求的场景） #

页面加载后通过JS定位Footer行，将其移动到数据行最顶部。注意分页回发后需重新执行代码，建议注册到页面启动脚本中。

function moveFooterToTop() {
    const gridTable = document.getElementById('<%= GridView1.ClientID %>');
    if (!gridTable) return;

    // 获取Footer行（GridView的Footer默认在tFoot标签内）
    const footerRow = gridTable.tFoot?.rows[0];
    const tbody = gridTable.tBodies[0];
    if (footerRow && tbody) {
        // 将Footer行插入到tbody第一行位置
        tbody.insertBefore(footerRow, tbody.firstChild);
        // 移除空的tFoot标签（可选，避免页面冗余）
        if (gridTable.tFoot?.rows.length === 0) {
            gridTable.removeChild(gridTable.tFoot);
        }
    }
}

// 页面首次加载及回发后执行
window.addEventListener('load', moveFooterToTop);
// 若使用UpdatePanel，需添加异步回发结束事件监听
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(moveFooterToTop);

关键注意事项 #

• 必须将GridView的ShowFooter属性设为true，确保即使表格无数据也会渲染Footer行。
• 方法一的后台处理无需担心分页回发问题，每次PreRender都会重新调整行位置。
• 不建议直接用HeaderTemplate替代FooterTemplate，避免破坏原有表头结构和控件绑定逻辑，移动FooterRow的方式能完全保留原有添加记录的功能。

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