动态创建文本框而不回发答案

【问题标题】：Create textbox dynamically without postback动态创建文本框而不回发
【发布时间】：2013-02-26 11:09:17
【问题描述】：

我想要一个按钮，onclick 将动态创建一个文本框而无需任何回发。我试图使用更新面板来做到这一点，但直到现在我还没有设法做到这一点。单击按钮时不会创建任何内容。以下是我使用过的代码：

 <asp:PlaceHolder ID="textboxes" runat="server"/>

     <asp:ScriptManager ID="scriptMgr" runat="server" />
                <asp:UpdatePanel ID="updatePnl" runat="server">
                    <ContentTemplate>
                        <div>
                            <asp:Button id="Button" text="Add Destination" OnClick="btnCreate_Click" runat="server"/>
                        </div>
                    </ContentTemplate>
                </asp:UpdatePanel>

代码隐藏

  protected void btnCreate_Click(object sender, EventArgs e)
        {
             textboxes.Controls.Add(new TextBox() { ID = "txt" + 1 });

        }

这是我在aler(container)上得到的；

【问题讨论】：

标签： asp.net dynamic updatepanel postback

【解决方案1】：

您必须使用 OnClientClick 来创建没有回发的文本框

<asp:Button id="Button" text="Add Destination" OnClientClick="return CreateTxt(); runat="server"/>

<script type="text/javascript">


function CreateTxt()
{
    var container = document.getElementById("myContainerDiv");
    var html = document.getElementById('myContainerDiv').innerHTML;
    html = html + "<input type=text ... /><br />";
    container.innerHTML= html;
   return false;
}

</script>

myContainerDiv 是要添加文本框的 div 的名称。

【讨论】：

仍然没有创建文本框，它也会回发@Aarif
我已经在我的问题@Aarif 中发布了警报结果
仍然没有创建文本框。 @Aarif
我在函数中用 innerHTML 替换了 innerHtml
请将第二行更改为多个文本框 var html = document.getElementById('myContainerDiv').innerHTML;

【解决方案2】：

在按钮点击事件中使用这个。

    TextBox t = new TextBox();
    t.ID = "txt";
    this.form1.Controls.Add(t);

您可以使用它添加任意数量的文本框。但是当回发发生时，它们很难管理。请参阅下面的链接以了解有关动态控件和回发的更多信息..

1.Dynamic Web Server Controls and View State

2.Dynamic Web Controls, Postbacks, and View State

【讨论】：

我需要让用户能够创建任意数量的文本框，然后我将获得文本框的值@coder
@IT_info 通过使用动态控件很难避免回发。
有没有更好的方法来避免创建文本框的回发？ @编码器
我已经更新了我的答案检查它@IT_info..参考那些你会更好理解的链接。

【解决方案3】：

我认为在 Javascript 中，你可以这样使用。希望这对您有所帮助...

var element = document.createElement("jsTextBox");

//为元素分配不同的属性。

    element.setAttribute("value", "text");
<SpanElement>.appendChild(element);

【讨论】：