如何使用 javascript 在 <form> 标记中附加 <asp:Button /> 等？答案

【问题标题】：How to append <asp:Button /> etc.. within the <form> tag using javascript?如何使用 javascript 在 <form> 标记中附加 <asp:Button /> 等？
【发布时间】：2013-01-07 16:39:09
【问题描述】：

这是我的示例代码：

    <script type="text/javascript">
    $(function () {
        $('body')
            .append('<form id="form1"></form>'); //append a new form element with id mySearch to <body>
        $('#form1')
            .attr("runat", "server")
            .append('<asp:Button runat="server" ID="btn1"/>');
    });
    </script>

这是我的body标签的样子：

    <body>

    </body>

我收到此错误：

Control 'btn1' of type 'Button' must be placed inside a form tag with runat=server.

提前致谢！ :)

更新：我试图省略

    .append('<asp:Button runat="server" ID="btn1"/>');

当我运行萤火虫时，我得到了这个：

   <body>
        <form id="form1" runat="server"></form>
   </body>

它确实有一个 runat="server"。为什么我不能把我的 asp:Button 放在里面？ o_O

【问题讨论】：

只需使用常规输入按钮...这正是 asp:button 呈现的内容。
是的，它可以工作，但我想使用像 'asp:Repeater' 这样的 asp ctrls 来绑定我的数据。还有其他方法吗？无论如何，谢谢@MikeSmithDev
您不能通过 Javascript 添加服务器控件。你为什么还要尝试这样做？为什么不能直接在页面中键入这些控件并摆脱 Javascript？
所以似乎我无法使用javascript放置任何asp ctrls。不管怎么说，还是要谢谢你！ :D

标签： javascript asp.net html

【解决方案1】：

您更新的问题仍然是错误的方法。你不能这样做：

$('#form1').attr("runat", "server")

并期望它的工作方式与您输入以下内容相同：

<form runat="server">

因为上面的标签是在服务器端处理的，实际上在客户端渲染是这样的：

<form method="post" action="default.aspx" id="ctl00">

这看起来不像你正在做的事情。

你有两个选择：

停止尝试使用 Javascript 添加任何 ASP.NET 控件（即以 <asp: 开头）或任何带有 runat="server" 的内容。如果您确实必须使用 Javascript 来执行此操作，请使用常规 HTML 控件。
停止使用 Javascript 并实际正确使用 <asp: 控件或带有 runat="server" 的 HTML 控件，然后从后面的代码中执行您需要执行的操作。

现在是切线。

关于Control 'btn1' of type 'Button' must be placed inside a form tag with runat=server. 的错误，假设您正确使用<form runat="server">，然后再试一次。你可能会发现它（有点）有效！

<form id="form1" runat="server">
    <asp:Button ID="btn2" Text="Button 2" runat="server" />
    <script>
        $(document).ready(function () {
            $('#<%= form1.ClientID %>').append('<asp:Button Text="Button 1" ID="btn1" runat="server"/>');
        });
    </script>
</form>

这个将渲染，但它不正确。除了令人困惑、讨厌的代码之外，它之所以有效，是因为 ASP.NET 实际上为那个 <asp:Button 呈现 HTML 并将其放入脚本块中，所以发送给客户端的是这个（和两个按钮......但仍然不是什么）你输入了）。

<input type="submit" name="btn2" value="Button 2" id="btn2" />
<script>
    $(document).ready(function () {
        $('#form1').append('<input type="submit" name="btn1" value="Button 1" id="btn1" />');
    });
</script>

现在是你没想到的部分。从代码隐藏中，您可以在页面加载上执行此操作：

protected void Page_Load(object sender, EventArgs e)
{
    btn1.Text = "This is Awful";
}

现在，第二个按钮显示为This is Awful，而不是在屏幕上显示Button 2 和Button 1 的两个按钮。

...但同样，这是完全错误的，如果您尝试这样做，大多数其他 <asp: 控件都会中断（我不确定为什么 ASP.NET 会转换 Javascript 块中的代码） .因此，请参阅上面的两个选项，了解如何继续。

【讨论】：

我试图放置一个 asp ctrl 并使用 javascript 附加它的原因是因为当用户单击一个 asp:Button asp:Repeater 时我想做一个类似于 slideDown 的动画。我想我应该听从你的建议。谢谢@MikeSmithDev！ :)
@DavidDeChavez 你想要做的仍然是可能的，只是采取不同的方法......新方法的任何问题，只需提出一个新问题:) 另外，我在我的回答。

【解决方案2】：

首先这部分代码并没有按预期运行

.append('<asp:Button runat="server" ID="btn1"/>');

必须在设计页面时添加用于该控件的runat="server"，或者在服务器端以编程方式添加，由服务器后面的代码编译并创建一个 html 部分。

当你在客户端用javascript添加这个时，服务端不知道也不能运行它，下编译它。

现在在第一部分中，您尝试再次在客户端页面内添加一个新的form

$('body')
            .append('<form id="form1"></form>'); 
        $('#form1')

这是 webform 的一个问题，因为 asp.net 必须只包含一个表单元素。在 asp.net 已准备好呈现的一个表单中，您需要添加其他按钮，而不是创建第二个。

要继续，您需要在页面上定义一个表单标签（不是使用 javascript）。如果您想添加回发输入按钮，您可以这样做，但必须将它们放在现有表单中，不创建新表单，也不使用 runat=server。然后手动处理该回发代码 - 这意味着您不会调用任何特定函数，您只需读取回发变量。

【讨论】：

是的，这是真的。但是当我在我的页面上定义表单标签时，我仍然无法放置任何 asp ctrls。请参阅上面我更新的问题。谢谢@Aristos
所以似乎我无法使用javascript放置任何asp ctrls。不管怎么说，还是要谢谢你！ :D