.NETMVC基于Ajax的无刷新分页

随心zz

于 2021-12-30 14:59:01 发布

阅读量830

点赞数 1

分类专栏： .NETMVC5 文章标签： mvc .net asp.net ajax c#

本文链接：https://blog.csdn.net/qq_45679776/article/details/122234851

版权

.NETMVC5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在ASP.NET MVC5项目中实现无刷新分页功能，包括安装必要的插件、创建数据库模型、设置控制器和视图，以及利用Ajax实现分页的动态加载。通过实例展示了每个步骤，最终实现了一个简单的文章列表分页展示页面。

摘要由CSDN通过智能技术生成

记录一次.NETMVC5的无刷新分页，这两天各种查找资料总算是完成了。

整体项目结构如图所示：

1.创建MVC项目（不过多累述）

安装Webdiyer.MvcPager和Microsoft.jQuery.Unobtrusive.Ajax插件。

安装步骤：右键项目→管理NuGet程序包→浏览，输入Webdiyer.MvcPager，选择安装。

安装Microsoft.jQuery.Unobtrusive.Ajax，与上述步骤一致。

Microsoft.jQuery.Unobtrusive.Ajax插件

2.在Model文件夹下创建Article类

Article.cs 代码如下：

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;

namespace WebApplication5.Models
{
    public class Article
    {
        [Display(Name = "文章编号")]
        public int ID { get; set; }
        [Display(Name = "文章标题")]
        [MaxLength(200)]
        public string Title { get; set; }
        [Display(Name = "文章内容")]
        public string Content { get; set; }
        [Display(Name = "发布日期")]
        public DateTime PubDate { get; set; }
        [Display(Name = "作者")]
        [MaxLength(20)]
        public string Author { get; set; }
        [Display(Name = "文章来源")]
        [MaxLength(20)]
        public string Source { get; set; }
    }
}

3.在项目内新建DAL文件，并在DAL文件下创建DataContext类(用于链接数据库)。

DataContext.cs 代码如下：

using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Data.Entity.ModelConfiguration.Conventions;
using System.Linq;
using System.Web;
using WebApplication5.Models;

namespace WebApplication5.DAL
{
    public class DataContext:DbContext
    {
        public DataContext() : base("DataContext")
        {
        }
        public DbSet<Article> Articles { get; set; }

        protected override void OnModelCreating(DbModelBuilder modelBuilder)
        {
            modelBuilder.Conventions.Remove<PluralizingTableNameConvention>();
        }
    }
}

4.在Controllers文件夹下创建ShowController.cs文件

ShowController.cs代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WebApplication5.DAL;
using Webdiyer.WebControls.Mvc;

namespace WebApplication5.Controllers
{
    public class ShowController : Controller
    {
        // GET: Show
        public ActionResult Index(int id = 1)
        {
            using (var db = new DataContext())
            {
                return View(db.Articles.OrderByDescending(a => a.PubDate).ToPagedList(id, 5));      //5表示分页的每一页显示5组数据
            }
        }
    }
}

6.在方法Index名上右击添加视图

选择MVC5视图添加

在文件夹View→Show下找到文件Index.cshtml文件，输入以下代码：

Index.cshtml代码如下：

@{
    ViewBag.Title = "Index";
}
@using Webdiyer.WebControls.Mvc
@model PagedList<WebApplication5.Models.Article>
<h2>分页</h2>
<div id="articles">
    @Html.Partial("_Index", Model)
    <div style="width:100%;overflow:auto;">
        <div style="float:right">跳转到第<select id="pib"></select>页</div>
        @Ajax.Pager(Model).Options(o => o.SetId("mypager").SetPageIndexParameterName("id").SetPageIndexBoxId("pib").SetPagerItemTemplate("{0}&nbsp;")).AjaxOptions(a => a.SetUpdateTargetId("articles").EnablePartialLoading())
    </div>
</div>
@section Scripts{@{Html.RegisterMvcPagerScriptResource();}}

7.创建Index方法的分部视图

重复第六步的前面步骤，并在该界面更名“_Index”并勾选分部视图。

在 _Index.cshtml文件内填写以下代码：

_Index.cshtml代码如下：

@using Webdiyer.WebControls.Mvc
@model PagedList<WebApplication5.Models.Article>
<table class="table table-bordered table-striped">
    <tr>
        <th class="nowrap">序号</th>
        <th>
            @Html.DisplayNameFor(model => model.Title)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.PubDate)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Author)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Source)
        </th>
    </tr>
    @{ int i = 0;}
    @foreach (var item in Model)
    {
        <tr>
            <td>@(Model.StartItemIndex + i++)</td>
            <td>
                @Html.DisplayFor(modelItem => item.Title)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.PubDate)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Author)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Source)
            </td>
        </tr>
    }
</table>

到此项目算是构建完成。

点击运行程序，在网址后添加 "Show/Index"，此时数据库里啥内容也没有，所以只有分页的样式。关闭程序，在项目列表进行以下操作：