如何防止jQuery Tabs在ASP.NET進行Postback後回到預設Tab Index

本文將介紹如何防止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>

 

image

上述作法雖簡便,但是若要跟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:因時間有點久遠,忘記這個解法當初是從哪邊找到的,在此對原作者表示歉意。

參考資料:

相關檔案下載: