Question

这很令人沮丧，我想在点击input field时在div页面上的aspx内创建新的button。我使用javascript函数将新的子元素（输入字段）附加到现有的div。这一切看起来像这样：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="Pages_test" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">

        function clone() {
            var html = document.createElement("input");
            html.setAttribute("id", 1);
            html.setAttribute("name", "dejan");
            html.setAttribute("value", "some text");
            html.setAttribute("type", "text");
            document.getElementById("panj").appendChild(html);
        }

    </script>
</head>
    <body>
        <form id="form1" runat="server">
            <div id="panj">
                Djubrov
            </div>
            <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="clone()" />
        </form>
    </body>
</html>

有趣的是，当我点击按钮时，带有设置文本值的文本元素闪烁第二，但它在消息后消失。我错过了什么吗？

Answer 1

每次单击该按钮都会导致回发。

通过停止回发来修复它，如下所示：

<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="clone(); return false;" />

Answer 2

您的按钮会向服务器发出请求，随后的响应将使用新的HTML文档覆盖该页面。从JavaScript函数返回false以阻止asp:Button回发：

function clone() {
    // your above code
    return false;
}

并修改按钮

OnClientClick="return clone()"

如果您的asp:Button不需要与服务器进行互动，请考虑将其设为<button>或<input type='button' />。

Answer 3

如果您需要后面代码中生成的文本字段的值，那么最好不要通过Javascript动态创建它。您可以创建一个普通的文本框，并将其设置为最初不可见，如下所示：

<asp:TextBox ID="yourTextboxID" Visible="False" runat="server" />

按下按钮后，在后面的代码中处理事件并使文本框可见：

yourTextboxID.Visible = True;

Viewstate会在回发中保留这些值。

如果按下每个按钮应该创建一个额外的文本框，你也可以在代码隐藏中执行此操作，即在ascx中使用占位符，然后在按下每个按钮时为其附加一个新文本框：

yourPlaceholderID.Controls.Add(new TextBox() { ID = "textbox1" });

我创建了html div元素，但它在ASP.NET中立即消失

3 个答案: