本文將介紹如何防止jQuery Tabs在ASP.NET進行Postback後回到預設Tab Index。
jQuery UI提供了簡便的方式製作頁籤（Tabs）效果，只需引用jQuery、jQuery UI函式庫及Tabs的CSS再加上短短的一行JavaScript程式碼即可完成高互動性及美觀的Tab。
- 使用jQuery UI Tab需引用下列函式庫及CSS：
1: <link href="JS/jquery-ui.css" rel="stylesheet" type="text/css" />
2: <script src="JS/jquery.min.js" type="text/javascript"></script>
3: <script src="JS/jquery-ui.min.js" type="text/javascript"></script>
- 下列程式碼用來建置用來建置如下圖的Tabs畫面，其中包含三個頁籤，分別為Tab1、Tab2及Tab3：
1: <div id="tabs">
2: <ul>
3: <li><a href="#Tab1"><span>Tab1</span></a></li>
4: <li><a href="#Tab2"><span>Tab2</span></a></li>
5: <li><a href="#Tab3"><span>Tab3</span></a></li>
6: </ul>
7: <div id="Tab1">
8: This is Tabl1.
9: </div>
10: <div id="Tab2">
11: This is Tabl2.
12: </div>
13: <div id="Tab3">
14: This is Tabl3.
15: </div>
16: </div>
-
最後只需撰寫下列JavaScript即可做出Tabs效果：
1: <script type="text/javascript">
2: $(document).ready(function () {
3: $("#tabs").tabs();
4: });
5: </script>
上述作法雖簡便，但是若要跟ASP.NET整合立刻就會遇到因為PostBack機制導致使用者所選擇的Tab，在Postback之後被復原成預設的第0個Tab，無法停留在使用者最後操作的Tab上，原因出在jQuery為Client端Script，使用者在Postback前選擇哪個Tab，ASP.NET並不知道。
為此可以利用ASP.NET的伺服器控制項（Hidden Field）搭配Tabs的select事件，利用ASP.NET會自動維護伺服器控制項狀態之特性來，來將使用者所選取的Tab Index暫存在Hidden Field，完整程式碼如下：
1: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TabDemo.aspx.cs" Inherits="jQueryLab.TabDemo" %>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3: <html xmlns="http://www.w3.org/1999/xhtml">
4: <head runat="server">
5: <title></title>
6: <link href="JS/jquery-ui.css" rel="stylesheet" type="text/css" />
7: <script src="JS/jquery.min.js" type="text/javascript"></script>
8: <script src="JS/jquery-ui.min.js" type="text/javascript"></script>
9: <script type="text/javascript">
10: $(document).ready(function () {
11: var tabIndex = $("#<%= hidCurrentTab.ClientID %>").val();
12: $("#tabs").tabs({ select: function (event, ui) {
13: $("#<%= hidCurrentTab.ClientID %>").val(ui.index);
14: }
15: , selected: tabIndex
16: });
17: });
18: </script>
19: </head>
20: <body>
21: <form id="form1" runat="server">
22: <asp:HiddenField ID="hidCurrentTab" runat="server" />
23: <div>
24: <div id="tabs">
25: <ul>
26: <li><a href="#Tab1"><span>Tab1</span></a></li>
27: <li><a href="#Tab2"><span>Tab2</span></a></li>
28: <li><a href="#Tab3"><span>Tab3</span></a></li>
29: </ul>
30: <div id="Tab1">
31: This is Tabl1.
32: </div>
33: <div id="Tab2">
34: This is Tabl2.
35: <asp:Button ID="Button1" runat="server" Text="Tab2 Button" />
36: </div>
37: <div id="Tab3">
38: This is Tabl3.
39: <asp:Button ID="Button2" runat="server" Text="Tab3 Button" />
40: </div>
41: </div>
42: </div>
43: </form>
44: </body>
45: </html>
若使用者在Tab2中按了Button1，則會觸發Tabs的select事件（第12、13列程式碼）將所選取的tab index存放於hidCurrentTab，接著進行Postback動作，瀏覽器再接收到IIS所回傳HTML，便利用第11列的程式碼來取得儲存在hidCurrentTab這個Hiddent Field中的tabIndex，並在第15列進行重設，就可以保持Postback前使用者所選取的Tab而不會被初始化為第0個Tab。
PS:因時間有點久遠，忘記這個解法當初是從哪邊找到的，在此對原作者表示歉意。
參考資料：
相關檔案下載：
