动态创建GridView模板列与DropDownList并实现表头内联搜索方案咨询

针对你遇到的**AutoGenerateColumns="true"下动态生成带DropDownList的TemplateField，同时实现表头内联搜索**的需求，下面给出可行的实现思路和代码示例，同时针对300列的场景给出性能优化建议，以及替代方案。

核心思路 #

直接依赖AutoGenerateColumns会限制我们对列的自定义控制，所以更靠谱的方式是：关闭AutoGenerateColumns，手动从数据源获取列信息，动态创建TemplateField——这样既能完全控制每一列的表头搜索控件和单元格DropDownList，又能避免自动生成列带来的不可控问题。

步骤1：自定义Template类实现表头与单元格模板 #

我们需要实现ITemplate接口来创建自定义的表头（带搜索框）和单元格（带DropDownList）模板：

public class DynamicGridTemplate : ITemplate
{
    private readonly ListItemType _templateType;
    private readonly string _columnName;

    public DynamicGridTemplate(ListItemType templateType, string columnName)
    {
        _templateType = templateType;
        _columnName = columnName;
    }

    public void InstantiateIn(Control container)
    {
        switch (_templateType)
        {
            case ListItemType.Header:
                // 创建表头搜索文本框
                var searchTextBox = new TextBox
                {
                    ID = $"txtSearch_{_columnName}",
                    CssClass = "header-search-input",
                    AutoPostBack = true
                };
                searchTextBox.TextChanged += HeaderSearch_TextChanged;
                // 恢复之前的搜索条件（从ViewState读取）
                if (HttpContext.Current.ViewState[$"Search_{_columnName}"] != null)
                {
                    searchTextBox.Text = HttpContext.Current.ViewState[$"Search_{_columnName}"].ToString();
                }
                container.Controls.Add(searchTextBox);
                break;

            case ListItemType.Item:
                // 创建单元格内的DropDownList
                var ddl = new DropDownList
                {
                    ID = $"ddl_{_columnName}"
                };
                // 绑定数据的逻辑放到DataBinding事件中
                ddl.DataBinding += DropDownList_DataBinding;
                container.Controls.Add(ddl);
                break;
        }
    }

    // 表头搜索框文本改变事件：保存条件并重新绑定数据
    private void HeaderSearch_TextChanged(object sender, EventArgs e)
    {
        var txtBox = (TextBox)sender;
        HttpContext.Current.ViewState[$"Search_{_columnName}"] = txtBox.Text.Trim();
        BindGridViewData(); // 自定义的绑定GridView方法
    }

    // DropDownList数据绑定事件：根据列名加载可选值并设置选中项
    private void DropDownList_DataBinding(object sender, EventArgs e)
    {
        var ddl = (DropDownList)sender;
        var row = (GridViewRow)ddl.NamingContainer;
        var dataItem = row.DataItem;

        // 1. 根据列名从数据库/缓存获取该列的可选值（示例用模拟数据）
        ddl.DataSource = GetColumnOptions(_columnName);
        ddl.DataTextField = "DisplayText";
        ddl.DataValueField = "Value";
        ddl.DataBind();

        // 2. 设置当前行的选中值
        var currentValue = DataBinder.Eval(dataItem, _columnName);
        if (currentValue != null && !string.IsNullOrEmpty(currentValue.ToString()))
        {
            var selectedItem = ddl.Items.FindByValue(currentValue.ToString());
            if (selectedItem != null) selectedItem.Selected = true;
        }
    }

    // 模拟方法：根据列名获取下拉框数据源（实际需从数据库查询）
    private List<dynamic> GetColumnOptions(string columnName)
    {
        // 示例：根据不同列返回不同的选项
        return columnName.Contains("Status") 
            ? new List<dynamic> { new { DisplayText = "Active", Value = "1" }, new { DisplayText = "Inactive", Value = "0" } }
            : new List<dynamic> { new { DisplayText = "Option A", Value = "A" }, new { DisplayText = "Option B", Value = "B" } };
    }
}

步骤2：动态创建TemplateField并绑定GridView #

在自定义的BindGridViewData方法中，我们先获取数据源，然后遍历列信息创建TemplateField，再绑定数据：

