mvc4 ajax 分页,asp.net Mvc4 使用ajax结合分页插件实现无刷新分页

本文为在mvc4中使用ajax实现无刷新分页demo，记录一下。

解决方案思想：页面数据的初始加载和按页加载都是通过ajax来进行，页面分页链接点击后利用ajax技术发送当前页码到后端控制器，后端控制器根据当前页码和设置的pageSize从数据库中取出对应页的数据。后端控制器处理完后利用PartialView方法把数据返回到分部视图中，利用ViewBag来返回总记录数和pageSize。ajax通过回调函数把控制器返回的分部视图内容加载到主视图中显示。

说明：分页具体的分页导航和样式使用了kkpager插件。

1、主视图(用于显示数据)代码

$(function ()

{

GetArticlesData(1);

});

function getParameter(name) {

var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");

var r = window.location.search.substr(1).match(reg);

if (r != null) return unescape(r[2]); return null;

}

function GetArticlesData(pageIndex)

{

var ajaxUrl = '/TestDataDB/AjaxPaging?pageIndex=' + pageIndex;

var ajaxType = 'post';

var ajaxDataType = 'text';

var sucFun = function (data, status)

{

if (data == null && status != "success")

{

alert("获取数据失败！");

return false;

}

else

{

$("#result").html(data);

//定义分页样式

var totalCount = parseInt('@ViewBag.TotalCount');

var pageSize = parseInt('@ViewBag.PageSize');

var pageNo = getParameter('pno');//该参数为插件自带，不设置好，调用数据的时候当前页码会一直显示在第一页

if (!pageNo) {

pageNo = 1;

}

var totalPages = totalCount % pageSize == 0 ? totalCount / pageSize : (parseInt(totalCount / pageSize) + 1);

kkpager.generPageHtml({

pno: pageNo,

total: totalPages,

totalRecords: totalCount,

mode: 'click',

click: function (n) {

this.selectPage(n);//插件自带的方法，手动调用某一页码

searchPage(n);

return false;

}

});

}

};

//ajax参数设置

var Option =

{

url: ajaxUrl,

type: ajaxType,

dataType: ajaxDataType,

cache: false, //设置为 false 将不会从浏览器缓存中加载请求信息。

async: true, //(默认: true)，所有请求均为异步请求。发送同步请求，请将此选项设置为 false。同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

timeout: 3600, //设置请求超时时间(毫秒)。此设置将覆盖全局设置。

error: function () { },

success: sucFun,

beforeSend: function () { }

};

$.ajax(Option);

return false;

}

//ajax翻页

function searchPage(n)

{

GetArticlesData(n);

}

2、分部视图代码@model IEnumerable

@{

ViewBag.Title = "AjaxFenbuView";

}

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

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

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

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

@foreach (Test13.Models.TestDataDB item in Model)

{

@item.Uid@item.Uname@item.Upwd@item.Udata

@Html.ActionLink("编辑", "Edit", new { id=item.ID }) |

@Html.ActionLink("查看详细", "Details", new { id=item.ID }) |

@Html.ActionLink("删除", "Delete", new { id=item.ID })

}

3、控制器获取数据代码private readonly int pageSize =1;

public ActionResult AjaxFenYe()

{

ViewBag.PageSize = pageSize;

ViewBag.TotalCount = db.TestDataDBS.Count();

return View();

}

public ActionResult AjaxPaging(int pageIndex = 1)

{

var persons = (from p in db.TestDataDBS orderby p.ID descending select p).Skip((pageIndex - 1) * pageSize).Take(pageSize);

return PartialView("AjaxFenbuView", persons.ToList());

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持PHP中文网。

更多asp.net Mvc4 使用ajax结合分页插件实现无刷新分页相关文章请关注PHP中文网！