Asp.net JQuery-添加/删除表单和div

我肯定我以前在什么地方见过一些例子，但我似乎找不到它们。我有一个有5个按钮的页面。我希望每个按钮加载不同的表单，而不刷新。我可以使用UpdatePanels，但这听起来有些过分（而且带宽成本很高）。我想一次性加载所有表单，因此点击按钮基本上隐藏/显示相关表单。我不能使用

html（）

方法（按原样）来实现这一点，因为表单可能非常复杂，并且包含回发到服务器的ASP.NET控件。相反，我将表单放在单独的

div

中

我试过这样做：

                case "button1":

                    $(".current_form").show();
                    $("#divForm1").prependTo($('.current_form'));
                    break;

                case "button2":

                    $(".current_form").show();
                    $("#divForm2").prependTo($('.current_form'));
                    break;

<!-- Possible <form> tag here -->
<div class="current_form"></div>
<!-- Possible </form> tag here -->
<div id="divForm1">
 This is div 1
</div>
<div id="divForm2">
  This is div 2
</div>

这样做的问题是，旧的表单总是保留在那里，而不是被替换。 是否可以将

div

附加到JQuery中的给定容器？还是有其他更好的方法

谢谢你的帮助

完整代码

<script type="text/javascript">
    $(document).ready(function() {

        $("button").button();
        $("button").click(function() {

            switch ($(this).attr("value")) {
                case "button1":

                    $('.current_form').empty().show();
                    $("#divForm1").clone().prependTo($('.current_form'));
                    break;

                case "button2":

                    $('.current_form').empty().show();

                    $("#divForm2").clone().prependTo($('.current_form'));
                    break;




            }
            return false; //prevent postback
        });



    });

</script>

$（文档）.ready（函数（）{
$（“按钮”）.button（）；
$（“按钮”）。单击（函数（）{
开关（$（this.attr（“value”））{
案例“button1”：
$（'.current_form'）.empty（）.show（）；
$（“#divForm1”）.clone（）.prependTo（$（'.current_form'）；
打破
案例“按钮2”：
$（'.current_form'）.empty（）.show（）；
$（“#divForm2”）.clone（）.prependTo（$（'.current_form'）；
打破
}
返回false；//防止回发
});
});

我正在测试这些div：

<div class="current_form">
<div id="divForm1" >

 This is div 1

</div>
</div>


<div class="current_form">
<div id="divForm2" >

  This is div 2

</div>
</div>

我是第一组
我是二组

您可以这样称呼它：

$('.current_form').empty().show();
$("#divForm1").clone().prependTo($('.current_form'));

您的标记如下所示：

                case "button1":

                    $(".current_form").show();
                    $("#divForm1").prependTo($('.current_form'));
                    break;

                case "button2":

                    $(".current_form").show();
                    $("#divForm2").prependTo($('.current_form'));
                    break;

<!-- Possible <form> tag here -->
<div class="current_form"></div>
<!-- Possible </form> tag here -->
<div id="divForm1">
 This is div 1
</div>
<div id="divForm2">
  This is div 2
</div>

Javascript:

$(function() {
  $("button").button().click(function() {
    $(".form").hide();
    $("#divForm" + $(this).attr("value").replace('button','')).show();
    return false;
  });
});

CSS:

---

谢谢你的回复。我试过这个方法，我想我更接近了。

当前表单的背景显示，但它是空白的。如果我删除
empty（）
方法，那么表单就会显示出来，但它会不断地添加到表单中，而不是替换它。@superexsl-这不应该发生，可能是某个地方缺少了一个中断，你能发布完整的代码吗？@superexsl-更新了答案，是否像那样移动标记？另一种方法是给
divFormXX
元素一个class
。form
或其他东西，然后隐藏/显示它们，这将是一种更简单的方法。如果这是一个选项，请告诉我是否是，我将发布一个示例。感谢您的帮助。这是一个新的标记，所以请随意做任何你认为最好的事情。我尝试了代码，它工作了，但它似乎在屏幕的一侧创建了一个副本。（但只有一次）@superexsl-添加了一个全新的选项，总体上更简单，它在加载时默认显示
#divForm1
元素，如果不需要，只需删除该样式即可。而不是移动周围的元素，这只是隐藏和显示的东西，所以只有一个单一的时间是可见的，这似乎是你所追求的…让我知道如果没有。