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();
        }
    }