回发MCV4 Jquery后维护选定的选项卡

时间:2014-12-21 01:57:12

标签: jquery asp.net-mvc-4

我有一个包含两个偏见的页面。一个用于提交表单,一个用于数据表。每个部分视图都是选项卡容器中的选项卡窗格。我在数据表的部分视图中使用Grid.Mvc,因此它正确处理所有分页。我遇到的问题是,当我浏览网格时,页面返回到第一个选项卡。我找到了几个MVC解决方案,但下面似乎没有工作,我的页面是jquery。任何帮助将不胜感激。

Index.cshtml

 <p class="hiddenData"><asp:HiddenField ID="hdnData" runat="server" /></p>
       <div class="tab-container">
            <ul class="nav nav-tabs">
                <li><a href="#sky-form" data-toggle="tab"><span class="glyphicon glyphicon-upload"></span> File Upload</a></li>
                <li><a href="#datagrid" data-toggle="tab"><span class="glyphicon glyphicon-file"></span> Uploaded Files</a></li>
            </ul>

            <div class="tab-content">
                @Html.Partial("_UploadForm")


                @Html.Partial("_ProcessedFileInfo")

            </div> <!-- Close tab-content-->
        </div><!-- Container close  -->
    <script type="text/javascript">
        $(function() {
            $('.nav-tabs a:first').tab('show');
            $('.nav-tabs li a').click(function () { });
            $('.nav-tabs li').hover(function () {
                var liData = $(this);
                $('.hiddenData input:hidden').val(liData.find('a').text());
            });
            if ($('.hiddenData input:hidden').val() != '') {
                var liList = $('.tab-container li');
                var hiddenData = $('.hiddenData input:hidden').val();
                liList.each(function () {
                    if ($(this).find('a').text() == hiddenData) {
                        $(this).find('a').click();
                    }
                });
            }
        });

    </script>

1 个答案:

答案 0 :(得分:2)

所以我得到了它的工作,我发布了答案,以防将来有人需要它。简而言之,Grid.MVC通过jquery进行所有回发,并且没有服务器传输值,因此选项卡值不能存储在回发中的隐藏字段中。所以我走了jquery.cookie的路。下面是最后的jquery。

<script type="text/javascript">
    $(function() {
        $('.nav-tabs a:first').tab('show');
        $('.nav-tabs li').click(function () { });
        $('.nav-tabs li').hover(function () {
            var liData = $(this);
            $.cookie('saved-tab', liData.find('a').text());
        });
        if ($.cookie('saved-tab') != '') {
            var liList = $('.nav-tabs li');
            var hiddenData = $.cookie('saved-tab');
            liList.each(function () {
                if ($(this).find('a').text() == hiddenData) {
                    $(this).find('a').click();
                }
            });
        }
    });

</script>