概述
很多地方都存在以Tab页来呈现数据的方式，比如网易、新浪、搜狐、QQ等知名的门户网站的首页，还有大家熟知的博客园首页，都是用了tab页来显示数据。大家之所以喜欢用Tab，因为它能大大的增加显示数据的空间，能在固定的空间中显示更多的数据。分页也是为了方便数据的显示，在应用系统中必不可少。这篇文章使用Jquery在ASP.NET MVC中使用Tab页，以及在Tab页中实现异步无刷新的分页功能。估计这个大家都会用得到的。
在ASP.NET MVC中实现分页，在之前的一篇博文：ASP.NET MVC2右键菜单和简单分页中已经实现了。实现的方式很简单，在table下面加上一段<a/><a/><a/>...的html就行了。
先介绍一个Jquery插件：Tab，可以到http://jqueryui.com/download上下载。看下它自带一个例子的截图：
看下本文的成果：
效果图一
实现：
按照它的Demo，在ASP.net mvc项目中引入js和css，以及Jquery。我在ASP.net MVC的母板页中引入这些文件：
<link href="http://www.cnblogs.com/Content/base/ui.all.css" rel="stylesheet" type="text/css" />
<script src="http://www.cnblogs.com/Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="http://www.cnblogs.com/Scripts/ui.core.js" type="text/javascript"></script>
<script src="http://www.cnblogs.com/Scripts/ui.tabs.js" type="text/javascript"></script>
引入之后，参考它的Demo在MVC项目中View中使用Tab。 可以看到比tab自带的demo多来了一个getContentTab函数。他有两个参数，用于表示你要显示
哪个tab页的第几页数据。这里默认加载的时候，显示tabs-Shoes的第一页数据。
<script type="text/javascript">
$(document).ready(function () {
$("#tabs").tabs();
getContentTab(''Shoes'', 1);
});
</script>
<div id="tabs">
<ul>
<li><a href="#tabs-Shoes" onclick="getContentTab(''Shoes'',1);">Shoes</a></li>
<li><a href="#tabs-Electronics" onclick="getContentTab(''Electronics'',1);">Electronics</a></li>
<li><a href="#tabs-Food" onclick="getContentTab(''Food'',1);">Food</a></li>
</ul>
<div id="tabs-Shoes">
</div>
<div id="tabs-Electronics">
</div>
<div id="tabs-Food">
</div>
</div>
当然在定义View之前要先写好控制器的代码，很简单，基本上没有代码：
public ActionResult ViewCategory()
{
return View();
}
好了，下面开始我们重要的几步。显示table以及实现table的分页。这个demo的tab定义了三个tab页，每一页的table结构是一样的，所以我定义一个用户控件来实现table和分页。代码如下：
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<MvcAjaxPaging.Models.ProductViewModel>" %>
<%@ Import Namespace="MvcAjaxPaging.HtmlHelpers"%>
<table class="grid">
<thead>
<tr>
<th>Product name</th>
<th>Category</th>
</tr>
</thead>
<tbody>
<% foreach (var product i
|
