.net mvc ajax分页控件,ASP.NET MVC2.0在Tab页中实现异步无刷新分页

概述

很多地方都存在以Tab页来呈现数据的方式，比如网易、新浪、搜狐、QQ等知名的门户网站的首页，还有大家熟知的博客园首页，都是用了tab页来显示数据。大家之所以喜欢用Tab，因为它能大大的增加显示数据的空间，能在固定的空间中显示更多的数据。分页也是为了方便数据的显示，在应用系统中必不可少。这篇文章使用Jquery在ASP.NET MVC中使用Tab页，以及在Tab页中实现异步无刷新的分页功能。估计这个大家都会用得到的。

在ASP.NET MVC中实现分页，在之前的一篇博文：ASP.NET MVC2右键菜单和简单分页中已经实现了。实现的方式很简单，在table下面加上一段...的html就行了。

先介绍一个Jquery插件：Tab，可以到http://jqueryui.com/download上下载。看下它自带一个例子的截图：

效果图：

实现

按照它的Demo，在ASP.net mvc项目中引入js和css，以及Jquery。我在ASP.net MVC的母板页中引入这些文件：

引入之后，参考它的Demo在MVC项目中View中使用Tab。 可以看到比tab自带的demo多来了一个getContentTab函数。他有两个参数，用于表示你要显示

哪个tab页的第几页数据。这里默认加载的时候，显示tabs-Shoes的第一页数据。

$(document).ready(function() {

$("#tabs").tabs();

getContentTab('Shoes', 1);

});

• Shoes
• Electronics
• Food