我有一個部分視圖，在其中加載了分頁器。.Net核心部分視圖中的分頁

分頁工作的功能，因爲鏈接更改如下：http://localhost:1048/Trip - >http://localhost:1048/Trip?page=2但似乎我的「請求」加載「下一頁」不按預期工作。

PartialView

//Here is a table view that 
//that requires pagination. 

@{ 
    var prevDisabled = !Model.HasPreviousPage ? "disabled" : ""; 
    var nextDisabled = !Model.HasNextPage ? "disabled" : ""; 
} 

<ul class="pager"> 
    <li> 
     <a asp-action="Index" 
      asp-route-page="@(Model.PageIndex - 1)" 
      class="btn btn-default @prevDisabled btn"> 
       Previous 
     </a> 
    </li> 
    <li> 
     <a asp-action="Index" 
      asp-route-page="@(Model.PageIndex + 1)" 
      class="btn btn-default @nextDisabled btn"> 
       Next 
     </a> 
    </li> 
</ul>

我認爲我的鏈接是錯誤的（ASP-行動=「指數」），但我不知道還有什麼有它「定位到」（我試着將其更改爲我的控制器功能 - 但結果是非常不想要的），因爲我對.Net還是比較新的。另外我知道我的控制器函數中有一個錯誤，我總是加載頁面1。如何檢查頁面是否輸入到該功能？（像if (page == null) { page = 1 }）函數加載我的局部視圖如下：

控制器功能

[HttpGet] 
public async Task<IActionResult> TripTable(int? page) 
{ 
    var trips = from t in _tripcontext.Tripmetadata select t; 

    page = 1; 

    int pageSize = 20; 
    return PartialView("PartialTripsView", await PaginatedList<Tripmetadata>.CreateAsync(trips.AsNoTracking().OrderBy(t => t.Tripid), page ?? 1, pageSize)); 
}

UPDATE

我想我忘了提及，每當我使用下一頁按鈕，它只刷新了整個索引頁面（沒有部分視圖）。單擊索引頁面上的按鈕時會加載部分視圖，因此當頁面刷新時，部分視圖不再存在。

來源

2017-07-31 Zeliax

如果你正在做的重定向，你需要重新呈現整個頁面除非涉及javascrip，否則不能返回部分視圖。您的操作需要具有名稱Index，並在主頁面內呈現局部視圖。 –

那麼我需要創建一個新的「索引」功能？ – Zeliax

那麼你應該已經有一個在控制器中的索引動作，只需添加一個可選參數'int page = 1'這意味着如果你不發送它將顯示第一頁。 –

我設法頗有些閱讀網上後弄明白：

的我第一次改變了我的PartialView以下幾點：

@{ 
    var prevDisabled = !Model.HasPreviousPage ? "disabled" : ""; 
    var nextDisabled = !Model.HasNextPage ? "disabled" : ""; 
} 

<ul class="pager"> 
    <li> 
     <a id="prev" data-url="@Url.Action("TripTable", "Trip")" data-id="@Model.PageIndex" class="btn btn-default @prevDisabled btn"> 
      Previous 
     </a> 
    </li> 
    <li> 
     <a id="next" data-url="@Url.Action("TripTable", "Trip")" data-id="@Model.PageIndex" class="btn btn-default @nextDisabled btn"> 
      Next 
     </a> 
    </li> 
</ul>

如果其他人被困在我得到大多數相同的問題我的代碼從Microsoft Docs創建分頁here。

我控制器的方法是改變一點點：

public async Task<IActionResult> TripTable(int? page) 
{ 
    var trips = from t in _tripcontext.Tripmetadata select t; 
    int pageSize = 10; 

    return PartialView("PartialTripsView", await PaginatedList<Tripmetadata>.CreateAsync(trips.AsNoTracking().OrderBy(t => t.Tripid), page ?? 1, pageSize)); 
}

在我PartialView的底部添加以下：

<script> 
    $("#prev").click(function() { 
     var _this = $(this); 
     var prevPage = _this.data('id') - 1; 

     $("#TripPartial").load(_this.data('url'), { page: prevPage }, function() { 
     }); 
    }); 

    $("#next").click(function() { 
     var _this = $(this); 
     var nextPage = _this.data('id') + 1; 

     $("#TripPartial").load(_this.data('url'), { page: nextPage }, function() { 
     }); 
    }); 
</script>

來源

2017-07-31 13:39:17 Zeliax

.Net核心部分視圖中的分頁

PartialView

控制器功能

UPDATE

回答

相關問題