knockoutjs+ jquery pagination+asp.net web Api 实现无刷新列表页
Knockoutjs 是一个微软前雇员开发的前端MVVM JS框架, 具体信息参考官网 http://knockoutjs.com/
Web API数据准备: 偷个懒数据结构和数据copy自官网实例 http://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api/tutorial-your-first-web-api
using System.Collections.Generic;
using System.Linq;
using System.Web.Http; namespace WebApp.Api
{
public class Product
{
public int Id { get; set; }
public string Name { get; set; }
public string Category { get; set; }
public decimal Price { get; set; }
} public class TestController : ApiController
{
Product[] products = new Product[]
{
new Product { Id = , Name = "Tomato Soup", Category = "Groceries", Price = },
new Product { Id = , Name = "Yo-yo", Category = "Toys", Price = 3.75M },
new Product { Id = , Name = "Hammer", Category = "Hardware", Price = 16.99M },
new Product { Id = , Name = "Tomato Soup", Category = "Groceries", Price = },
new Product { Id = , Name = "Yo-yo", Category = "Toys", Price = 3.75M },
new Product { Id = , Name = "Hammer", Category = "Hardware", Price = 16.99M } ,
new Product { Id = , Name = "Tomato Soup", Category = "Groceries", Price = },
new Product { Id = , Name = "Yo-yo", Category = "Toys", Price = 3.75M },
new Product { Id = , Name = "Hammer", Category = "Hardware", Price = 16.99M },
new Product { Id = , Name = "Tomato Soup", Category = "Groceries", Price = },
new Product { Id = , Name = "Yo-yo", Category = "Toys", Price = 3.75M },
new Product { Id = , Name = "Hammer", Category = "Hardware", Price = 16.99M },
new Product { Id = , Name = "Tomato Soup", Category = "Groceries", Price = },
new Product { Id = , Name = "Yo-yo", Category = "Toys", Price = 3.75M },
new Product { Id = , Name = "Hammer", Category = "Hardware", Price = 16.99M } ,
new Product { Id = , Name = "Tomato Soup", Category = "Groceries", Price = },
new Product { Id = , Name = "Yo-yo", Category = "Toys", Price = 3.75M },
new Product { Id = , Name = "Hammer", Category = "Hardware", Price = 16.99M }
}; [Route("api/getpagecount")]
[HttpGet]
public int GetCount()
{
return products.Length;
} [Route("api/getdata")]
[HttpGet]
public IEnumerable<Product> GetProduct(int pageIndex, int pageSize)
{
return products.Skip(pageIndex * pageSize).Take(pageSize);
}
}
}
上述就是web api数据源和两个供前端调用分页的接口
JS 交互代码如下
; ( function ( ko )
{
var pageSize = 10,
viewModel,
isBind = false; function loadTable( pageIndex )
{
$.ajax( {
url: '/api/getdata?pageIndex='+pageIndex+'&pageSize='+pageSize,
type: 'GET',
contentType: "application/json; charset=utf-8",
success: function ( r )
{
if ( !isBind )
{
viewModel = ko.mapping.fromJS( r );
isBind = true;
ko.applyBindings( viewModel );
} else
{
ko.mapping.fromJS( r, viewModel );
}
}
} );
} initPager(); function initPager()
{
var getCountUrl = '/api/getpagecount'; $.ajax( {
url: getCountUrl,
type: 'GET',
contentType: "application/json; charset=utf-8",
success: function ( r )
{
$( '#pager' ).pagination( r, {
callback: function ( currentPageIndex )
{
loadTable( currentPageIndex );
}
} );
}
} );
}
} )( ko );
一个立即自执行函数 传入ko全局变量 , 函数里面定义了两个函数, initPager用于从server端取得商品数量并初始化pagination插件,pagination插件绑定点击页码时的回调函数,这里使用了默认的pagination设置,每页显示10个商品。loadTable用于从server端取得分页数据,接收一个参数用于指定当前获取第几页数据,数据获取成功,用ko.applyBindings绑定到页面渲染显示模板数据.注意这里为了偷懒使用了knockout的 mapping插件,具体用法请参考 http://knockoutjs.com/documentation/plugins-mapping.html。
html页面代码如下
@{
ViewBag.Title = "Test";
}
<style>
.pagination {
font-size: 80%;
} .pagination a {
text-decoration: none;
border: solid 1px #AAE;
color: #15B;
} .pagination a, .pagination span {
display: block;
float: left;
padding: 0.3em 0.5em;
margin-right: 5px;
margin-bottom: 5px;
} .pagination .current {
background: #26B;
color: #fff;
border: solid 1px #AAE;
} .pagination .current.prev, .pagination .current.next {
color: #999;
border-color: #999;
background: #fff;
}
</style> <table class="table table-hover" id="dataTable">
<thead>
<tr>
<th>
Id
</th>
<th>
Name
</th>
<th>
Category
</th>
<th>
Price
</th>
</tr>
</thead> <tbody data-bind="foreach:$root">
<tr>
<td data-bind="text:Id"></td>
<td data-bind="text:Name"></td>
<td data-bind="text:Category"></td>
<td data-bind="text:Price"></td>
</tr>
</tbody>
</table>
<div>
<div id="pager" class="pagination">
</div>
</div>
@section scripts{ <script src="~/Scripts/jquery.pagination.js"></script>
<script src="~/Scripts/knockout-3.2.0.js"></script>
<script src="~/Scripts/knockout.mapping-latest.js"></script>
<script src="~/Scripts/list.js"></script>
}
上面的js逻辑代码文件为list.js , 为了偷懒直接把pagination的样式copy到了html头部。
运行结果
knockoutjs+ jquery pagination+asp.net web Api 实现无刷新列表页的更多相关文章
- 杂项:ASP.NET Web API
ylbtech-杂项:ASP.NET Web API ASP.NET Web API 是一种框架,用于轻松构建可以访问多种客户端(包括浏览器和移动设备)的 HTTP 服务. ASP.NET Web A ...
- A simple Test Client built on top of ASP.NET Web API Help Page
Step 1: Install the Test Client package Install the WebApiTestClient package from the NuGet Package ...
- 前端使用AngularJS的$resource,后端ASP.NET Web API,实现分页、过滤
在上一篇中实现了增删改查,本篇实现分页和过滤. 本系列包括: 1.前端使用AngularJS的$resource,后端ASP.NET Web API,实现增删改查2.前端使用AngularJS的$re ...
- On the nightmare that is JSON Dates. Plus, JSON.NET and ASP.NET Web API
Ints are easy. Strings are mostly easy. Dates? A nightmare. They always will be. There's different c ...
- 在一个空ASP.NET Web项目上创建一个ASP.NET Web API 2.0应用
由于ASP.NET Web API具有与ASP.NET MVC类似的编程方式,再加上目前市面上专门介绍ASP.NET Web API 的书籍少之又少(我们看到的相关内容往往是某本介绍ASP.NET M ...
- 通过扩展让ASP.NET Web API支持W3C的CORS规范
让ASP.NET Web API支持JSONP和W3C的CORS规范是解决"跨域资源共享"的两种途径,在<通过扩展让ASP.NET Web API支持JSONP>中我们 ...
- ASP.NET Web API自身对CORS的支持:从实例开始
在<通过扩展让ASP.NET Web API支持W3C的CORS规范>中我们通过自定义的HttpMessageHandler为ASP.NET Web API赋予了跨域资源共享的能力,具体来 ...
- 通过Knockout.js + ASP.NET Web API构建一个简单的CRUD应用
REFERENCE FROM : http://www.cnblogs.com/artech/archive/2012/07/04/Knockout-web-api.html 较之面向最终消费者的网站 ...
- ASP.NET Web API 2 入门
本文参考:http://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api/tutorial-your-first-web ...
随机推荐
- bat 延时删除指定文件夹中的文件经验分享
1.bat延时 xp程序中通过ping 127.0.0.1 -n 20 来实现延时操作,ping本地地址20行. win7中通过timeout 20 来实现延时20秒. 2.删除指定文件 del /q ...
- CSS基础篇之选择符2
属性选择符: 选择符 版本 描述 E[att] CSS2 选择具有att属性的E元素. E[att="val"] CSS2 选择具有att属性且属性值等于val的E元素. E[at ...
- 并联机构逆运动学用MapleSim符号来解决
在多体机械中,平台的运动学分析(运动学问题)可以分为两类:正向运动学问题和逆向运动学问题.所谓正向运动学是指研究机构中一点(例如,机械手臂上终端操作机构或由并联机械操纵器支持的平台的中心)在空间中的位 ...
- MYSQL INNODB PAGE一督
MYSQL INNODB PAGE一督
- Python黑帽编程2.9 面向对象编程
Python黑帽编程2.9 面向对象编程 我个人认为,计算机语言的发展,有两个方向,一个是从低到高的发展过程,在这个过程中,语言的思考和解决问题的方式是面向硬件的.硬件本质上处理的是信号,在此基础上, ...
- Python读取二进制文件
import os import sys import socket mypath = sys.argv[1] if not os.path.exists(mypath): print "T ...
- Azure PowerShell (9) 使用PowerShell导出订阅下所有的Azure VM的Public IP和Private IP
<Windows Azure Platform 系列文章目录> 笔者在之前的工作中,有客户提出想一次性查看Azure订阅下的所有Azure VM的Public IP和Private IP. ...
- [备忘]Redis运行出现Client sent AUTH, but no password is set
原因:程序提供了密码,但是redis.conf中并没有设置密码. 附加问题:如果redis.conf中设置了密码,有可能会导致服务无法启动,报5013错误.可能是访问权限的问题.
- C语言 · 送分啦
问题描述 这题想得分吗?想,请输出"yes":不想,请输出"no". 输出格式 输出包括一行,为"yes"或"no". ...
- 基于Spring Mvc实现的Excel文件上传下载
最近工作遇到一个需求,需要下载excel模板,编辑后上传解析存储到数据库.因此为了更好的理解公司框架,我就自己先用spring mvc实现了一个样例. 基础框架 之前曾经介绍过一个最简单的spring ...