在 ASP.NET 回发后保持当前的 jQuery 手风琴窗格打开？

Question

我在 asp.net aspx weppage 上有一个 jquery 手风琴。在窗格内，我有 asp.net 按钮。当我单击按钮时，我所在的窗格会关闭并重新加载页面，默认为第一个窗格。我不介意重新加载，但是有没有办法在重新加载后保持当前窗格打开。现在，我只是在具有手风琴 id 的 div 上调用手风琴（）。

Answer 1

您可以在回发期间使用隐藏的输入字段来保持活动的手风琴索引，然后在手风琴的更改事件期间使用 javascript 填充它。

<asp:HiddenField ID="hidAccordionIndex" runat="server" Value="0" />

<script language="javascript" type="text/javascript">
    $(function(){
        var activeIndex = parseInt($('#<%=hidAccordionIndex.ClientID %>').val());

        $("#accordion").accordion({
            autoHeight:false,
            event:"mousedown",
            active:activeIndex,
            change:function(event, ui)
            {
                var index = $(this).children('h3').index(ui.newHeader);
                $('#<%=hidAccordionIndex.ClientID %>').val(index);
            }
        });
    });
</script>

您可能想出一种在更改事件期间捕获活动索引的更有效方法，但这似乎可行。

页面加载后，它会从隐藏字段中检索活动索引并将其存储在变量中。然后，它使用检索到的索引和自定义函数初始化手风琴，以触发 change 事件，该事件在激活新窗格时将新索引写入隐藏字段。

在回发期间，隐藏的字段值会保留在 ViewState 中，这样当再次加载页面时，折叠式会使用最后点击的窗格的索引进行初始化。

Answer 2

MaxCarey 的解决方案似乎运行良好，但最新版本的 jQuery UI (1.10.4) 似乎有些不同。正确的事件现在不是“更改”，而是“激活”（或“beforeActivate”，如果您想要取消事件的选项）。

<asp:HiddenField runat="server" ID="hidAccordionIndex" Value="0" />
...

$(document).ready(function () {
    var activeIndex = parseInt($("#<%=hidAccordionIndex.ClientID %>").val());

    $("#accordion").accordion({
        heightStyle: "content",
        active: activeIndex,
        activate: function (event, ui) {
            var index = $(this).children('h3').index(ui.newHeader);
            $("#<%=hidAccordionIndex.ClientID %>").val(index);
        }
    });
});

这里的问题是我可以验证 hidAccordionIndex 值是否设置为正确的值，但在回发时，无论我尝试什么，它都会被设置回 0。我已经尝试将它设置为空字符串，就像 Dave.Lebr1 建议的那样，但它仍然没有在回发中持续存在。

这应该在回发时仍然可用，因为我的 divAccordionIndex 字段应该有 ViewState（我已经验证它已启用）。

还有其他人在这方面取得成功吗？此菜单在我的母版页中，而且效果很好……除此之外。

Answer 3

使用ClientScript.RegisterStartupScript 写入按下按钮的手风琴窗格的索引或ID。假设用户单击窗格 3 中名为 btnSubmit 的按钮。然后它将像这样工作：

protected void btnSubmitClick(object sender, EventArgs e)
{
    //process button click

    //class this function at end:
    SetAccordionPane(3);
}

//you can call this function every time you need to set specific pane to open
//positon
private void SetAccordionPane(int idx)
{
    var s="<script type=\"text/javascript\">var paneIndex = "
      + idx +"</script">; 
    ClientScript.RegisterStartupScript(typeof(<YourPageClass>, s);
}

现在在 javascript 中：

$(function(){

    if(paneIndex)
    {
        $('.selector').accordion({active: paneIndex});
    }
    else
    {
        $('.selector').accordion();
    }
});

Answer 4

我知道这已经晚了，但它仍然可以帮助那些在这方面苦苦挣扎的人。这里的解决方案基本上是上述一些智慧的结合。 ;-)

我正在使用 jquery-ui-1.10.4.custom.min.js 和 jquery-1.6.3.min.js。

 <%--the hidden field saves the active tab during a postback--%>
        <asp:HiddenField ID="hdLastActive" runat="server" Value="0" />
    </div>
</form>

这里是javaScript：

<script type="text/javascript">
$(document).ready(function () {
    // get the last active tab index -or 0 on initial pagee load- to activate the tab
    var activeTab = parseInt($("[id$='hdLastActive']").val());

    // initialize the accordion to the activeTab and set the activate event to save the last active tab index.
    $("#accordion").accordion({
        active: activeTab,
        activate: function (e) {
            // save the active tab index in the hidden field
            $("[id$='hdLastActive']").val($(this).accordion("option", "active"));                
        }
    });
});

Answer 5

扩展之前的 HiddenField 想法，但不必破坏你的 JS：

在您的页面中：

<asp:HiddenField runat="server" ID="hidAccordionIndex" Value="0" ClientIDMode="Static" />

在你的 JS 中：

