使用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，如果你需要的話問問我！