Сохранить текущую панель аккордеона jQuery открытой после обратной передачи ASP.NET?

Question

У меня есть jquery аккордеон на aspx weppage asp.net. Внутри панелей у меня есть кнопки asp.net. Когда я нажимаю на кнопку, панель, в которой я находился, закрывает и перезагружает страницу по умолчанию на первой панели. Я не против перезагрузки, но есть ли способ сохранить текущую панель открытой после перезагрузки. Прямо сейчас я просто вызываю аккордеон () на div с id аккордеона.

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>

Возможно, вы могли бы предложить более эффективный способ захвата активного индекса во время события изменения, но, похоже, это работает.

Когда страница загружена, она получает активный индекс из скрытого поля и сохраняет его в переменной. Затем он инициализирует аккордеон с использованием извлеченного индекса и пользовательской функции для запуска события изменения, которое записывает новый индекс в скрытое поле всякий раз, когда активируется новая панель.

Во время обратной передачи значение скрытого поля сохраняется в 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

Поместите кнопку или вид сетки, которые, возможно, пришлось щелкнуть или обновить на панели «Обновление». Тогда пользовательский гармошка будет работать нормально 100% + гарантия .. Сарат @ f1

Answer 4

Он работает на моей стороне, пожалуйста, проверьте ......

$(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 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 = "Статический". Этот подход требует незначительных изменений для работы практически с любым языком на стороне сервера, поскольку JS не нужно менять, только одно скрытое поле.

Answer 6

Я знаю, что уже поздно, но это может помочь кому-то с этим бороться. Решение здесь в основном является комбинацией некоторых из вышеупомянутых мудрости. ; -)

Я использую 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 7

запись индекса или идентификатора панели аккордеона, в которой была нажата кнопка, с использованием ClientScript.RegisterStartupScript. Предположим, пользователь нажимает кнопку с именем btnSubmit, которая находится на панели 3. Тогда она будет работать так:

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 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

Я использую это решение, чтобы оно работало над моим проектом, но что-то не работало.

Во-первых, аккордеон не будет хранить индекс в памяти, поэтому аккордеон каждый раз переинициализировался.

Во-вторых, мне не удалось найти скрытое поле с '#<%=hidAccordionIndex.ClientID %>'

Итак, что я делаю, это

1 - установить значение по умолчанию для скрытого поля равным нулю

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

2- Получить активный индекс с этим

Обязательно разбираем, иначе не будет работать

 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);
        }
});

Answer 10

У меня была та же проблема, что и я. 1. MaxCarey выглядел достаточно хорошо, чтобы решить проблему, но, к сожалению, у меня не было удостоверения личности для моих аккордеонов. (Я использовал сторонний шаблон, они просто используют класс CSS). 2. Имран Х. Ашраф тоже был хорош, но та же проблема - отсутствие доступа к аккордеону по ID.

Моя проблема: 1. У меня был DetailsView в гармошке с командой Edit Update Cancel. 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>

Надеюсь, это кому-нибудь поможет.

Спасибо Счастливое кодирование