本文利用ajax在mvc4中实现了无刷新的无页面演示，并进行录制。

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

注意：kkpager插件用于特定的分页导航和样式。

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

script src=' http : ~/Content/kk pager . js '/script table id=' result ' class=' post block '/table nav id=' kk pager ' class=' post block paging '/nav script type=' text/JavaScript ' $(function(){ GetArticlesData(1)；});函数getParameter(name) { var reg=新RegExp('(^|)'名称'=([^]*)(|$)')；var r=window . location . search . substr(1)。match(reg)；if (r！=null)返回unescape(r[2])；返回null}函数GetArticlesData(page index){ var AJaxUrl='/TestDataDB/AJaxpage？pageIndex=' pageIndexvar ajaxType=' postvar ajaxDataType=' textvar sucFun=函数(数据，状态){ if(数据==null状态！='success') {alert('未能获取数据！');返回false} else { $('#result ')。html(数据)；//定义分页样式var total count=par sent(' @ viewpag . total count ')；var page size=Parseint(' @ viewpag。page size’)；var page no=GetParameter(' pno ')；//该参数随插件提供。如果设置不当，当前页码将始终显示在第一页上。页码){页码=1；} var TotalPages=TotalCount % PageSize==0？total count/page size :(parseInt(total count/page size)1)；kk pager . GeneraL page html({ pno : page no，total: totalPages，totalRecords: totalCount，mode: 'click '，click : function(n){ this . selectpage(n)；//插件自己的方法，手动调用某个页码search page(n)；返回false} });} };//ajax参数设置varoption={url:ajaxorl，type3360ajaxtype，datatype3360ajaxtype，cache:failure。//将其设置为false不会从浏览器缓存中加载请求的信息。Async: true，//(默认为： true)，所有请求都是异步请求。若要发送同步请求，请将此选项设置为false。同步请求将锁定浏览器，用户的其他操作必须等待请求完成后才能执行。Timeout: 3600。//设置请求超时(毫秒)。此设置覆盖全局设置。error: function () { }，success: sucFun，before send : function(){ } }；$.ajax(选项)；返回false} //ajax翻页功能search page(n){ getarticlesdata(n)；} /script 2，部分视图代码

@模型IEnumerableTest13 .模型Title=' AjaxFenbuView} tr th @Html .显示名称(型号=型号.uid)/th @ Html .显示名称(型号=型号.uname)/th @ Html .显示名称(型号=型号.upwd)/th @ Html .显示名称(型号=型号.udata)/th/th/tr @ foreach(Test13 .模型中的测试数据库项目)。ActionLink('编辑，'编辑，新{ id=item .ID }) | @Html .ActionLink('查看详细、"详细信息",新的{ id=item .ID }) | @Html .ActionLink('删除、"删除",新{ id=item .ID }) /td /tr}3、控制器获取数据代码

private readonly int page SiZe=1；公共行动结果Ajaxfenye(){ viewpag .页面大小=页面大小；视图包TotalCount=db .TestDataDBS。count()；返回视图();}公共行动结果AJaxpage(int page index=1){ var persons=(来自中的p .测试数据数据库订购方标识降序选择p ).跳过((页面索引- 1) *页面大小)。take(PageSize)；返回PartialView('AjaxFenbuView '，persons .ToList())；} 最后上个效果图：

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