ASP.NET 如何使 TextBox 宽度依赖于 GridView 列宽？

Question

我需要在表格（GridView）上制作过滤器，在每列的顶部应该出现“TextBox”以输入过滤器值。 GridView 宽度不固定，列的宽度总是根据结果而变化。当 GridView 的列宽发生变化时，如何使列顶部的 TextBox 宽度自动改变？

如图所示，共有 3 列。白色 - 文本框（用于过滤数据），黄色 - GridView

这是我当前的代码：

<form id="form1" runat="server">
<div>
    <asp:TextBox ID="InsertName" runat="server" width="130px" placeholder="Name Filter..."></asp:TextBox>
    <asp:TextBox ID="InsertEmail" runat="server" width="130px" placeholder="Domain Filter..."></asp:TextBox>
    <asp:TextBox ID="InsertCountry" runat="server" width="130px" placeholder="Domain Filter..."></asp:TextBox>
    <br />
    <br />
</div>
    <asp:GridView ID="GridView1" runat="server" BackColor="#FFFFB3" width="390px" OnSelectedIndexChanged="GridView1_SelectedIndexChanged">
    </asp:GridView>
</form>

在这里，我为每个 TextBox 和 GridView 设置了固定宽度。但这里有个问题，GridView 的宽度是固定的，正如我写的width="390px"，但列的宽度总是在变化。你有什么想法吗？

Answer 1

您无法在当前 HTML 标记中完成此操作，因为包含文本框的 DIV 不知道 GridView 调整大小。

相反，您可以像这样在TemplateField 中使用HeaderTemplate（文本框宽度为100%）：

<asp:GridView ID="GridView1" runat="server" BackColor="#FFFFB3" width="390px" OnSelectedIndexChanged="GridView1_SelectedIndexChanged">
  <Columns>
    ...
    <asp:TemplateField HeaderText="Name">
      <HeaderTemplate>
        <asp:TextBox ID="InsertName" runat="server" width="100%" placeholder="Name Filter..."></asp:TextBox>
      </HeaderTemplate>
      <ItemTemplate>
      ...
      </ItemTemplate>
    </asp:TemplateField>
    ...
  </Columns>
</asp:GridView>