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 实现无刷新列表页的更多相关文章

  1. 杂项:ASP.NET Web API

    ylbtech-杂项:ASP.NET Web API ASP.NET Web API 是一种框架,用于轻松构建可以访问多种客户端(包括浏览器和移动设备)的 HTTP 服务. ASP.NET Web A ...

  2. 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 ...

  3. 前端使用AngularJS的$resource,后端ASP.NET Web API,实现分页、过滤

    在上一篇中实现了增删改查,本篇实现分页和过滤. 本系列包括: 1.前端使用AngularJS的$resource,后端ASP.NET Web API,实现增删改查2.前端使用AngularJS的$re ...

  4. 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 ...

  5. 在一个空ASP.NET Web项目上创建一个ASP.NET Web API 2.0应用

    由于ASP.NET Web API具有与ASP.NET MVC类似的编程方式,再加上目前市面上专门介绍ASP.NET Web API 的书籍少之又少(我们看到的相关内容往往是某本介绍ASP.NET M ...

  6. 通过扩展让ASP.NET Web API支持W3C的CORS规范

    让ASP.NET Web API支持JSONP和W3C的CORS规范是解决"跨域资源共享"的两种途径,在<通过扩展让ASP.NET Web API支持JSONP>中我们 ...

  7. ASP.NET Web API自身对CORS的支持:从实例开始

    在<通过扩展让ASP.NET Web API支持W3C的CORS规范>中我们通过自定义的HttpMessageHandler为ASP.NET Web API赋予了跨域资源共享的能力,具体来 ...

  8. 通过Knockout.js + ASP.NET Web API构建一个简单的CRUD应用

    REFERENCE FROM : http://www.cnblogs.com/artech/archive/2012/07/04/Knockout-web-api.html 较之面向最终消费者的网站 ...

  9. ASP.NET Web API 2 入门

    本文参考:http://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api/tutorial-your-first-web ...

随机推荐

  1. SVN冲突

    svn冲突,导致工程打不开,报错:xxx..xcodeproj  cannot be opened because the project file cannot be parsed. 解决方法:   ...

  2. Android课程---序列化与反序列化(转)

    ava序列化与反序列化是什么?为什么需要序列化与反序列化?如何实现Java序列化与反序列化?本文围绕这些问题进行了探讨. 1.Java序列化与反序列化 Java序列化是指把Java对象转换为字节序列的 ...

  3. 负载均衡的场景下ASP.NET Core如何获取客户端IP地址

    在ASP.NET中,使用负载均衡时,可以通过ServerVariables获取客户端的IP地址. var ip = request.ServerVariables["HTTP_X_FORWA ...

  4. GIT常用命令笔记

    最近在做了一个自己的项目.两个人合作的,所以需要用到版本管理工具.本来打算学一下自己搭建svn的,后来朋友推荐我用git,免费,流行,好用,逼格.所以就学习了一下.发现这个git与已经使用惯了的svn ...

  5. Guava monitor

    Guava的com.google.util.concurrent类库提供了相对于jdk java.util.concurrent包更加方便实用的并发类,Monitor类就是其中一个.Monitor类在 ...

  6. Redis系列(二)-Hredis客户端设计及开源

    接上篇c#实现redis客户端(一),重新整理些了下. 阅读目录: 项目说明 Hredis设计图 单元测试场景 总结 项目说明 背景:因为有地方要用,而又没找到对sentinel良好支持的Net客户端 ...

  7. 多线程中的锁系统(二)-volatile、Interlocked、ReaderWriterLockSlim

    上章主要讲排他锁的直接使用方式.但实际当中全部都用锁又太浪费了,或者排他锁粒度太大了,本篇主要介绍下升级锁和原子操作. 阅读目录 volatile Interlocked ReaderWriterLo ...

  8. SQL Server 事务隔离级别详解

    标签: SQL SEERVER/MSSQL SERVER/SQL/事务隔离级别选项/设置数据库事务级别 SQL 事务隔离级别 概述 隔离级别用于决定如果控制并发用户如何读写数据的操作,同时对性能也有一 ...

  9. LInux MySQL 数据库 的一些操作

    数据库安装: ………… 创建数据库连接新用户: 1.登录mysql #mysql -u root -p 2.新增用户 insert into mysql.user(Host,User,Password ...

  10. MySQL GROUP BY用法

    背景介绍 最近在设计数据库的时候因为开始考虑不周,所以产生了大量的重复数据.现在需要把这些重复的数据删除掉,使用到的语句就是Group By来完成.为了进一步了解这条语句的作用,我打算先从简单入手. ...