使用 AJAX 动态添加 asp 控件答案

【问题标题】：Add asp controls dynamically using AJAX使用 AJAX 动态添加 asp 控件
【发布时间】：2012-10-11 11:32:56
【问题描述】：

我想让+添加更多原创使用 LinkButton！

我正在使用的桌子上有这一行：

        <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 时，我肯定会遇到更多问题（如我的第一个代码所示）。

我这样做完全错了吗，我必须遵循其他方式吗？我很困惑……

【问题讨论】：

标签： asp.net ajax asp.net-ajax

【解决方案1】：

我自己找到了一种方法。

我用 DropDownLists 和他们的个人 UpdateControl 创建了一些新行，但我有他们的 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>

我还有一些额外的代码来显示取决于 DropDownList 的 ItemSelection 的数据，如果你需要的话可以问我！

【讨论】：