JavaScript提高：005：ASP.NET使用easyUI TABS標籤顯示問題

JavaScript提高：005：ASP.NET使用easyUI TABS標籤顯示問題
前面使用easy ui來實現了一個tabs標籤（http://blog.csdn.net/yysyangyangyangshan/article/details/38307477），不過在ASP.NET中使用時發現了一個問題。
大家都知道，asp.net頁面的控制項，當控制項的事件不是使用 "return js函數();"時，或者控制項註冊的是背景事件，那麼整個頁面會重新載入的。此時這個easy ui實現的tabs標籤，總是回到了第一個tab頁。雖然可以藉助ajax和jQuery的方法，來實現前後台互動
（$.ajax方式前後台互動：http://blog.csdn.net/yysyangyangyangshan/article/details/22438077
$.post方式前後台互動:http://blog.csdn.net/yysyangyangyangshan/article/details/22755007）。
可以把背景資料轉換為json字串形式，傳遞給前台，前台經過拆分還原出內容，賦值給對應的控制項。這也不失為一種方式。
不過，javascript畢竟只是一個輔助的語言，在ASP.NET中如果把所有的前後台互動都用js這種方式實現，那是不可能的，那就成了捨本逐末，畢竟是用ASP.NET的事件機制，還是很方便的。
針對這個tabs問題，該如何解決呢？
思路很簡單，無非就是記住上次選中的tab頁，然後當頁面重新整理時讀取出上次的tab，在初始化頁面的時候，強制顯示指定的tab頁。
這裡有幾個步驟比較重要：
1、記錄選中的tab；
2、讀取指定的tab；
3、顯示指定的tab。


關於用到的easyui的js以及樣式檔案，前文已經說過了（http://blog.csdn.net/yysyangyangyangshan/article/details/38306591）。


直接看所有的代碼：
前台代碼如下：

                <script src="Scripts/EasyUI/jquery-1.8.0.min.js" type="text/javascript"></script>    <script src="Scripts/EasyUI/jquery.easyui.min.js" type="text/javascript"></script>    <script src="Scripts/EasyUI/easyui-lang-zh_CN.js" type="text/javascript"></script>    <script src="Scripts/Common.js" type="text/javascript"></script>    <script src="Scripts/Ajax.js" type="text/javascript"></script> <script type="text/javascript">     $('#tabTop').tabs({         width: $("#tabTop").parent().width(),         height: "auto",         onSelect: function (title) {             //這是預設的選中事件，但是當執行了pageload這個也會執行         }     });     //初始化—始終顯示後台儲存的標籤     $(document).ready(function () {         var tabTitle = parseInt("<%=GetSelectedTab()%>");         if (tabTitle != null && tabTitle >=0) {             $("#tabTop").tabs("select", tabTitle);         }         $('#tabTop').bind('click', function () {             buttonTabHeadClick();         });     });     //標籤頁點擊事件     function buttonTabHeadClick() {         var title = parseInt($('.tabs-selected').index());         var oldTitle =parseInt("<%=GetSelectedTab()%>");         if ( oldTitle>=0 && title == oldTitle) {             return false;         }         var selectObj = new Object();         selectObj.SelectTabTitle = title;         selectObj.OperateType = "TabTitle";         var htmlObjects = $.ajax({             type: "POST",             data: selectObj,             async: true,             success: function (result) {             },             error: function (result) {             }         });         return false;     }  </script>

$(document).ready(function ():這裡是初始化頁面時執行的方法，在這裡讀取之前儲存的tab頁的索引，然後讓tabs顯示儲存的那個索引的tab；同時還綁定了一個tab標籤的click事件；
function buttonTabHeadClick()：這個函數，就是當tab標籤被選中時記錄當前標籤的索引，此處用背景一個靜態變數來儲存的；
"<%=GetSelectedTab()%>"：完成前台調用背景方法。
兩個按鈕 點擊1和點擊2 是測試用的，如果不做任何處理，每當按鈕點擊時，tabs總會顯示第一個了。

後台代碼：

 public partial class _Default : System.Web.UI.Page    {        protected static string SelectTabTitle = "0";        protected void Page_Load(object sender, EventArgs e)        {            if (!IsPostBack)            {            }            switch (Request["OperateType"])            {                case "TabTitle":                    SetSelectedTab();                    break;                default:                    break;            }        }        ///         /// 儲存選中的tab        ///         private void SetSelectedTab()        {            SelectTabTitle = Request["SelectTabTitle"];        }        ///         /// 擷取選中的tab        ///         ///         protected string GetSelectedTab()        {            return SelectTabTitle;        }        protected void Tab1_Button_Click(object sender, EventArgs e)        {        }        protected void Tab2_Button_Click(object sender, EventArgs e)        {        }    }

效果如下：
下載：http://download.csdn.net/detail/yysyangyangyangshan/7758201