how to create dynamic textbox,dropdownlist in asp.net - asp.net

Question

I want to create dynamic 2 textbox and 2 dropdownlist below each textbox and dropdownlist in button click. This is the code i am using which creates dynamic textbox and dropdownlist but its creating control in horizontal way.I want creation of dynamic controls in a vertical manner which will be coming under textbox and dropdown.
<div id="dvContainer" runat="server">
<table align="center" cellpadding="0" cellspacing="0" width="90%">
<tr>
<td>
<table width="100%">
<tr>
<td align="center">Date</td>
<td>
<asp:TextBox ID="TextBox1" runat="server" Width="150px"> </asp:TextBox>
</td>
<td align="center">Time</td>
<td>
<asp:TextBox ID="TextBox2" runat="server" Width="150px"></asp:TextBox>
</td>
<td align="center">Godown</td>
<td>
<asp:DropDownList ID="DropDownList1" runat="server" Width="150px">
</asp:DropDownList>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><table width="100%">
<tr>
<td align="center">Item</td>
<td align="center">QTY</td>
<td align="center">Unit</td>
<td align="center">Available</td>
<td align="center"></td>
</tr>
<tr>
<td align="center">
<asp:DropDownList ID="DropDownList2" runat="server" Width="150px">
</asp:DropDownList>
</td>
<td align="center">
<asp:TextBox ID="TextBox3" runat="server" Width="150px"></asp:TextBox>
</td>
<td align="center">
<asp:DropDownList ID="DropDownList3" runat="server" Width="150px">
</asp:DropDownList>
</td>
<td align="center">
<asp:TextBox ID="TextBox4" runat="server" Width="150px"></asp:TextBox>
</td>
<td align="center">
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
</td>
</tr>
</table></td>
</tr>
</table>
</div>
This is the code i am using in cs page
public partial class StockEntry : System.Web.UI.Page
{
protected System.Web.UI.WebControls.DropDownList Ddl_Item;
protected System.Web.UI.WebControls.TextBox Txt_Quantity;
protected System.Web.UI.WebControls.DropDownList Ddl_Unit;
protected System.Web.UI.WebControls.TextBox Txt_Available;
protected void Page_Load(object sender, EventArgs e)
{
}
int countTimes = 0;
protected void Button1_Click(object sender, EventArgs e)
{
if (ViewState["countTimes"] == null)
{
countTimes = 1;
}
else
{
countTimes = Convert.ToInt32(ViewState["countTimes"]);
}
for (int i = 0; i < countTimes; i++)
{
Ddl_Item = new DropDownList();
Ddl_Item.ID = "Ddl_Item" + i;
Ddl_Item.Width = 180 + i;
Txt_Quantity = new TextBox();
Txt_Quantity.ID = "Txt_Quantity" + i;
Txt_Quantity.Width = 180 + i;
Ddl_Unit = new DropDownList();
Ddl_Unit.ID = "Ddl_Unit" + i;
Ddl_Unit.Width = 180 + i;
Txt_Available = new TextBox();
Txt_Available.ID = "Txt_Available" + i;
Txt_Available.Width = 180 + i;
dvContainer.Controls.Add(Ddl_Item);
dvContainer.Controls.Add(Txt_Quantity);
dvContainer.Controls.Add(Ddl_Unit);
dvContainer.Controls.Add(Txt_Available);
}
countTimes = countTimes + 1;
ViewState.Add("countTimes", countTimes);
}
}

Answer 1

You are adding your controls in the div, not in the table and next to each other. To add some html structure around controls, you can create literal object with your html in its text, and add them before/after your controls (for example you can add <br/> )

Answer 2

I think what you want is HtmlGenericControl http://msdn.microsoft.com/en-us/library/system.web.ui.htmlcontrols.htmlgenericcontrol.aspx
This will allow you to add the table that you require to set your layout, you could of course wrap each control in a div and control your layout using CSS.