使用Knoctout.分页

要点：点击标签翻页部分时，pageValue自动加1.

1、api中的方法

public ArticleListModel Get(int page,string _class)
        {
            var list = new ArticleListModel
                {
                    Articles = GetArticle(_class).Skip(6*(page - 1)).Take(6).ToList(),
                    CurPage = page
                };
            //DAL.ApolloEntities entities = new ApolloEntities();
            int count = db.Articles.Count(p => p.Class == _class);
            int pages;
            if (count % 6 == 0)
                pages = count / 6;
            else
            {
                pages = count / 6 + 1;
            }
            list.Page = new List<PageModel>();
            //for (int i = 0; i < pages; i++)
            //{
            list.Page.Add(new PageModel { PageText = "上一页", PageValue = page - 1 });
            if (page <= pages-1)
            {
                list.Page.Add(new PageModel {PageText = "下一页", PageValue = page + 1});
            }
            else
            {
                list.Page.Add(new PageModel { PageText = "下一页", PageValue = page });
            }
            //}
            return list;

        }

2、前台databind

<div class="floatright">
        <div class="pagination pagination-centered">
            <ul data-bind="foreach: pages">
                &nbsp;&nbsp;<a href="#" data-bind="click: $root.ChangePage, text: PageText"></a>&nbsp&nbsp
            </ul>
            
                        </div>
            </div>

3、前台js处理

<script type="text/javascript">
     function ReSizePic(ThisPic) {
         var RePicWidth = 253; //这里修改为想显示的宽度值
         var TrueWidth = ThisPic.width;    //图片实际宽度
         var TrueHeight = ThisPic.height;  //图片实际高度
         var Multiple = TrueWidth / RePicWidth;  //图片缩小(放大)的倍数

         ThisPic.width = RePicWidth;  //图片显示的可视宽度
         ThisPic.height = TrueHeight / Multiple;  //图片显示的可视高度
     }
     
     function ArticleViewModel() {
         var self = this;
         var lists;
         var pages;
         self.ChangePage = function (page) {
             $.getJSON("/api/Articles", { page: page.PageValue, _class: "联合动态" },
                 function (data)
                 {
                 var i = 0;
                 $("#divID")[0].innerHTML = "";
                 $.each(data.Articles, function (i, v)
                 {
                     if (i == 3)
                     {
                         $("#divID")[0].innerHTML += "</br></br></br>";
                     }
                     
                     $("#divID")[0].innerHTML += "<a href='' id='a" + i + "' ><img id='image" + i + "' src='' onload='ReSizePic(this);' /></a>";
                     $("#divID")[0].innerHTML += "<p class='bgcolor' id='p" + i + "'></p>";
                     $("#divID")[0].innerHTML += "<p class='bgtext' id='pl" + i + "'></p>";

                     $("#a" + i).attr({ href: "/ReceptionArticle/Details/" + v.Id });
                     $("#image" + i).attr({ src: v.Img });
                     $("#p" + i)[0].textContent = v.Title;
                     $("#pl" + i)[0].textContent = v.Time.toString().substring(0, 9);
                     i++;
                 }
                 );
                 
                 self.pages.removeAll();
                 $.each(data.Page, function (i, v) {
                     self.pages.push(v);
                 });

             });
         };
     }

     var viewModel = new ArticleViewModel();
     $.getJSON("/api/Articles", { page: 1, _class: "联合动态" }, function (data) {
         var i = 0;
         $("#divID")[0].innerHTML = "";
         $.each(data.Articles, function (i, v) {
             if (i == 3) {
                 $("#divID")[0].innerHTML += "</br></br></br>";
             }
             
             $("#divID")[0].innerHTML += "<a href='' id='a" + i + "' ><img id='image" + i + "' src='' onload='ReSizePic(this);' /></a>";
             $("#divID")[0].innerHTML += "<p class='bgcolor' id='p" + i + "'></p>";
             $("#divID")[0].innerHTML += "<p class='bgtext' id='pl" + i + "'></p>";

             $("#a" + i).attr({ href: "/ReceptionArticle/Details/" + v.Id });
             $("#image" + i).attr({ src: v.Img });
             $("#p" + i)[0].textContent = v.Title;
             $("#pl" + i)[0].textContent = v.Time.toString().substring(0, 9);
             i++;
         });
         viewModel.lists = ko.observableArray(data.Articles);
         viewModel.pages = ko.observableArray(data.Page);
         ko.applyBindings(viewModel);
     });
    </script>