C# MVC分頁查詢顯示

原創 V平平淡淡才是真 2020-05-24 18:57

MVC如何進行分頁查詢顯示

一般情況下，我們顯示一張表的內容是直接全部顯示，但是這樣的方法做出來的效果非常不美觀，而且在數據量特別大的情況下，會顯得頁面內容非常雜亂。所以，我們使用了分頁，分頁不僅可以使你的頁面內容變得十分簡潔美觀，而且還支持只對指定內容進行顯示。下面是常用的4種分頁顯示方法。

  1. 方法一，對指定行數進行分頁查詢顯示
//控制器
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using chuanzhi.Models;
namespace chuanzhi.Controllers
{
    public class DepartmentController : Controller
    {
        TestDB5Entities db = new TestDB5Entities();
        // GET: Department
        public ActionResult Index()
        {
            //查詢部門表第2頁，每頁顯示5條，相當於顯示第6-10條數據
            var departments = db.Departments
                .OrderBy(p=>p.ID)//按照ID排序
                .Skip(5)//跳過前面5條
                .Take(5)//每頁顯示5條
                .ToList()
            return View(departments);
        }
    }
}
//視圖
@{
    ViewBag.Title = "Index";
}
@using chuanzhi.Models;
@model List<Department>
<h2>部門列表</h2>
<table class="table table-bordered">
    <thead>
        <tr>
            <th>編號</th>
            <th>名稱</th>
            <th>備註</th>
        </tr>   
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
        <tr>
            <td>@item.ID</td>
            <td>@item.Name</td>
            <td>@item.Remark</td>
        </tr>         
        }
    </tbody>
</table>
  1. 方法二，查詢所有數據並按照每頁顯示指定行數進行分頁。
//控制器代碼
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using chuanzhi.Models;
namespace chuanzhi.Controllers
{
    public class DepartmentController : Controller
    {
        TestDB5Entities db = new TestDB5Entities();
        // GET: Department
        public ActionResult Index(int pageIndex=1,int pageSize=10)
        {
            //查詢總記錄數
            var totalRows = db.Departments.Count();
            //計算總頁數
            var pageCount = Math.Ceiling(totalRows*1.0 / pageSize);               
            ViewBag.pageCount = pageCount;//控制器向視圖傳值
            ViewBag.pageIndex = pageIndex;//控制器向視圖傳值
            //查詢第pageIndex頁，每頁顯示pageSize條
            var departments = db.Departments
                .OrderBy(p=>p.ID)//按照ID排序
                .Skip((pageIndex-1)*pageIndex)//顯示第幾頁
                .Take(pageSize)//每頁顯示pageSize條
                .ToList();
            return View(departments);
        }
    }
}
//視圖代碼
@{
    ViewBag.Title = "Index";
}
@using chuanzhi.Models;
@model List<Department>
<h2>部門列表</h2>
<table class="table table-bordered">
    <thead>
        <tr>
            <th>編號</th>
            <th>名稱</th>
            <th>備註</th>
        </tr>   
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
        <tr>
            <td>@item.ID</td>
            <td>@item.Name</td>
            <td>@item.Remark</td>
        </tr>         
        }
    </tbody>
</table>
<nav class="pager">
    <ul>
        <li>共 @ViewBag.PageCount 頁</li>
        <li>當前爲：第 @ViewBag.PageIndex 頁</li>
    </ul>
</nav>
  1. 方法三，建立視圖模型進行分頁
//分頁顯示方法3,建立視圖模型
//控制器
using System.Web;
using System.Web.Mvc;
using chuanzhi.Models;
using chuanzhi.Models.ViewModel;
namespace chuanzhi.Controllers
{
    public class DepartmentController : Controller
    {
        TestDB5Entities db = new TestDB5Entities();
        // GET: Department
        public ActionResult Index(int pageIndex=1,int pageSize=5)
        {
            //查詢總頁數
            var totalRows = db.Departments.Count();
            //計算總頁數
            var pageCount = Math.Ceiling(totalRows*1.0 / pageSize);
            //查詢第pageIndex頁，每頁顯示pageSize條
            var departments = db.Departments
                .OrderBy(p=>p.ID)//按照ID排序
                .Skip((pageIndex-1)*pageIndex)//顯示第幾頁
                .Take(pageSize)//每頁顯示pageSize條
                .ToList();
            ViewPageModel viewPageModel = new ViewPageModel()
            {
                Departments = departments,
                PageCount = pageCount,
                PageIndex = pageIndex
            };
            return View(viewPageModel);
        }
    }
}
//視圖
@{
    ViewBag.Title = "Index";
}
@using chuanzhi.Models.ViewModel;
@model ViewPageModel
<h2>部門列表</h2>
<table class="table table-bordered">    
    <thead>
        <tr>
            <th>編號</th>
            <th>名稱</th>
            <th>備註</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.Departments)
        {
            <tr>
                <td>@item.ID</td>
                <td>@item.Name</td>
                <td>@item.Remark</td>
            </tr>
        }
    </tbody>
