knockout Ajax异步无刷新分页 Demo +mvc+bootstrap

  最近工作中web客户端需要用到knockout,在此记录下一些Demo，以后用到的时候查找起来方便。也希望给新入门的knockout使用者一点经验。knockout官方文档。这儿是一个使用knockout分页的小demo,使用的框架是mvc，javascript框架有jquery,knockout,bootstrap。

        先上效果图

　  前台view

 

  1 @{

  2     //这儿去除该页面的模板页。防止jquery多次引用，当然也可以不去除，下面jquery就可以不用引用了。

  3                 

  4     Layout = null;

  5 }

  6 

  7 @*先引用jquery,然后应用knockout,因为knockout依赖于jquery*@

  8 <script src="~/Scripts/jquery-1.10.2.js"></script>

  9 <script src="~/Scripts/knockout-3.2.0.js"></script>

 10 

 11 

 12 @*bootstrap,集成到mvc里面的前端开发框架 (官网：http://www.bootcss.com/)*@

 13 <link href="~/Content/bootstrap.css" rel="stylesheet" />

 14 <script src="~/Scripts/bootstrap.js"></script>

 15 

 16 

 17 

 18 <div style="margin:auto;width:500px;text-align:center">

 19 

 20 

 21     <div style="margin-top:50px">

 22         <ul data-bind="foreach:items" style="list-style-type:none">

 23             <li>

 24                 <span>Title</span> <span data-bind="text:Title"></span>

 25                 <span>Content</span><span data-bind="text:Content"></span>

 26             </li>

 27         </ul>

 28     </div>

 29 

 30     <div>

 31         <button type="button" class="btn btn-primary" data-bind="click:first">

 32              第一页

 33         </button>

 34         <button type="button" class="btn btn-success" data-bind="click:previous">

 35              上一页

 36         </button>

 37         <button type="button" class="btn btn-info" data-bind="click:next">

 38              下一页

 39         </button>

 40         <button type="button" class="btn btn-warning" data-bind="click:last">

 41             最后一页

 42         </button>

 43     </div>

 44 

 45     <div style="margin-top:20px" data-bind="foreach:pageNumbers" class="btn-group" role="group">

 46         <button data-bind="text:$data,click:$root.gotoPage" type="button" class="btn btn-default">

 47         </button>

 48     </div>

 49 

 50 </div>

 51 @*注意将脚本放在html 代码的下面*@

 52 <script type="text/javascript">

 53     function NewsPage() {

 54         //viewModel本身。用来防止直接使用this的时候作用域混乱

 55         var self = this;

 56         //数据

 57         this.items = ko.observableArray();

 58         //要访问的页码

 59         this.pageIndex = ko.observable(1);

 60         //总计页数

 61         this.pageCount = ko.observable(1);

 62         //页码数

 63         this.pageNumbers = ko.observableArray();

 64         //当前页

 65         this.currengePage = ko.observable(1);

 66         this.refresh = function () {

 67             //限制请求页码在该数据页码范围内

 68             if (self.pageIndex() < 1)

 69                 self.pageIndex(1);

 70             if (self.pageIndex() > self.pageCount()) {

 71                 self.pageIndex(self.pageCount());

 72             }

 73             //post异步加载数据

 74             $.post(

 75                 "/PageList/PageList",

 76                 {

 77                     pageIndex: self.pageIndex()

 78                 },

 79                 function (data) {

 80                     // 加载新的数据前，先移除原先的数据

 81                     self.items.removeAll();

 82                     self.pageNumbers.removeAll();

 83                     self.pageCount(data.PageCount)

 84                     for (var i = 1; i < data.PageCount; i++) {

 85                         //装填页码

 86                         self.pageNumbers.push(i);

 87                     }

 88                     //for...in 语句用于对数组或者对象的属性进行循环操作。

 89                     //for ... in 循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作。

 90                     for (var i in data.PagedData) {

 91                         //装填数据

 92                         self.items.push(data.PagedData[i]);

 93                     }

 94                 }, "json"

 95                             )

 96         }

 97         //请求第一页数据

 98         this.first = function () {

 99             self.pageIndex(1);

100             self.refresh();

101         }

102         //请求下一页数据

103         this.next = function () {

104             self.pageIndex(this.pageIndex() + 1);

105             self.refresh();

106 

107         }

108         //请求先前一页数据

109         this.previous = function () {

110             self.pageIndex(this.pageIndex() - 1);

111             self.refresh();

112         }

113         //请求最后一页数据

114         this.last = function () {

115             self.pageIndex(this.pageCount() - 1);

116             self.refresh();

117         }

118         //跳转到某页

119         this.gotoPage = function (data, event) {

120             self.pageIndex(data);

121             self.refresh();

122         }

123         this.refresh();

124     }

125     var viewModel = new NewsPage();

126     ko.applyBindings(viewModel);

127 </script>

View Code

 

    后台controller

 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;



namespace KnockOutPageDemo.Controllers

{

    public class PageListController : Controller

    {

        // GET: PageList

        public ActionResult Index()

        {

            return View();

        }

        /// <summary>

        /// 异步请求的分页数据，返回一个json对象

        /// </summary>

        /// <returns></returns>

        public ActionResult PageList()

        {

            //请求的页码

            int pageIndex = int.Parse(Request.Form["pageIndex"]);

            //每页显示多少条数据

            int pageSize = 10;

            //取到请求页码的数据

            List<News> news = GetNewsData().Skip((pageIndex - 1) * pageSize).Take(pageSize).ToList();

            //获取总的数据行数

            int rowCount = GetNewsData().Count();

            //构建数据模型

            PageModel pageData = new PageModel()

            {

                PageIndex = pageIndex,

                PagedData = news,

                PageCount = rowCount / pageSize



            };

            //返回数据

            return Json(pageData, JsonRequestBehavior.AllowGet);

        }

        public List<News> GetNewsData()

        {

            List<News> news = new List<News>();

            for (int i = 0; i < 30; i++)

            {

                news.Add(new News { Title = "天黑黑", Content = "路上小心" });

                news.Add(new News { Title = "雨滂滂", Content = "记得带伞" });

                news.Add(new News { Title = "人熙熙", Content = "快点回家" });

            }

            return news;

        }

    }



    //分页数据实体

    public class PageModel

    {//请求页码的数据

        public List<News> PagedData { get; set; }

        //请求的页码

        public int PageIndex { get; set; }

        //页码的大小

        public int PageSize { get; set; }

        //总页数

        public int PageCount { get; set; }

        //总行数

        public int RowCount { get; set; }

    }

    //新闻模型

    public class News

    {

        public string Title { get; set; }

        public string Content { get; set; }

    }

}

View Code

 

      本文地址：http://www.cnblogs.com/santian/p/4342777.html

      博客地址： http://www.cnblogs.com/santian/

      转载请以超链接形式标明文章原始出处。