.net mvc jQuery ui tabs 实现简单页面切换功能

1.建立两个页面Tab1.aspx 和 Tab2.aspx,这两个页面将在tabs中显示.

后台DefaultController.cs代码：

 public class DefaultController : Controller
{
      //get Index
       public ActionResult Index()
       {
            return View();
        }
       //get Tab1
        public ActionResult Tab1()
        {
            return View();
        }
       //get Tab2
        public ActionResult Tab2()
        {
            return View();
        } 
}
    

2.修改默认路由.设置Index.aspx为默认页

 public static void RegisterRoutes(RouteCollection routes)
{
    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
    routes.MapRoute(
    "Default", // 路由名称
    "{controller}/{action}/{id}", // 带有参数的 URL
    new { controller = "Default", action = "Index", id = UrlParameter.Optional } // 参数默认值
      );
 }

 

3.建立一个承载tabs的页面Index.aspx, 这样就可以在该页面上进行页面切换的实现.对所用到的js和css进行引用.

<link  href ="Content/jquery-ui-1.8.23.custom.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>

在 Index.aspx 添加以下代码.

<div id="tabs">
<ul>
<li><%=Html.ActionLink("Tab1", "Tab1", "Default")%></li>
<li><%=Html.ActionLink("Tab2", "Tab2", "Default")%></li>
</ul>
</div>

显示效果如下:

用jQuery ui tabs 产生选项卡效果.在Index.aspx中加入以下代码：

<script type="text/javascript">
    $(function () {
        $('#tabs').tabs(); 
    });
</script>

显示效果：

4.jQuery ui tabs 的一些简单用法:

//把当前tab选项卡里的页面换成Tab2
function changeTab2() {
     //get the selected tab's index
     var selected = $('#tabs').tabs('option', 'selected');
     //change the  selected tab's url
     $('#tabs').tabs('url', selected, '/Default/Tab2');
     //reload the selected tab
     $('#tabs').tabs('load', selected);
};

//在tabs中添加新的选项卡
$('#tabs').tabs('add', '/Default/Tab1', 'Tab1');

5.这里有更详细的介绍 http://msdn.microsoft.com/en-us/magazine/ff679948.aspx