</table>
<nav class="pager">
    <ul>
        <li>共 @Model.PageCount 頁</li>
        <li>當前爲：第 @Model.PageIndex 頁</li>
    </ul>
</nav>
  1. 方法四，對多個表進行分頁，使用泛型集合。比如對教師和部門表進行分頁。
//先建立一個視圖模型類ViewPageModel
//ViewPageModel
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace chuanzhi.Models.ViewModel
{
    public class ViewPageModel<T> where
        T:class//T表示預留出來的類，不能事先指定，只能在使用的時候指定
    {
        public int PageIndex { get; set; }
        public Double PageCount { get; set; }
        public List<T> Models { get; set; }
    }
}
//部門表控制器
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using chuanzhi.Models;
using chuanzhi.Models.ViewModel;
namespace chuanzhi.Controllers
{
    public class DepartmentController : Controller
    {
        TestDB5Entities db = new TestDB5Entities();
        // GET: Department
        public ActionResult Index(int pageIndex=1,int pageSize=5)
        {
            //查詢總頁數
            var totalRows = db.Departments.Count();
            //計算總頁數
            var pageCount = Math.Ceiling(totalRows*1.0 / pageSize);      
            //查詢第pageIndex頁，每頁顯示pageSize條
            var departments = db.Departments
                .OrderBy(p=>p.ID)//按照ID排序
                .Skip((pageIndex-1)*pageIndex)//顯示第幾頁
                .Take(pageSize)//每頁顯示pageSize條
                .ToList();
        ViewPageModel<Department> viewPageModel = new ViewPageModel<Department>()
            {
                Models = departments,
                PageCount = pageCount,
                PageIndex = pageIndex
            };
            return View(viewPageModel);  
        }
    }
}
//部門表視圖
@{
    ViewBag.Title = "Index";
}
@using chuanzhi.Models
@using chuanzhi.Models.ViewModel;
@model ViewPageModel<Department>
<h2>部門列表</h2>
<table class="table table-bordered">
    <thead>
        <tr>
            <th>編號</th>
            <th>名稱</th>
            <th>備註</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.Models)
        {
            <tr>
                <td>@item.ID</td>
                <td>@item.Name</td>
                <td>@item.Remark</td>
            </tr>
        }
    </tbody>
</table>
<nav class="pager">
    <ul>
        <li>共 @Model.PageCount 頁</li>
        <li>當前爲：第 @Model.PageIndex 頁</li>
    </ul>
</nav>

//教師表控制器
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using chuanzhi.Models;
using chuanzhi.Models.ViewModel;
namespace chuanzhi.Controllers
{
    public class TeacherController : Controller
    {
        TestDB5Entities db = new TestDB5Entities();
        // GET: Department
        public ActionResult Index(int pageIndex = 1, int pageSize = 5)
        {
            //查詢總頁數
            var totalRows = db.Teachers.Count();
            //計算總頁數
            var pageCount = Math.Ceiling(totalRows * 1.0 / pageSize);
            
            //查詢第pageIndex頁，每頁顯示pageSize條
            var teachers = db.Teachers
                .OrderBy(p => p.ID)//按照ID排序
                .Skip((pageIndex - 1) * pageIndex)//顯示第幾頁
                .Take(pageSize)//每頁顯示pageSize條
                .ToList();
            ViewPageModel<Teacher> viewPageModel = new ViewPageModel<Teacher>()
            {
                Models = teachers,
                PageCount = pageCount,
                PageIndex = pageIndex
            };
            return View(viewPageModel);
        }
    }
}
//教師表視圖
@{
    ViewBag.Title = "Index";
}

@using chuanzhi.Models
@using chuanzhi.Models.ViewModel;
@model ViewPageModel<Teacher>
<h2>教師列表</h2>
<table class="table table-bordered">
    <thead>
        <tr>
            <th>編號</th>
            <th>名稱</th>
            <th>備註</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.Models)
        {
            <tr>
                <td>@item.ID</td>
                <td>@item.Name</td>
                <td>@item.Remark</td>
            </tr>
        }
    </tbody>
</table>
<nav class="pager">
    <ul>
        <li>共 @Model.PageCount 頁</li>
        <li>當前爲：第 @Model.PageIndex 頁</li>
    </ul>
</nav>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章