• 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;
                }
            }
        }
    

      

  • 相关阅读:
    VUEX
    使用element框架 增加router路由
    VUE目录
    elementUI 创建
    VUE组件(父子组件)
    VUE操作DOM获取HTML、删除HTML、插入HTML
    VUE网络交互axios(网络请求库)
    VUE 或者JS 常用数据类型及方法:字符串、数组、对象
    VUE实际案例--计数器(商城数量加减)
    VUE学习 --数据类型、el挂点、指令等
  • 原文地址:https://www.cnblogs.com/lierjie/p/12046705.html
Copyright © 2020-2023  润新知