탭 컨트롤에서 mvcpaging ajax 모드를 참조합니다.

Question

mvcpaging ajax 모드는 탭 컨트롤에서 참조합니다.

아래 코드를 구현하기 위해 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>