Waterfall stream code, simple version with pagination

Next to the waterfall stream code, the paging function is added to the features of the simplified version.

 

Index. cshtml

@ Using PagedList. Mvc @ model PagedList. StaticPagedList <int >@{ ViewBag. Title = "waterfall stream"; Layout = "~ /Views/Shared/_ Layout. cshtml ";} @ section header {<script src = "~ /Scripts/jquery-ui-1.8.24.min.js "> </script> <link href = "~ /Content/PagedList.css "rel =" stylesheet "/> <style type =" text/css ">. * {margin: 0px; padding: 0px;} body {margin-left: auto; margin-right: auto ;}. clearBoth {clear: both;} # bodyContent {width: 1400px; margin-left: auto; margin-right: auto;} # head {width: 100%; height: 50px; margin-bottom: 10px ;}# LefMenue {width: 20%; height: 500px; float: left ;}# RightContent {width: 75%; float: right; border: thin s Olid #333 ;}# Footer {margin-top: 10px; width: 100%; height: 40px ;}. greyBlock {border: thin solid #333; background-color: # CCC; width: 100% ;}. item {float: left; width: 230px; margin: 5px; border: 1px solid # CCC;/* position: absolute; */} # loading {display: none ;} # ProductPager {display: none; margin-left: auto; margin-right: auto; width: 500px ;} </style >}< div id = "bodyContent"> <div id = "head" class = "GreyBlock">
C # Controller

Using System; using System. collections. generic; using System. linq; using System. web; using System. web. mvc; namespace NationalUnion. member. controllers {public class ProductController: Controller {const int AJAXSIZE = 10; // The number of Ajax reads each time. const int WATERFALLSIZE = 30; // number of entries displayed on each page of the waterfall stream [HttpGet] public ActionResult Index (int pageIndex = 1) {int vTotalCount = 0; List <int> vListData = GetPageData (pageIndex, out vTotalCount); PagedList. staticPagedList <int> vPageData = new PagedList. staticPagedList <int> (vListData, pageIndex, WATERFALLSIZE, vTotalCount); return View (vPageData );} /// <summary> /// obtain the paging data /// </summary> /// <param name = "argPageIndex"> </param> /// <param name = "argTotalCount"> </param> // <returns> </returns> [NonAction] List <int> GetPageData (int argPageIndex, out int argTotalCount) {List <int> vListData = DataSource (); argTotalCount = vListData. count (); return vListData. skip (argPageIndex-1) * WATERFALLSIZE ). take (AJAXSIZE ). toList ();} /// <summary> /// construct the data source /// </summary> /// <returns> </returns> [NonAction] List <int> DataSource () {Random ro = new Random (); List <int> vListInt = new List <int> (); for (int I = 1; I <= 150; I ++) {vListInt. add (I) ;}return vListInt ;} /// <summary> ///// </summary> /// <param name = "pageIndex"> </param> /// <returns> </returns> public JsonResult GetData (int pageIndex = 1, int requestIndex = 1) {Random ro = new Random (); List <int> vListData = DataSource (); List <int> vJsonData = vListData. skip (pageIndex-1) * WATERFALLSIZE + (requestIndex-1) * AJAXSIZE ). take (AJAXSIZE ). toList (); return Json (vJsonData, JsonRequestBehavior. allowGet);} public ActionResult includes product () {return View ();}}}View Code

Effect chart generated at last