.NETMVC基于Ajax的无刷新分页

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

整体项目结构如图所示：

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

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

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

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

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 Articles { get; set; }

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

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
分页

    @Html.Partial("_Index", Model)
    
        跳转到第页
        @Ajax.Pager(Model).Options(o => o.SetId("mypager").SetPageIndexParameterName("id").SetPageIndexBoxId("pib").SetPagerItemTemplate("{0} ")).AjaxOptions(a => a.SetUpdateTargetId("articles").EnablePartialLoading())
    

@section Scripts{@{Html.RegisterMvcPagerScriptResource();}}

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

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

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

_Index.cshtml代码如下：

@using Webdiyer.WebControls.Mvc
@model PagedList

    @{ int i = 0;}
    @foreach (var item in Model)
    {
        
    }

    

        
序号
        

            @Html.DisplayNameFor(model => model.Title)
        
        

            @Html.DisplayNameFor(model => model.PubDate)
        
        

            @Html.DisplayNameFor(model => model.Author)
        
        

            @Html.DisplayNameFor(model => model.Source)
        
    

            
@(Model.StartItemIndex + i++)
            

                @Html.DisplayFor(modelItem => item.Title)
            
            

                @Html.DisplayFor(modelItem => item.PubDate)
            
            

                @Html.DisplayFor(modelItem => item.Author)
            
            

                @Html.DisplayFor(modelItem => item.Source)
            
        

到此项目算是构建完成。

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

 右击Article如图选择。

在此处填充数据，如图所示：

数据填充完后，再点击运行程序，进入Show/Index页面。

 无刷新分页完成。

参考文章：
https://www.cnblogs.com/yh2015/p/7306897.html
http://www.webdiyer.com/mvcpager/demos/ajaxpartialloading/#id=5