首先增加支持分頁的API方法

public?IEnumerable<UserInfo>?GetUserInfos(int?pageindex,?int?size)
????????{
????????????return?bll.Get().Skip((pageindex?-?1)?*?size).Take(size);
????????}

增加一個新頁面
引入js

<script?src="Scripts/jquery-1.7.1.min.js"?type="text/javascript"></script>
????<script?src="Scripts/knockout-2.1.0.js"?type="text/javascript"></script>

編寫數據迭代顯示模板

<ul?data-bind="template:?{name:?'userinfoTemplate',?foreach:?userinfos}">
????????</ul>

UL為數據迭代容器模板

<script?id="userinfoTemplate"?type="text/html">
????????????<li?class="userinfo">
????????????????????<div?class="info">????????????????????????
????????????????????????<strong><span?data-bind="text:?Name"></span></strong>
???????????????????????<span?data-bind="text:?Age"></span>
????????????????????</div>
????????????</li>
????????</script>

Script id=’ userinfoTemplate’為數據項模板

編寫獲取分頁操作面板

<fieldset>
<label>第</label><input?type="text"?id="pageIndex"?/><label>頁</label><br?/>
<label>每</label><input?type="text"?id="pageSize"?/><label>條一頁</label><br?/>
<input?type="button"?value="獲取"?id="getButton"?/>
</fieldset>

開始編寫js根據輸入的頁碼和每頁的數量獲取

<script?type="text/javascript">
????????viewModel?=?{
????????????userinfos:?ko.observableArray([])
????????};
????????ko.applyBindings(viewModel);
????????$("#getButton").click(function?()?{
????????????viewModel.userinfos([]);
????????????var?pageSize?=?$('#pageSize').val();
????????????var?pageIndex?=?$('#pageIndex').val();
????????????var?url?=?"/api/userinfo?pageindex="?+?pageIndex?+?'&size='?+?pageSize;
????????????$.getJSON(url,?function?(data)?{
????????????????//?根據路徑得到數據
????????????????viewModel.userinfos(data);
????????????});
????????????return?false;
????????});???
????</script>

最終運行得到結果獲取第一頁，每一頁1條的情況下

獲取第一頁，每頁2條的情況下

總結

以上是生活随笔為你收集整理的ASP.NET Web API教程 分页查询的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。