MVC学习之数据分页：利用组件PagedList.Mvc

时间：2022-02-10 19:47:49

准备工作:

     在项目的【管理NuGet程序包】中安装PagedList.Mvc组件。

     安装好了截图让下：

MVC学习之数据分页：利用组件PagedList.Mvc

 

具体实现

后台控制器代码：

using Paging.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using PagedList;      //一定要引入这个命名空间
using System.Data;   

namespace Paging.Controllers
{
public class PagingController : Controller
    {
private ComputerEntities db = new ComputerEntities();   //得到数据库上下文
/// <summary>
/// 数据展示
/// </summary>
/// <param name="p">当前页数</param>
/// <returns>当页的数据</returns>
public ActionResult Index(int p =1)   
        {
var data = db.ComputerInfo.ToList();   //得到数据源
//P:表示当前是第几页，2：表示每页展示的数据条数
var pageData = data.ToPagedList(pageNumber:p,pageSize:2);     
return View(pageData);
        }

/// <summary>
/// 编辑数据
/// </summary>
/// <param name="id"></param>
/// <returns></returns>
public ActionResult Edit(int id=0)
        {
var data = db.ComputerInfo.Find(id);
if (data != null)
            {
return View(data);
            }
else
            {
return HttpNotFound();
            }
        }

        [HttpPost]
public ActionResult Edit(ComputerInfo cinfo)
        {
if(ModelState.IsValid){
                db.Entry(cinfo).State = EntityState.Modified;
                db.SaveChanges();
            }
return RedirectToAction("Index");
        }

/// <summary>
/// 删除数据
/// </summary>
/// <param name="id"></param>
/// <returns></returns>
        [HttpPost]
public ActionResult Delete(int id)
        {
var Cinfo = db.ComputerInfo.Find(id);
if (Cinfo!=null)
            {
                db.ComputerInfo.Remove(Cinfo);
                db.SaveChanges();
            }
return RedirectToAction("Index", "Paging");
        }

/// <summary>
/// 数据详情
/// </summary>
/// <param name="id"></param>
/// <returns></returns>
public ActionResult Details(int id)
        {
var data = db.ComputerInfo.Find(id);
return View(data);
        }
    }
}

 

前端页面：

Index：数据展示页面【涉及到分页】
@using PagedList           //记得引入
@using PagedList.Mvc        //记得引入
@model IEnumerable<Paging.Models.ComputerInfo>

@{
    ViewBag.Title = "数据展示页";
}
@{
var ajaxOptions = new AjaxOptions()
    {
        OnSuccess = "OK",
        OnFailure = "Failure",
        Confirm = "您确定要删除这条信息吗？",
        HttpMethod="Post"    
    };
}

@section scripts{
  @Scripts.Render("~/bundles/jqueryval")
<script>
        function OK() {
            alert("删除成功！");
            location.reload();
        }
        function Failure() {
            alert("删除失败！");
        }
</script>
}
<h2>数据展示</h2>
<table>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Name)
</th>
        <th>
            @Html.DisplayNameFor(model => model.Price)
</th>
        <th></th>
    </tr>

@foreach (var item in Model) {
<tr>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
</td>
        <td>
            @Html.DisplayFor(modelItem => item.Price)
</td>
        <td>
            @Html.ActionLink("编辑", "Edit", new { id=item.Id }) |
            @Html.ActionLink("详情", "Details", new { id=item.Id }) |
            @Ajax.ActionLink("删除", "Delete", new { id = item.Id }, ajaxOptions)
</td>
    </tr>
}
</table>
//下面是分页涉及到的东西<link href="~/Content/PagedList.css" rel="stylesheet" />     //样式
@{
var data = Model as IPagedList<Paging.Models.ComputerInfo>;   //得到数据源
}
@Html.PagedListPager(list: data, generatePageUrl: Page => Url.Action("Index", new { p=Page}))   //分页链接

编辑页面：

@model Paging.Models.ComputerInfo
@{
    ViewBag.Title = "数据编辑页";
}

<h2>编辑页面</h2>

@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

<fieldset>
        <legend>@Model.Name 的编辑页面</legend>

        @Html.HiddenFor(model => model.Id)

<div class="editor-label">
            @Html.LabelFor(model => model.Name)
</div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
</div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Price)
</div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Price)
            @Html.ValidationMessageFor(model => model.Price)
</div>

        <p>
            <input type="submit" value="保存" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("首页", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

详情页面：

@model Paging.Models.ComputerInfo
@{
    ViewBag.Title = "数据详情页";
}
<h2>详情页</h2>
<fieldset>
    <legend>@Model.Name 的详情信息</legend>

    <div class="display-label">
         @Html.DisplayNameFor(model => model.Name)
</div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Name)
</div>

    <div class="display-label">
         @Html.DisplayNameFor(model => model.Price)
</div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Price)
</div>
</fieldset>
<p>
    @Html.ActionLink("编辑", "Edit", new { id=Model.Id }) |
    @Html.ActionLink("首页", "Index")
</p>

 

小结：

在使用PagedList组件实现分页：主要就以下几步：

1、在后台代码中引入：using PagedList;命名空间，同时获得数据源【注意数据源的类型一定要转换成IEnumerable或是IQueryable，或是继承这两个型别的子类也可以】：data。

2、通过var pagedata = data.ToPagedList(pageNumber:p,pageSize:2) 获得分页后的结果信息：其中pageNumber：表示当前是第几页，PageSize：表示每页展示的数据的条数。

3、在页面顶部引入以下两个命名空间：

   @using PagedList

   @using PagedList.Mvc

4、当安装好了PagedList组件后，在项目的Content文件夹下，会有一个PagedList.css的默认的分页所需的样式表，在使用@Html.PagedListPager之前引用它。会让分页更加好看

5、在View页面上通过@Html.PagedListPager(list: data, generatePageUrl: Page => Url.Action("Index", new { p=Page}))辅助方法输出分页所需的分页导览链接。其中list：对应的是数据【控制器传到页面上的数据】，但是这个类型要转为IpagedList<T>类型的。，generatePageUrl：就是分页导航链接。

 

 

 

写写博客，方便自己也方便有需要的人！*_*!

 

 

 

 

 

 

 

 

 

    

标签：

相关文章