private void BindGridViewData()
{
    // 1. 获取数据源（带搜索条件过滤）
    var dataTable = GetFilteredDataSource();

    // 2. 重置GridView列配置
    GridView1.Columns.Clear();
    GridView1.AutoGenerateColumns = false; // 关闭自动生成列

    // 3. 遍历数据源的列，动态创建TemplateField
    foreach (DataColumn column in dataTable.Columns)
    {
        var templateField = new TemplateField
        {
            HeaderText = column.ColumnName, // 可替换为友好的列名（从数据库读取别名）
            HeaderTemplate = new DynamicGridTemplate(ListItemType.Header, column.ColumnName),
            ItemTemplate = new DynamicGridTemplate(ListItemType.Item, column.ColumnName)
        };
        GridView1.Columns.Add(templateField);
    }

    // 4. 绑定数据
    GridView1.DataSource = dataTable;
    GridView1.DataBind();
}

// 带搜索条件的数据源获取方法
private DataTable GetFilteredDataSource()
{
    var dt = GetOriginalDataSource(); // 从数据库获取原始数据
    var filterExpression = new StringBuilder();

    // 遍历所有搜索条件，构建过滤表达式
    foreach (DataColumn col in dt.Columns)
    {
        if (HttpContext.Current.ViewState[$"Search_{col.ColumnName}"] != null)
        {
            var searchValue = HttpContext.Current.ViewState[$"Search_{col.ColumnName}"].ToString();
            if (!string.IsNullOrEmpty(searchValue))
            {
                if (filterExpression.Length > 0) filterExpression.Append(" AND ");
                // 根据列类型调整过滤逻辑（示例为字符串列）
                filterExpression.Append($"{col.ColumnName} LIKE '%{searchValue}%'");
            }
        }
    }

    // 应用过滤条件
    if (filterExpression.Length > 0)
    {
        dt.DefaultView.RowFilter = filterExpression.ToString();
    }

    return dt.DefaultView.ToTable();
}

// 模拟获取原始数据源的方法
private DataTable GetOriginalDataSource()
{
    // 实际从数据库查询300列的数据
    var dt = new DataTable();
    // 示例：添加几列模拟数据
    for (int i = 1; i <= 10; i++)
    {
        dt.Columns.Add($"Column_{i}", typeof(string));
    }
    // 添加行数据
    for (int j = 1; j <= 5; j++)
    {
        var row = dt.NewRow();
        for (int i = 1; i <= 10; i++)
        {
            row[$"Column_{i}"] = $"Value_{j}_{i}";
        }
        dt.Rows.Add(row);
    }
    return dt;
}

步骤3：处理300列的性能优化 #

300列的场景下，原生GridView容易出现性能问题，需要注意以下几点：

• 禁用ViewState：在GridView设置EnableViewState="false"，并通过Session或其他方式保存分页/搜索状态，减少页面回发时的数据传输量。
• 启用分页：必须开启GridView的分页功能（AllowPaging="true"），避免一次性加载所有行数据。
• 缓存下拉框数据源：同一列的DropDownList数据源重复使用，避免每次绑定都查询数据库，可将数据源缓存到Cache或Session中。
• 压缩ViewState：如果必须保留ViewState，可在Web.config中启用ViewState压缩：

  <system.web>
    <pages enableViewStateMac="true" viewStateEncryptionMode="Auto">
      <controls>...</controls>
    </pages>
    <machineKey validationKey="..." decryptionKey="..." validation="SHA1" decryption="AES"/>
    <compression enableHtmlCompression="true" enableViewStateCompression="true"/>
  </system.web>
  

替代方案：客户端表格插件（推荐用于300列场景） #

如果300列用GridView的服务器端渲染性能太差，推荐使用客户端表格插件（比如DataTables.js），优势如下：

1. 服务器端只需返回JSON格式的数据集和列信息，客户端负责渲染，减轻服务器压力。
2. 原生支持表头搜索、排序、分页，无需复杂的服务器端逻辑。
3. 动态生成列和DropDownList更灵活，可通过JS完全控制。

示例思路：

• 后端接口返回包含columns（列名集合）和data（行数据）的JSON。
• 前端用DataTables初始化表格，动态配置列，并在表头添加搜索框，单元格渲染为DropDownList。

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