看過前三篇文章的朋友，應該對Asp.net Web api 有個初步的了解，起碼了解了web api的編碼方式。那么這一篇就分享一下web api中的分頁。話不多說，直接上硬貨。
接下來的內容都是在上一篇中的擴展,所以找不到的資料可以從上一篇中下載到。
首先增加支持分頁的API方法
public IEnumerable<UserInfo> GetUserInfos(
int pageindex,
int size)
{
return bll.Get().Skip((pageindex - 1) * size).Take(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 >
< script src ="Scripts/knockout-2.1.0.js" type ="text/javascript" ></ script >
編寫數據迭代顯示模板
<
ul
data-bind
="template: {name: 'userinfoTemplate', foreach: userinfos}"
>
</ ul >
</ 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 >
< 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 >
< 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 >
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條的情況下
本篇源碼下載:
/Files/risk/web api 4/MvcApplication1.rar