Question

我正在使用jQuery Accordion。在手风琴中，我有很少的链接可以调用控制器动作。

    <div id="accordion" class="accordion">
    <h1 class="requestsheader"><a href="#1">Header 1</a></h1>
    <div>
        <table>
@foreach (var item in Model)
            {
<tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.Name)
                    </td>
                    <td>
                        <div class="requestButton">
                            @Html.ActionLink("Send Request for Authorization", "SendRequest", new { id = item.Id })
                        </div>
                    </td>
                </tr>
}
</table>
    </div>

<h1 class="requestsheader"><a href="#2">header 2</a></h1>
    <div>
...
...
</div>

</div>

以下是javascript代码：

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

我打电话给某个动作后，所有的窗格都崩溃了。我需要一种方法来在调用操作后保持当前窗格打开。如果可以使用隐藏字段来完成，那么在mvc中使用隐藏字段的正确方法是什么。

Answer 1

我认为使用cookie是最好的方法。以下是我如何解决它。希望这有助于寻找类似解决方案的人。

以下代码转到document.ready function：

  var activeIndex = parseInt(getCookie('openedPane'));

$("#accordion").accordion({
    collapsible: true, clearStyle: true, heightStyle: "content", navigation: true, active: activeIndex,
    activate: function (event, ui) {
        var index = $(this).children('h1').index(ui.newHeader);            
        setCookie('openedPane', index, 1);            
    },
    create: function (event, ui) {            
        deleteCookie('openedPane');   //Deleting the cookie when accordion is created         
    }
});

以下是在Javascript中设置/获取/删除cookie的代码：

function setCookie(name, value, days) {    
if (days) {
    var date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    var expires = "; expires=" + date.toGMTString();
}
else var expires = "";
document.cookie = name + "=" + value + expires + "; path=/";
}

function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

function deleteCookie(name) {
    setCookie(name, "", -1);
}

Answer 2

您可以发布一个隐藏变量，其中包含您希望在帖子返回时激活的面板，将其添加到视图包，然后有条件地激活该面板。

你必须向我展示你用来评论如何发布这个额外变量的表格，（不知道它的ajax，表格，动作链接等），但这是其余的看法像：

public ActionResult MyPagingMethod(int page = 1, int? panel = null) // or whatever your action is
{
    // do work

    ViewBag.PanelToOpen = panel;

    // return view
}

然后javascript

$("#accordion").accordion({
    collapsible: true, clearStyle: true, heightStyle: "content", navigation: true,active:false   
})
@if(Viewbag.PanelToOpen != null) {
    $('#accordion').accordion('activate', @ViewBag.PanelToOpen);
}

或者，（并且可能有利）您可以使用javascript为打开的手风琴面板设置cookie，并且在页面加载时，如果设置了cookie，则激活该面板。这将打开的面板的客户端逻辑与服务器分开。

Answer 3

非常感谢你最后我的代码就是这个。它适用于活动的手风琴窗格。

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

jQuery手风琴与MVC 4 Razor |保持活动窗格打开

3 个答案: