[实战]MVC5+EF6+MySql企业网盘实战(22)——图片列表

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Script.Serialization;
using Wolfy.NetDisk.BLL;
using Wolfy.NetDisk.IBLL;
using Wolfy.NetDisk.Model;
using Wolfy.NetDisk.Site.Models;

namespace Wolfy.NetDisk.Site.Controllers
{
public class ImagesController : Controller
    {
private IMyFileServiceRepository _myFileServiceRepository = new MyFileServiceRepository();

private ILogServiceRepository _logServiceRepository = new LogServiceRepository();
private IFileTypeServiceRepository fileTypeServiceRepository = new FileTypeServiceRepository();
//
// GET: /Images/
public ActionResult Lists()
        {
            UserInfo user = Session["user"] as UserInfo;
if (user == null)
            {
return RedirectToAction("Login", "UserInfo");
            }
return View();
        }
        [HttpGet]
public JsonResult GetImages()
        {
            UserInfo userInfo = Session["user"] as UserInfo;
int page = Convert.ToInt32(Request.Params["page"]);
if (page <= 0)
            {
                page = 1;
            }
if (userInfo == null)
            {
                RedirectToAction("Login", "UserInfo");
            }
int pageSize = 10;
int recordCount = 0;
var imagesPaged = _myFileServiceRepository.FindPaged<DateTime>(page, pageSize, out recordCount, x => x.User.Id == userInfo.Id && x.IsDelete == false && x.FileIcon.Contains("ImgType.png"), false, x => x.CreateDt);
int totalPage = Convert.ToInt32(Math.Ceiling(recordCount * 1.0 / pageSize));
            List<MyFileViewModel> lstMyFileViewModel = new List<MyFileViewModel>();
foreach (var item in imagesPaged)
            {
                lstMyFileViewModel.Add(new MyFileViewModel()
                {
                    Id = item.Id,
                    FileIcon = item.FileIcon,
                    FileServerUrl = "/NetDisk/" + item.FileMd5 + item.FileExt,
                    Name = item.Name,
                    FileThumnailUrl = "/NetDisk/" + item.FileMd5 + "_thumbnail" + item.FileExt
                });
            }
return new JsonResult() { Data = new JavaScriptSerializer().Serialize(new { _data = lstMyFileViewModel, _code = 200, total = totalPage }), JsonRequestBehavior = JsonRequestBehavior.AllowGet };
        }
    }
}

List视图

@{
    ViewBag.Title = "Lists";
    Layout = "~/Views/Shared/_Layout.cshtml";
}


<script>

    $(function () {
var imgElement = $('#imgpage');
var options = {
            size: "large",
            bootstrapMajorVersion: 3,
//当前页
            currentPage: 1,
//可以改变显示的页码数
            numberOfPages: 5,
//总页数
            totalPages: 5
        };
function requestServer(pageIndex) {
            $.getJSON('/Images/GetImages?page=' + pageIndex, function (data) {
                console.log(data);
                data = JSON.parse(data);
if (data.total <= pageIndex) {
                    options.totalPages = pageIndex;
                } else {
                    options.totalPages = data.total;
                };

                $('#dvimg').html('');
for (var i = 0; i < data._data.length; i++) {
var current = data._data[i];
                    $(' <img style="margin-left:10px;" data-id="' + current.Id + '" src="' + current.FileThumnailUrl + '" alt="' + current.Name + '"  title="' + current.Name + '"/>').appendTo($('#dvimg'));

                };
                imgElement.bootstrapPaginator(options);

            });
        };
function loadData(pageIndex) {

            options.onPageClicked = function (e, originalEvent, type, page) {
//页码单击事件
                console.log(page);
                options.currentPage = page;

                requestServer(page);

            };
            requestServer(pageIndex);
            imgElement.bootstrapPaginator(options);

        };

        loadData(1);
    });
</script>
<div class="tableContent" style="width:95%;" id="dvimg">

</div>
<div style="width:95%;position:relative;margin-top:10px">
<ul id='imgpage' class="bjui-pageFooter" style="margin:0 auto; margin-left:30%;"></ul>
</div>

结果如下图所示，上传一些测试的图片

图片列表

[实战]MVC5+EF6+MySql企业网盘实战(22)——图片列表

总结

最近一直在学车，挤出点时间，今天又实现了一个功能。所剩的功能不多了。也有个网盘的样子了。

秒客网

[实战]MVC5+EF6+MySql企业网盘实战(22)——图片列表

写在前面

系列文章

实现

总结

相关文章