$('#yourAccordion').accordion({
    heightStyle: "content"
    , active: parseInt($('#hidAccordionIndex').val())
    , activate: function (e, ui) {
        $('#hidAccordionIndex').val($(this).children('h3').index(ui.newHeader));
    }
});

关键是 ClientIDMode="Static"。这种方法几乎不需要修改即可与几乎任何服务器端语言一起使用，因为 JS 不必更改，只需更改一个隐藏字段。

Answer 6

它在我这边工作请检查......

$(document).ready(function () {
    var activeIndex = parseInt($('#<%=hidAccordionIndex.ClientID %>').val());
    alert(activeIndex);
    $("#accordion").accordion({            
        active: activeIndex,
        beforeActivate: function (event, ui) {                
            var index = $(this).children('h3').index(ui.newHeader);
            $('#<%=hidAccordionIndex.ClientID %>').val(index);                
        }            
    });        
});

Answer 7

将可能需要单击或更新的按钮或网格视图放在更新面板中。然后 ui 手风琴将工作正常 100% + 保证.. Sarath@f1

Answer 8

        var activeIndex = parseInt($('#<%=hidAccordionIndex.ClientID %>').val());       

        $("#accordion,#inneraccordian").accordion({
            heightStyle: "content",
            collapsible: true,
            navigation: true,
            active: activeIndex,
            beforeActivate: function (event, ui) {
                var index = $(this).children('h3').index(ui.newHeader);
                $('#<%=hidAccordionIndex.ClientID %>').val(index);
            }
        });

Answer 9

创建手风琴时使用“活动”选项。像这样的：

$('.selector').accordion({ active: 2 });

这将激活手风琴中的第二个选项。您还可以传递一个选择器以通过 id 进行选择。

Answer 10

$("#accordion").accordion({
    heightStyle: "content",
    collapsible: true,
    navigation: true
});

将navigation 属性设置为true 将保留手风琴面板的状态。

Answer 11

要添加到 MaxCarey 的帖子中...
获取新手风琴索引的更可靠方法是

change: function (event, ui) {
    var index = $(this).accordion("option", "active");
    $("#<% =hidAccordionIndex.ClientID %>').val(index);
}

Answer 12

我来这里时遇到了同样的问题。 1. MaxCarey 的答案看起来足以解决问题，但不幸的是我没有手风琴的 ID。 （我使用的是第三方模板，他们只使用 css 类）。 2. Imran H. Ashraf 也不错，但同样的问题是无法通过 ID 访问手风琴。

我的问题： 1. 我在带有 Edit Update Cancel 命令的手风琴中有一个 DetailsView。 2. 当我点击编辑按钮时，它可以工作，但我的手风琴关闭了。

我的解决方案： 1. 我在表单上放了一个 ScriptManager。 2. 我在手风琴里放了一个 UpdatePanel。 3. 我将DetailsView 放在UpdatePanel 中。 4. 就是这样，没有编码，没有代码，它工作正常。

这里是html标记：

<div class="accordion-wrapper first-child">
<a href="javascript:void(0)" class="accordion-title orange"><span>Personal Information</span></a>
<div class="accordion" style="display: none;">
    <div class="iqb-field-area">
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:DetailsView ID="dvPersonalInfo" runat="server" Height="50px" Width="100%" AutoGenerateRows="False"
                    DataSourceID="dsPersonalInfo">
                    <Fields>
                        <asp:BoundField DataField="PTCP_FullName" HeaderText="Full Name" ReadOnly="True"
                            SortExpression="PTCP_FullName" />
                        <asp:BoundField DataField="PTCP_ContactNumber" HeaderText="Contact Number" SortExpression="PTCP_ContactNumber" />
                        <asp:BoundField DataField="PTCP_email" HeaderText="e-mail" SortExpression="PTCP_email" />
                        <asp:BoundField DataField="PTCP_PhysicalAddress" HeaderText="Physical Address" SortExpression="PTCP_PhysicalAddress" />
                        <asp:CommandField ShowEditButton="True">
                            <ControlStyle CssClass="right button" />
                        </asp:CommandField>
                    </Fields>
                </asp:DetailsView>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
</div>

希望它可以帮助某人。

谢谢 快乐编码

Answer 13

我使用此解决方案使其适用于我的项目，但有些东西不起作用。

首先，手风琴不会将索引保存在内存中，因此手风琴每次都在重新初始化。

其次，我找不到'#<%=hidAccordionIndex.ClientID %>'的隐藏字段

所以，我要做的是

1- 将隐藏字段默认值设置为空

<asp:HiddenField ID="hidAccordionIndex" runat="server" Value="" />

2- 用这个获取活动索引

一定要parseInt，否则不行

 var activeIndex = parseInt($('input[id$=hidAccordionIndex]').val());

这是我的 javascript 代码：

  $("#accordion").accordion
({
        autoHeight:false,
        event: "mousedown",
        active: activeIndex,
        collapsible: true,
        change: function (event, ui) 
        {
            var index = $(this).accordion("option", "active");
            $('input[id$=hidAccordionIndex]').val(index);
        }
});