开启AutoGenerateColumns时实现GridView多行表头文本的方法

问题 #

存储过程生成的动态列名包含多行文本，在MS SQL中显示正常，但设置了AutoGenerateColumns="true"的GridView将其显示为单行，需实现该列单独多行展示。

现有代码 #

存储过程 #

declare @min varchar(max), @max varchar(max), @c varchar(max), @slqStmt varchar(max)
select @min = max(somecolumn1), @max = max(somecolumn2) from someDB.dbo.someTable
where Name = @somenamesenttosproc
set @c =  @min + ' - ' +  @max +'
BOTTOMLINEOFCOLUMNTEXT'

set @slqStmt = '
SELECT Name ' + 'AS [' + @c +']' +'
from someDB.dbo.someTable '

PRINT @slqStmt
EXEC(@slqStmt)

GridView代码 #

<asp:GridView CssClass="border border-top-0 border-start-0 border-end-0 border-dark z-0 w-100" ID ="gridView" runat="server" AutoGenerateColumns="true" cellpadding="10" ShowHeaderWhenEmpty="True" GridLines="Both" BorderColor="Black" EmptyDataText="No records found..." AllowPaging="true" PageSize="100" Font-Size="Small">
<%-- Grid Style --%>
<HeaderStyle BackColor="#c4143b" Font-Bold="True" ForeColor="White" CssClass="border border-bottom-0 border-dark sticky-top-15"/>
<AlternatingRowStyle BackColor="#f7bac7" />
<RowStyle CssClass="border border-top-0 border-bottom-0 border-dark" />
<PagerSettings Position="Top" />
<PagerStyle HorizontalAlign="Left" CssClass="pagination-ys" />

解决方案 #

方案1：CSS样式实现（推荐） #

利用CSS的white-space: pre-line属性，让浏览器自动解析文本中的换行符，无需修改存储过程或关闭HTML编码，更安全可靠。

1. 在GridView标签中添加OnRowDataBound事件绑定：

<asp:GridView ... OnRowDataBound="gridView_RowDataBound" ...>

2. 后台添加事件处理代码（C#示例）：

protected void gridView_RowDataBound(object sender, GridViewRowEventArgs e)
{
    // 仅处理表头行
    if (e.Row.RowType != DataControlRowType.Header) return;

    foreach (TableCell cell in e.Row.Cells)
    {
        // 识别目标列（根据列文本特征判断）
        if (cell.Text.Contains("BOTTOMLINEOFCOLUMNTEXT"))
        {
            // 设置CSS样式解析换行
            cell.Style["white-space"] = "pre-line";
            break;
        }
    }
}

方案2：替换换行符为HTML标签 #

如果需要更直接的文本控制，可以将存储过程中的换行替换为HTML的<br/>，并关闭对应表头单元格的HTML编码。

1. 修改存储过程中@c的赋值：

-- 将换行替换为<br/>
set @c =  @min + ' - ' +  @max +'<br/>BOTTOMLINEOFCOLUMNTEXT'

2. 同样绑定RowDataBound事件，添加处理代码：

protected void gridView_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType != DataControlRowType.Header) return;

    foreach (TableCell cell in e.Row.Cells)
    {
        if (cell.Text.Contains("BOTTOMLINEOFCOLUMNTEXT"))
        {
            // 关闭HTML编码，让<br/>生效
            cell.HtmlEncode = false;
            break;
        }
    }
}

方案3：后台替换换行符（不修改存储过程） #

若不想改动存储过程，可在后台将表头文本中的换行符替换为<br/>：

protected void gridView_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType != DataControlRowType.Header) return;

    foreach (TableCell cell in e.Row.Cells)
    {
        if (cell.Text.Contains("BOTTOMLINEOFCOLUMNTEXT"))
        {
            // 替换换行符为HTML换行
            cell.Text = cell.Text.Replace("\n", "<br/>");
            cell.HtmlEncode = false;
            break;
        }
    }
}

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