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/
      轉載請以超鏈接形式標明文章原始出處。

 

  

         

                


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM