使用AJAX动态添加asp控件

时间:2012-10-11 11:32:57

标签: asp.net ajax asp.net-ajax

我想要 +添加更多原创用途 LinkBut​​ton!

enter image description here

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

        

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

我完全错了,我是否必须按照其他方式去做? 我很困惑......

1 个答案:

答案 0 :(得分:0)

我找到了自己做的方法。

我用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,如果你需要它,请问我!