ASP.NET MVC +Jquery+layui 无刷新分页图片加载

视图页

@model Autumn.Web.Models.d_view_Image
@{
    ViewBag.Title = "Show";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="~/js/jquery-1.8.2.min.js"></script>
<script src="~/js/layui-v2.5.5/layui/layui.all.js"></script>
<link href="~/js/layui-v2.5.5/layui/css/layui.css" rel="stylesheet" />
<script>
    function InsertHtml(jsonarray) {
        //var jsonarray = str.Obj.imageList;
        var htmls = "";
        var num = 0;
        $('#uiId').html(''); 
        for (var i = 0; i < jsonarray.length; i++) {
            num++;
            if (num % 3 == 0 ) {
                htmls += "<li class='no_mar'><a href='javascript:void(0)'><img src='" + jsonarray[i].ImageUrl.trim() + "' /><span>" + jsonarray[i].ImageTitle + "</span></a></li>"
            }
            else {
                htmls += "<li><a href='javascript:void(0)'><img src='" + jsonarray[i].ImageUrl.trim() + "' /><span>" + jsonarray[i].ImageTitle + "</span></a></li>"
            }
        }
        $('#uiId').html(htmls); 
    }

    function getCurrentClass(CurrentClassId) {
        $.ajax({
            url: "/Show/ChangeClass",
            type: "post",
            cache: false,
            data: { PageIndex: 1, ClassId: CurrentClassId },
            datatype: 'Json',
            success: function (str) {
                var jsonarray = str.Obj.imageList;
                InsertHtml(jsonarray);
                layui.use(['laypage', 'layer'], function () {
                    var laypage = layui.laypage
                    , layer = layui.layer;
                    laypage.render({
                        elem: 'pagers'
                    , count: str.Obj.TotalCount //数据总数
                    , limit: str.Obj.PageSize
                    , jump: function (obj, first) {
                        //首次不执行
                        if (!first) {
                            //监听切换 获取当前数据
                            $.post('/Show/ChangeClass', { PageIndex: obj.curr, ClassId: str.Obj.ClassId }, function (result) {
                                var jsonarraychange = result.Obj.imageList;
                                InsertHtml(jsonarraychange);
                            })//end post
                        }//end (!first) {
                    }//end jump
                    });//end render
                });


            },
            error: function (msg) {
                //alert(msg);
            }
        })//end ajax
 
    }//end function
</script>
 
 

<div class="show_right fr">
    <div class="banner_n"><img src="~/images/banner_n.jpg" /></div>
    <div class="main">
        <div class="locat">当前位置：<a href="">首页</a> > <a href="">作品展示</a></div>
        <!--分类-->
        <div class="show_fenl clearfix" id="div_Class">
            <ul>
                @foreach (var item in @Model.imageClassList)
                {
                    <li><a href="javascript:void(0)" onclick="getCurrentClass('@item.Id')">@item.ClassName</a></li>
                }
            </ul>
        </div>
        <!--图片-->
        <div class="showpic clearfix" id="app_vue">
            <ul id="uiId">
                @*<li><a href=""><img src="~/images/objpic07.jpg" /><span>摄影艺术</span></a></li>
                <li><a href=""><img src="~/images/objpic02.jpg" /><span>摄影艺术</span></a></li>
                <li class="no_mar"><a href=""><img src="~/images/objpic03.jpg" /><span>摄影艺术</span></a></li>
               *@
            </ul>
            <!--分页-->
            <div id="pagers"></div>
            <!--footer start-->
            @RenderPage("~/Views/Shared/_PartialPagefooter.cshtml")
            <!--footer end-->
        </div>
    </div>
</div>


<script>
    $(function () {
        getCurrentClass(1);//加载完成后自动刷新成类别为1
    })//end  $(function () {

</script>
 

　　控制器页

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using DALByPhoto;
using Autumn.Web.Models;

namespace Autumn.Web.Controllers
{
    public class ShowController : Controller
    {
        Dal_ImageClasses dal_ImageClasses = new Dal_ImageClasses();
        Dal_Images dal_Images = new Dal_Images();
        Dal_UserAdmin dal_useradmin = new Dal_UserAdmin();
        //
        // GET: /Show/返回类
        public ActionResult Show( )
        {
            var AllClass = GetAllClass(); 
            d_view_Image dimage = new d_view_Image() { imageClassList = AllClass };
            return View(dimage);
        }
        public IEnumerable<ImageClass> GetAllClass( )
        {
            IEnumerable<ImageClass> AllClass = dal_ImageClasses.GetAll();
            return AllClass;
        }
 

        /// <summary>
        /// 更换id
        /// </summary>
        /// <param name="ClassId"></param>
        /// <returns></returns>
        public ActionResult ChangeClass(int PageIndex=1,int ClassId = 1)
        {
            int pageSize=9;
            int totalCount=0; 
            //返回数据           
            IEnumerable<Images> ImageList = dal_Images.getImagesByClassId(ClassId, PageIndex, pageSize, out totalCount);
            d_view_Image dimage = new d_view_Image();
            dimage.TotalCount = totalCount;
            dimage.PageIndex = PageIndex;
            dimage.PageSize = pageSize;
            dimage.ClassId = ClassId;
            dimage.imageList = ImageList; 
            return Json(new AjaxResult() { Message = "成功", Obj = dimage, Result = "OK" }, JsonRequestBehavior.AllowGet); 
        } 
    }
}

　　dto类

   public class d_view_Image
    {
        public int PageIndex { get; set; }
        public int PageSize { get; set; }
        public int TotalCount { get; set; }
        public int ClassId { get; set; }
        public IEnumerable<ImageClass> imageClassList { get; set; }
        public IEnumerable<Images> imageList { get; set; }
    }

　　dal类

 public class Dal_Images
    {
        public IEnumerable<Images> getImagesByClassId(int ClassId, int pageIndex, int pageSize, out int totalcount)
        {
            using (var context = new PhotoContext())
            { 
                var Imagess=context.Imageses.Where(u => u.ImageClassId == ClassId);
                totalcount=Imagess.Count();
                IEnumerable<Images> Results=Imagess.OrderByDescending(d=>d.CreateTime).Skip((pageIndex-1)*pageSize).Take(pageSize).ToList(); 
                return Results;
            }
        }
    }