使用AJAX动态添加asp控件

Question

我想使+添加更多原创使用 LinkBut​​ton！

我有我的桌子此行我使用：

 <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> 
        &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;<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> 

我想如上所以我用一个asp用相同的内容添加新行：PlaceHolder： 此代码继续..

</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> 
     &nbsp;</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> 

在我后面的代码，我做这行的点击（我想添加最多5个文本框）：

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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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/>"));*/ 
    } 

所以我面对这里是它不添加新行，甚至问题文本不是我放置我的asp：PlaceHolder（位于顶部）的位置。

当我必须添加此DropDownList及其UpdatePanel（如我的第一个代码所示）时，肯定会遇到更多问题。

我这样做是完全错误的，我是否必须按照其他方式来做到这一点？ 我很困惑...

Answer 1

我发现了一种方法来自己做。

我在他们和他们的个人UpdateControl取得与DropDownLists一些新行，但我有自己的style = "display:none".

然后我有我的链接按钮是这样的：

  <tr> 
       <td> 
        &nbsp;</td> 
       <td class="style1"> 
        <b><a id="linkAddOriginal" onclick="javascript:addOriginalUse()">+Add more original use</a></b> 
       </td> 
      </tr> 

，我也做这个简单的JavaScript函数与静态变量，其中我显示适当的行，每次：

<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> 

我也有一些额外的代码显示d ata取决于DropDownList的ItemSelection，如果你需要的话问问我！