视图页
@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; } } }