Add asp controls dynamically using AJAX - asp.net

Question

I want to make the +Add more original use LinkButton!
I have this row on my table I am using:
<asp:Label ID="Label43" runat="server"
Text="P-2.5 Original use:"></asp:Label>
</td>
<td class="style1">
<div style="float:left;">
<asp:DropDownList class="text-input" ID="DDLOriginalUse" runat="server"
DataSourceID="SqlDataSource5" DataTextField="DESCRIPTION"
DataValueField="ID_PROGRAM_USE" OnSelectedIndexChanged="itemSelected" AutoPostBack="True" AppendDataBoundItems="true">
<asp:ListItem Text="-Not assigned-" Value="-1" Selected="True" />
</asp:DropDownList>
</div>
<asp:UpdatePanel runat="server" style="float:left;" id="UpdatePanel2" updatemode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger controlid="DDLOriginalUse" eventname="SelectedIndexChanged" />
</Triggers>
<ContentTemplate>
<asp:Label ID="lblProgramType" runat="server"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:SqlDataSource ID="SqlDataSource5" runat="server"
ConnectionString="<%$ ConnectionStrings:MesarchConnectionString %>"
SelectCommand="SELECT * FROM [PROGRAM_USE]"></asp:SqlDataSource>
</td>
</tr>
I want to add new rows with the same content as above so I am using an asp:PlaceHolder :
this code continues..
</tr>
<asp:UpdatePanel runat="server" id="UpdatePanel1" updatemode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger controlid="LinkButtonAddOriginal" eventname="Click" />
</Triggers>
<ContentTemplate>
<asp:PlaceHolder ID="PlaceHolderAddNewOriginalUse" runat="server"></asp:PlaceHolder>
</ContentTemplate>
</asp:UpdatePanel>
<tr>
<td>
</td>
<td class="style1">
<asp:UpdatePanel runat="server" id="UpdatePanel3" updatemode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger controlid="LinkButtonAddOriginal" eventname="Click" />
</Triggers>
<ContentTemplate>
<b><asp:LinkButton ID="LinkButtonAddOriginal" OnClick="AddMoreOriginal" runat="server">+Add more original use</asp:LinkButton></b>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
and in my code behind I am doing this for the click(I want to add maximum 5 text boxes):
private static int countOriginalUse = 1;
private static LiteralControl htmlPresentation = new LiteralControl();
protected void AddMoreOriginal(object sender, EventArgs e)
{
StringBuilder str_for_ltr = new StringBuilder();
countOriginalUse++;
if (countOriginalUse >= 6) { LinkButtonAddOriginal.Text = "You can not add more.";return; }
str_for_ltr.Append("<tr><td> P-2.5 Original use " + countOriginalUse.ToString() + ":</td>");
str_for_ltr.Append("<td class='style1'>");
str_for_ltr.Append("</td>");
str_for_ltr.Append("</tr>");
htmlPresentation.Text += str_for_ltr.ToString();
PlaceHolderAddNewOriginalUse.Controls.Add(htmlPresentation);
/*DropDownList ddl1 = new DropDownList();
ddl1.ID="Dropdown1";
ddl1.CssClass = "Mycss";
ddl1.Items.Add("test");
PlaceHolderAddNewOriginalUse.Controls.Add(ddl1);
PlaceHolderAddNewOriginalUse.Controls.Add(new LiteralControl("<br/>"));*/
}
So the problems I face here are that it does not adds new rows, and even the text is not where I placed my asp:PlaceHolder (is on the top).
And surely I will have more problems when I will have to add this DropDownList with also a UpdatePanel for it(as shown on my first code).
Am I doing it totally wrong, do I have to follow some other way to do it?
I am confused...

Answer 1

I found a way to do it myself.
I made some new rows with DropDownLists in them and their personal UpdateControl but i had their style = "display:none".
then I have my link button like this:
<tr>
<td>
</td>
<td class="style1">
<b><a id="linkAddOriginal" onclick="javascript:addOriginalUse()">+Add more original use</a></b>
</td>
</tr>
and I also made this simple javascript function with a static variable in which I show the appropriate row each time:
<script type="text/javascript">
function addOriginalUse() {
if (typeof addOriginalUse.counter == 'undefined') {
// It has not... perform the initilization
addOriginalUse.counter = 1;
}
addOriginalUse.counter++;
if (addOriginalUse.counter >= 6) { document.getElementById("linkAddOriginal").innerHTML = "You can not add more original uses."; return; }
var ddl = document.getElementById("originalUseRow" + addOriginalUse.counter);
ddl.style.display = 'inline-block';
}
</script>
I have also some extra code showing the data depending on ItemSelection of the DropDownList, if you need it ask me!