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

Question

我需要在表格（GridView）上制作过滤器，每个列的顶部应该出现＆＃34; TextBox＆＃34;输入过滤值。 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 调整大小。

相反，你可以像HeaderTemplate这样使用TemplateField（文本框宽度为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>