在回发ASP.NET上维护折叠状态

Question

我有两种不同的形式，它们折叠并显示其中一种或另一种，并且有一个按钮来控制它们。

<div>
<button type="button" 
data-toggle="collapse" 
data-target=".multi-collapse" 
aria-expanded="false" 
aria-controls="form1 form2"> Change Form
</button>
<div class="collapse multi-collapse show" id="form1">
<asp:DropDownList AutoPostBack="true" 
OnSelectedIndexChanged="SetDdl2ValuesBasedOnWhatIsSelectedOnDdl1" 
ID="Ddl1" 
runat="server">
</asp:DropDownList>
<asp:DropDownList ID="Ddl2" 
runat="server">
</asp:DropDownList>
<asp:Button ID="Button1" OnClick="SubmitBtn"
<div>
<div class="collapse multi-collapse" id="form2">
<asp:DropDownList AutoPostBack="true" 
OnSelectedIndexChanged="SetDdl2ValuesBasedOnWhatIsSelectedOnDdl1" 
ID="Ddl1" 
runat="server">
</asp:DropDownList>
<asp:DropDownList ID="Ddl2" 
runat="server">
</asp:DropDownList>
<asp:Button ID="Button1" OnClick="SubmitBtn"
<div>
</div>

我的问题是，每当有帖子回复时，我就会失去表单的崩溃状态，它会回到表单1显示和表单2隐藏的状态。

我想保存可折叠文件的状态，这样它们在回发后保持不变，我不知道该怎么做。

Answer 1

我已经通过PageRequestManager完成了这项工作，当然保留了一个或两个div的状态，在您的情况下有两个，但如果有更多，我给出的解决方案非常困难，但功能强大：

ASPX代码：

在UpdatePanel中添加控件

<div>
<button type="button" 
data-toggle="collapse" 
data-target=".multi-collapse" 
aria-expanded="false" 
aria-controls="form1 form2"> Change Form
</button>
<asp:UpdatePanel ID="up" runat="server">
<ContentTemplate>

<div class="collapse multi-collapse show" id="form1">
<asp:DropDownList AutoPostBack="true" 
OnSelectedIndexChanged="Ddl1_SelectedIndexChanged"
ID="Ddl1" 
runat="server">
</asp:DropDownList>
<asp:DropDownList ID="Ddl2" 
runat="server">
</asp:DropDownList>
<asp:Button runat="server" ID="Button1" OnClick="Button1_Click" Text="btn1" />
</div>
<div class="collapse multi-collapse" id="form2">
<asp:DropDownList AutoPostBack="true" 
OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"
ID="DropDownList1" 
runat="server">
</asp:DropDownList>
<asp:DropDownList ID="DropDownList2" 
runat="server">
</asp:DropDownList>
<asp:Button runat="server" ID="Button2" OnClick="Button1_Click1" Text="btn2" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>

JavaScript代码：

事件add_beginRequest是在Postback启动并可以保存DOM状态时触发的事件，而add_endRequest是在面板更新并Postback结束时触发的活动，这是根据条件排列控件的位置：

<script type="text/javascript">
var statusForm1 = false,
statusForm2 = false;
var prm = Sys.WebForms.PageRequestManager.getInstance();
function EndRequestHandler(sender, args) {
if (statusForm1) {
$('#form1').collapse('show');
}
if (statusForm2) {
$('#form2').collapse('show');
}
}
function BeginRequestHandler(sender, args) {
statusForm1 = $('#form1').is(":visible");
statusForm2 = $('#form2').is(":visible");
}
prm.add_beginRequest(BeginRequestHandler);
prm.add_endRequest(EndRequestHandler);
</script>

Answer 2

有一种简单而直接的方法，就是将类show添加到要实际显示的div中。所以，为了做到这一点，必须将两个div都设置为在服务器上运行。以下是我针对这个问题提出的想法：

<div class="collapse multi-collapse show" id="myform1" runat="server"> 
<!-- because in aspx, there is already a form1 form which is parent of all elements that runs at server -->
<!-- Other elements go here -->
</div>
<div class="collapse multi-collapse" id="myform2" runat="server">
<!-- Other elements go here -->
</div>

在服务器事件中，您需要通过向相应的divs添加类来隐藏和显示它们。

protected void SubmitBtn1(object sender, EventArgs e)
{
// DoStuff(); 
ShowMyForm1();
}
protected void SubmitBtn2(object sender, EventArgs e)
{
// DoStuff(); 
ShowMyForm2();
}
protected void SetDdl2ValuesBasedOnWhatIsSelectedOnDdl1(object sender, EventArgs e)
{
// DoStuff();
// I assume this dropdown is in second form div.
ShowMyForm2();
}
private void ShowMyForm1()
{
myform1.Attributes["class"] = "collapse multi-collapse show"; // this will show the div
myform2.Attributes["class"] = "collapse multi-collapse"; // this will hide the div.
}
private void ShowMyForm2()
{
myform1.Attributes["class"] = "collapse multi-collapse"; // this will hide the div
myform2.Attributes["class"] = "collapse multi-collapse show"; // this will show the div
}

请注意，我为您的提交按钮提供了两个事件，因为它出现在两个表单上，并且具有相同的ID，这对于服务器控件是不允许的。ID必须是唯一的。你的form2有form1复制的所有元素

因此，为了区分这些元素，你必须给它们不同的IDs。