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

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

先上效果图

　  前台view

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

     Layout = null;
 }

 @*先引用jquery,然后应用knockout,因为knockout依赖于jquery*@
 <script src="~/Scripts/jquery-1.10.2.js"></script>
 <script src="~/Scripts/knockout-3.2.0.js"></script>

 @*bootstrap,集成到mvc里面的前端开发框架 (官网：http://www.bootcss.com/)*@
 <link href="~/Content/bootstrap.css" rel="stylesheet" />
 <script src="~/Scripts/bootstrap.js"></script>

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

     <div style="margin-top:50px">
         <ul data-bind="foreach:items" style="list-style-type:none">
             <li>
                 <span>Title</span> <span data-bind="text:Title"></span>
                 <span>Content</span><span data-bind="text:Content"></span>
             </li>
         </ul>
     </div>

     <div>
         <button type="button" class="btn btn-primary" data-bind="click:first">
              第一页
         </button>
         <button type="button" class="btn btn-success" data-bind="click:previous">
              上一页
         </button>
         <button type="button" class="btn btn-info" data-bind="click:next">
              下一页
         </button>
         <button type="button" class="btn btn-warning" data-bind="click:last">
             最后一页
         </button>
     </div>

     <div style="margin-top:20px" data-bind="foreach:pageNumbers" class="btn-group" role="group">
         <button data-bind="text:$data,click:$root.gotoPage" type="button" class="btn btn-default">
         </button>
     </div>

 </div>
 @*注意将脚本放在html 代码的下面*@
 <script type="text/javascript">
     function NewsPage() {
         //viewModel本身。用来防止直接使用this的时候作用域混乱
         var self = this;
         //数据
         this.items = ko.observableArray();
         //要访问的页码
         this.pageIndex = ko.observable(1);
         //总计页数
         this.pageCount = ko.observable(1);
         //页码数
         this.pageNumbers = ko.observableArray();
         //当前页
         this.currengePage = ko.observable(1);
         this.refresh = function () {
             //限制请求页码在该数据页码范围内
             if (self.pageIndex() < 1)
                 self.pageIndex(1);
             if (self.pageIndex() > self.pageCount()) {
                 self.pageIndex(self.pageCount());
             }
             //post异步加载数据
             $.post(
                 "/PageList/PageList",
                 {
                     pageIndex: self.pageIndex()
                 },
                 function (data) {
                     // 加载新的数据前，先移除原先的数据
                     self.items.removeAll();
                     self.pageNumbers.removeAll();
                     self.pageCount(data.PageCount)
                     for (var i = 1; i < data.PageCount; i++) {
                         //装填页码
                         self.pageNumbers.push(i);
                     }
                     //for...in 语句用于对数组或者对象的属性进行循环操作。
                     //for ... in 循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作。
                     for (var i in data.PagedData) {
                         //装填数据
                         self.items.push(data.PagedData[i]);
                     }
                 }, "json"
                             )
         }
         //请求第一页数据
         this.first = function () {
             self.pageIndex(1);
             self.refresh();
         }
         //请求下一页数据
         this.next = function () {
             self.pageIndex(this.pageIndex() + 1);
             self.refresh();

         }
         //请求先前一页数据
         this.previous = function () {
             self.pageIndex(this.pageIndex() - 1);
             self.refresh();
         }
         //请求最后一页数据
         this.last = function () {
             self.pageIndex(this.pageCount() - 1);
             self.refresh();
         }
         //跳转到某页
         this.gotoPage = function (data, event) {
             self.pageIndex(data);
             self.refresh();
         }
         this.refresh();
     }
     var viewModel = new NewsPage();
     ko.applyBindings(viewModel);
 </script>

后台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 = ;
            //取到请求页码的数据
            List<News> news = GetNewsData().Skip((pageIndex - ) * 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 = ; i < ; 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; }
    }
}

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

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

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