使用Knoctout.分页

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

1、api中的方法

public ArticleListModel Get(int page,string _class)

        {

            var list = new ArticleListModel

                {

                    Articles = GetArticle(_class).Skip(*(page - )).Take().ToList(),

                    CurPage = page

                };

            //DAL.ApolloEntities entities = new ApolloEntities();

            int count = db.Articles.Count(p => p.Class == _class);

            int pages;

            if (count %  == )

                pages = count / ;

            else

            {

                pages = count /  + ;

            }

            list.Page = new List<PageModel>();

            //for (int i = 0; i < pages; i++)

            //{

            list.Page.Add(new PageModel { PageText = "上一页", PageValue = page -  });

            if (page <= pages-)

            {

                list.Page.Add(new PageModel {PageText = "下一页", PageValue = page + });

            }

            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 = ; //这里修改为想显示的宽度值

         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 = ;

                 $("#divID")[].innerHTML = "";

                 $.each(data.Articles, function (i, v)

                 {

                     if (i == )

                     {

                         $("#divID")[].innerHTML += "</br></br></br>";

                     }

                     $("#divID")[].innerHTML += "<a href='' id='a" + i + "' ><img id='image" + i + "' src='' onload='ReSizePic(this);' /></a>";

                     $("#divID")[].innerHTML += "<p class='bgcolor' id='p" + i + "'></p>";

                     $("#divID")[].innerHTML += "<p class='bgtext' id='pl" + i + "'></p>";

                     $("#a" + i).attr({ href: "/ReceptionArticle/Details/" + v.Id });

                     $("#image" + i).attr({ src: v.Img });

                     $("#p" + i)[].textContent = v.Title;

                     $("#pl" + i)[].textContent = v.Time.toString().substring(, );

                     i++;

                 }

                 );

                 self.pages.removeAll();

                 $.each(data.Page, function (i, v) {

                     self.pages.push(v);

                 });

             });

         };

     }

     var viewModel = new ArticleViewModel();

     $.getJSON("/api/Articles", { page: , _class: "联合动态" }, function (data) {

         var i = ;

         $("#divID")[].innerHTML = "";

         $.each(data.Articles, function (i, v) {

             if (i == ) {

                 $("#divID")[].innerHTML += "</br></br></br>";

             }

             $("#divID")[].innerHTML += "<a href='' id='a" + i + "' ><img id='image" + i + "' src='' onload='ReSizePic(this);' /></a>";

             $("#divID")[].innerHTML += "<p class='bgcolor' id='p" + i + "'></p>";

             $("#divID")[].innerHTML += "<p class='bgtext' id='pl" + i + "'></p>";

             $("#a" + i).attr({ href: "/ReceptionArticle/Details/" + v.Id });

             $("#image" + i).attr({ src: v.Img });

             $("#p" + i)[].textContent = v.Title;

             $("#pl" + i)[].textContent = v.Time.toString().substring(, );

             i++;

         });

         viewModel.lists = ko.observableArray(data.Articles);

         viewModel.pages = ko.observableArray(data.Page);

         ko.applyBindings(viewModel);

     });

    </script>