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

古城微笑少年丶 2022-09-03 11:15 239阅读 0赞

本文为在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中文网！

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 jq分页不刷新页面_jQuery+Ajax实现无刷新分页

相关 java分页代码无刷新_ajax实现的无刷新分页代码实例

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

相关使用pagination分页插件实现Ajax动态分页

相关 Ajax实现无刷新分页效果

相关 tp5+ajax+jq实现无刷新分页

相关 ASP.NET MVC 4使用PagedList.Mvc分页

相关 jsp分页：使用Ajax+servlet+json实现分页

相关 ajax实现分页

相关在Thinkphp中使用AJAX实现无刷新分页