MVC PartialView 方式实现点击加载更多

<table id="MovieListing">

</table>
<div> <button id="btnShowMore">显示更多</button> </div> <form> <input type="hidden" id="pIndex" name="pIndex" value="0" /> </form>
<script type="text/javascript"> $Content = $("#MovieListing");//填充父容器 $PIndex = $("#pIndex");// $(function () { $("#btnShowMore").click(function () { ShowMore(); }); ShowMore(); }); function ShowMore() { $.ajax({ url: "Listing", data: { pIndex: $PIndex.val() }, success: function (data) { $Content.append(data); $PIndex.val(+($PIndex.val()) + 1); } }); } </script>

前台主界面里,准备好一个数据填充容器,一个临时保存当前获取第几页的容器, 

 

Controller里写个返回分布视图的Action,用到了了两个获取数据的方法,下面会贴出来的,别急。

   public ActionResult Listing(int pIndex)
   {
      int pageCount = 5;//每次获取的条数
      if (pageCount * pIndex > zService.MovieService().Length())//数量越界
      {
          return null;
      }
      var resault = zService.MovieService().Filter(pIndex, pageCount);
      return PartialView(resault);
  }

返回数据的代码,就随便写个Service,里面的两个方法:

    public class MovieService
    {
        private MovieDBContext db = new MovieDBContext();

        public IEnumerable<MovieInfo> Filter(int pIndex, int count)
        {
            return db.Movies.OrderBy(d => d.ID).Skip(pIndex * count).Take(count).ToList();
        }
        public int Length()
        {
            return db.Movies.Count();
        }
    }

 

posted @ 2014-03-16 20:06  三台  阅读(329)  评论(0编辑  收藏  举报