.net MVC4 ajax分页技术实现

实现思路:利用MVC的PartialView实现局部内容异步加载。

实现过程 :

1,我的主列表页命名为List,访问URL为:/Test/List,control代码如下:

public ActionResult List()

{

PagingSetting ps = GetPagingSeting();

ListPage<SYS_USER> list = new UserBLL().GetList(new Dictionary<string, object>(), ps);

ViewBag.Data = list;

if (Request.IsAjaxRequest())

{

return PartialView("_UserList");

}

else

{

return View();

}

}

简要说明:当前请求为异步请求时直接调用PartialView,否则转向List主视图。List的主视图代码如下:

@{

ViewBag.Title = "List";

}

<link href="~/Contents/css/pager/pager-bar.css" rel="stylesheet" />

<script src="~/Scripts/jquery-1.8.3.min.js"></script>

<script src="~/Scripts/paginator.js"></script>

<div id="UserList">

@Html.Partial("_UserList")

</div>

<div id="PageBar"></div>

简要说明:主视图中引用了我的局部视图_UserList,而我的分页代码放在了局部视图中,局部视图代码如下:

2,我的局部视图名为:_UserList.cshtml  局部视图主要实现需异步调取的内容,代码如下:

@{

HH.Model.ListPage<HH.Model.SYS_USER> model = ViewBag.Data as HH.Model.ListPage<HH.Model.SYS_USER>;

List<HH.Model.SYS_USER> list = model.ListData as List<HH.Model.SYS_USER>;

}

@{foreach (var item in list)

{

<h4>@item.USER_NAME</h4>

}

}

<script type="text/javascript">

$(function () {

$("#PageBar").Paginator({

currentPage:@(model.CurrentPage),

totalPages:@(model.TotalPages),

pagesCount: 10,

onPageClicked: function (page) {

$.post("/Test/List/?rand="+Math.random(),{page:page},function(data){

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

});

}

});

});

</script>

简要说明:我的局部视图,使用一段js调取分页的相关信息,每一次异步请求该局部视图,我都将该段js返回主视图中。这样做的主要目的是把处理分页的主要业务逻辑与主视图分开,作为一个单独模块处理,相对解耦。

3,最终列表界面如下:

总结说明:点击分页按钮时,发起一次异步请求,异步请求直接调用局部视图,返回MVCHtmlString到主视图中,完成分页过程。相关JS和CSS代码已上传至下载频道。

时间: 2024-10-13 22:23:19

.net MVC4 ajax分页技术实现的相关文章

无刷新分页技术,Ajax+smarty

这里运用Smarty模板,更简单 本文主要的技术:AJAX,PHP,Smarty,另外自己封装了一个很简单的类 类: (function(){    function $(id) {        return document.getElementById(id);    }    $.init=function() {        try{return new XMLHttpRequest();}catch(e){};        try{return new ActiveXObject

MVC4 5分页控件,支持Ajax AjaxOption支持

MVC4 5分页控件,支持Ajax AjaxOption支持 /// <summary> /// MVC4 5分页控件,支持Ajax AjaxOption支持 beta 1.0 /// 用法 /// @Ajax.Pages /// @Html.Pages /// </summary> public static class PagesExtension { public static MvcHtmlString Pages(this HtmlHelper htmlHelper, i

分享一套MVC4+EF5+EasyUI技术实现通用权限管理系统

课程讲师:闲筝 课程分类:.NET框架 适合人群:高级 课时数量:150课时 更新程度:完毕 服务类型:B类(VIP服务类课程) 用到技术:MVC.EF.T4.Log4net.EasyUI.rdlc.spring.net等 涉及项目:通用权限管理系统.十二生肖案例.EasyUI150项示例 课程咨询QQ:2050339477 链接:http://ibeifeng.taobao.com/index.htm?spm=2013.1.w5002-9616636101.2.aNEcLW 项目背景: 自从微

基于MVC4+EF5+EasyUI技术实现通用权限管理系统(EpPlus、HignCharts、Reportviewer报表)视频教程

基于MVC4+EF5+EasyUI技术实现通用权限管理系统(EpPlus.HignCharts.Reportviewer报表)视频教程 联系QQ:1026270010 1.项目研发环境 项目源代码会提供以MVC4+EF5和MVC5+EF6为基准的两套版本,数据库会提供以Sqlserver2005为基准的数据库脚本,以下环境都适用于项目. 开发工具:VS2012,VS2013; 数据库工具:SqlServer2005,2008,2012,2014    其他工具:Easyui,Jquery,EpP

ThinkPHP AJAX分页及JS缓存的应用

//AJAX分页详见兄弟连PHP项目视频教程22讲35分钟左右 主要实现是需要将分页中的每个链接都改为AJAX请求 //前端缓存技术:基于javascript传输的数据,只要浏览器没关,都保存在内存中 //实现方法:创建一个数组,将需要缓存的数据保存在数组中,需要使用时调用即可:参加兄弟连PHP项目视频22第45分钟左右 var cache=new Array(); //创建一个用于缓存的数组 function setpage(index,data) { if (!cache[index]) {

【TP3.2】TP3.2下实现ajax分页(原创+亲测可用)

一,写在最开始:ajax分页的原理,是利用了js的ajax执行请求,获取分页list和分页page [代码块],去替换页面显示数据的[代码块] 技术:js的ajax + TP3.2的fetch("Index/data")技术,仅此而已. 1.在Library\Think\ 目录下直接加入以下代码:Ajaxpage.class.php <?php /** * ajax分页类,有namespace,使用方法: * 控制器直接$ajaxpage = new \Think\Ajaxpag

jsp的分页技术

在jsp开发中,很多时候要用到分页技术,另外纯粹的分页实现就占了很多篇幅,所以使用javabean就十分有必要. 此文章依据实际代码,想大家展示jsp中利用javabean实现分页 目录结构如下: javabean的代码如下: package lytjb; import java.sql.ResultSet; import javax.servlet.http.HttpServletRequest; public class fenye { ResultSet CountTopicrs = nu

基于jquery的ajax分页插件(demo+源码)

前几天打开自己的博客园主页,无意间发现自己的园龄竟然有4年之久了.可是看自己的博客列表却是空空如也,其实之前也有写过,但是一直没发布(然而好像并没有什么卵用).刚开始学习编程时就接触到博客园,且在博客园学习了很多的知识,看过很多人的分享.说来也惭愧,自己没能为园友们分享自己的所学所得(毕竟水平比较差). 过去的一年也是辗转了几个城市换了几份工作(注定本命年不太平?).八月份来到现在所在的公司(OTA行业),公司是做互联网的,所以可能大家的前端都屌屌的?之前一直从事.NET开发(现在在这边也是),

浅谈Java分页技术

话不多言.我们要实现java分页技术,我们首先就需要定义四个变量,他们是: int  pageSize;//每页显示多少条记录 int pageNow;//希望现实第几页 int pageCount;//一共有多少页 int rowCount;//一共有多少条记录 说明: 1.pageSize是指定的 2.pageNow是用户选择的 3.rowCount是从表中查询得到的 4.pageCount是计算得到的,该计算为: if(rowCount%pageSize==0) { pageCount=r