dynamic panel/controls - ASP.Net VS2008

Question

I have the following table

<td class="style2">
    <asp:DropDownList ID="DropDownList1" runat="server">
        <asp:ListItem>Location</asp:ListItem>
        <asp:ListItem>Name</asp:ListItem>
        <asp:ListItem>SSN</asp:ListItem>
    </asp:DropDownList>
    <asp:DropDownList ID="DropDownList2" runat="server">
        <asp:ListItem>LIKE</asp:ListItem>
        <asp:ListItem>=</asp:ListItem>
    </asp:DropDownList>
    <br />
    <br />
</td>
<td valign="bottom">
   <asp:Button ID="btnAdd" runat="server" Text="Add" />
</td>

When btnAdd is clicked i want to add another row of those filters. i assume i would create a panel and have these 3 controls and the add button would create a new panel or do i create all controls on the fly and then add them with code behind.

Edit:: When I click on btnAdd then I want to add another row as such

Before btnAdd Click

<td class="style2">
        <asp:DropDownList ID="DropDownList1" runat="server">
            <asp:ListItem>Location</asp:ListItem>
            <asp:ListItem>Name</asp:ListItem>
            <asp:ListItem>SSN</asp:ListItem>
        </asp:DropDownList>
        <asp:DropDownList ID="DropDownList2" runat="server">
            <asp:ListItem>LIKE</asp:ListItem>
            <asp:ListItem>=</asp:ListItem>
        </asp:DropDownList>
        <br />
        <br />

    </td>

After btnAdd:

<td class="style2">
        <asp:DropDownList ID="DropDownList1" runat="server">
            <asp:ListItem>Location</asp:ListItem>
            <asp:ListItem>Name</asp:ListItem>
            <asp:ListItem>SSN</asp:ListItem>
        </asp:DropDownList>
        <asp:DropDownList ID="DropDownList2" runat="server">
            <asp:ListItem>LIKE</asp:ListItem>
            <asp:ListItem>=</asp:ListItem>
        </asp:DropDownList>
        <br />
        <br />
    </td>

<tr>
<td class="style2">
        <asp:DropDownList ID="DropDownList1" runat="server">
            <asp:ListItem>Location</asp:ListItem>
            <asp:ListItem>Name</asp:ListItem>
            <asp:ListItem>SSN</asp:ListItem>
        </asp:DropDownList>
        <asp:DropDownList ID="DropDownList2" runat="server">
            <asp:ListItem>LIKE</asp:ListItem>
            <asp:ListItem>=</asp:ListItem>
        </asp:DropDownList>
        <br />
        <br />
    </td>
</tr>

Answer 1

It would be easier to show/hide the third dropdown rather than adding it dynamically.

DropDownList3.Visible = true;

When you add dynamically you get into viewstate problems if you dont add it at the right time (page lifecycle), its not worth the hassle if you can avoid it.

If you have to then i'd make your row into a user control, and keep adding new instances of that. reload viewstate occurs after init and after load, so make sure your control is loaded in init ideally on all postbacks.

Answer 2

You could do something in the code behind which makes your dropdowns visible. In other words:

<td class="style2">
    <asp:DropDownList ID="DropDownList3" runat="server" Visible="false">
        <asp:ListItem>Location</asp:ListItem>
        <asp:ListItem>Name</asp:ListItem>
        <asp:ListItem>SSN</asp:ListItem>
    </asp:DropDownList>
    <asp:DropDownList ID="DropDownList4" runat="server" Visible="false">
        <asp:ListItem>LIKE</asp:ListItem>
        <asp:ListItem>=</asp:ListItem>
    </asp:DropDownList>

And your code behind would have this in the button_OnClick event:

DropDownList3.Visible = true;
DropDownList4.Visilbe = true;

And of course if you do these on an updatepanel, it will make the transition nicer than refreshing the whole page.