Question

mvcpaging ajax模式在Tab控件中刷新。

我添加了mvcpaging 1.0.0版本dll来实现以下代码。

我的代码如下：

@using MvcPaging;
@model  IPagedList<Monster.SocialJobs.ORM.Model.Ads.CampaignConfigurationModel>
@{
    ViewBag.Title = "DisplayCampaign";   
} 

@foreach (var group in Model)
                {
                        <tr>
                            <td>@group.CampaignName</td>
                            <td>@group.PositionAdsID</td>
                            <td class="center">
                                <a href="#" data-mapping-id="@group.CampaignConfigurationID" class="brn btn-danger btn-xs delete-mapping">Delete</a>
                            </td>
                        </tr>
                }            

@Html.Raw(Html.Pager(
        new Options
        {
            PageSize = Model.PageSize,
            TotalItemCount = Model.TotalItemCount,
            CurrentPage = Model.PageNumber,
            ItemTexts = new ItemTexts() { Next = "Next", Previous = "Previous" },
            ItemIcon = new ItemIcon() { First = "icon-backward", Previous = "icon-chevron-left", Next = "icon-chevron-right", Last = "icon-forward" },
            TooltipTitles = new TooltipTitles() { Next = "Next page {0}", Previous = "Previous page {0}", Page = "Go to page {0}" },
            Size = Size.normal,
            Alignment = Alignment.centered,
            IsShowControls = true,
            IsShowFirstLast = true,
            IsShowPages = true
        }, new {}))

上面的代码在选项卡外部工作，在选项卡中看起来像页面刷新。

Answer 1

请记住，当您单击视图中的分页控件时，它会导致回发到服务器并重新加载页面。当页面重新加载时，选项卡控件将显示第一个选项卡除非您使用jQuery更改它：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script type="text/javascript">
    jQuery(document).ready(function ($) {
        $('#tabs').tab();
        //When the page loads it wil always set the active tab to the tab where the paged grid is at
        $('#tabs a[href="#tabTwo"]').tab('show')
    });
</script>
<div id="content">
    <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
        <li><a href="#tabOne" data-toggle="tab">Tab One</a></li>
        <li><a href="#tabTwo" data-toggle="tab">Tab Two</a></li>
    </ul>
    <div id="my-tab-content" class="tab-content">
        <div class="tab-pane active" id="tabOne">
            <h1>Tab one</h1>

        </div>
        <div class="tab-pane" id="tabTwo">
            <h1>Tab Two</h1>
            <h2>Your paged grid is here...</h2>
        </div>
    </div>
</div>

mvcpaging ajax模式在Tab控件中刷新

1 个答案: