多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

國內最全IT社區平臺 聯系我們 | 收藏本站
阿里云優惠2
您當前位置：首頁 > 互聯網 > JavaScript提高：005：ASP.NET使用easyUI TABS標簽顯示問題

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

來源：程序員人生   發布時間：2014-09-17 02:06:50 閱讀次數：2530次
前面使用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）。


直接看所有的代碼：
前臺代碼如下：
[html] view plaincopyprint?
  1. <html xmlns="http://www.w3.org/1999/xhtml"> 
  2. <head runat="server"> 
  3.     <title></title> 
  4.     <link href="Scripts/EasyUI/themes/icon.css" rel="stylesheet" type="text/css" /> 
  5.     <link href="Scripts/EasyUI/themes/default/easyui.css" rel="stylesheet" type="text/css" /> 
  6.     <script src="Scripts/EasyUI/jquery-1.8.0.min.js" type="text/javascript"></script> 
  7.     <script src="Scripts/EasyUI/jquery.easyui.min.js" type="text/javascript"></script> 
  8.     <script src="Scripts/EasyUI/easyui-lang-zh_CN.js" type="text/javascript"></script> 
  9.     <script src="Scripts/Common.js" type="text/javascript"></script> 
  10.     <script src="Scripts/Ajax.js" type="text/javascript"></script> 
  11. </head> 
  12. <body> 
  13. <form id="form1" runat="server" > 
  14.   <div id="tabTop"> 
  15.     <div title="標簽一" runat="server"> 
  16.       <table> 
  17.        <tr> 
  18.         <td> 
  19.          <asp:Button ID="btn1" runat="server" Text="點擊1" OnClick="Tab1_Button_Click"/> 
  20.         </td> 
  21.        </tr> 
  22.       </table> 
  23.     </div> 
  24.     <div title="標簽二" runat="server"> 
  25.       <table> 
  26.        <tr> 
  27.         <td> 
  28.          <asp:Button ID="btn2" runat="server" Text="點擊2"  OnClick="Tab2_Button_Click"/> 
  29.         </td> 
  30.        </tr> 
  31.       </table> 
  32.     </div> 
  33.   </div> 
  34.   </form> 
  35. </body> 
  36.  
  37.  
  38. <script type="text/javascript"> 
  39.  
  40.  
  41.      $('#tabTop').tabs({ 
  42.          width: $("#tabTop").parent().width(), 
  43.          height: "auto", 
  44.          onSelect: function (title) { 
  45.              //這是默認的選中事件，但是當執行了pageload這個也會執行 
  46.          } 
  47.      }); 
  48.      //初始化―始終顯示后臺保存的標簽 
  49.      $(document).ready(function () { 
  50.          var tabTitle = parseInt("<%=GetSelectedTab()%>"); 
  51.          if (tabTitle != null && tabTitle >=0) { 
  52.              $("#tabTop").tabs("select", tabTitle); 
  53.          } 
  54.  
  55.  
  56.          $('#tabTop').bind('click', function () { 
  57.              buttonTabHeadClick(); 
  58.          }); 
  59.      }); 
  60.  
  61.  
  62.      //標簽頁點擊事件 
  63.      function buttonTabHeadClick() { 
  64.  
  65.  
  66.          var title = parseInt($('.tabs-selected').index()); 
  67.          var oldTitle =parseInt("<%=GetSelectedTab()%>"); 
  68.          if ( oldTitle>=0 && title == oldTitle) { 
  69.              return false; 
  70.          } 
  71.          var selectObj = new Object(); 
  72.          selectObj.SelectTabTitle = title; 
  73.          selectObj.OperateType = "TabTitle"; 
  74.  
  75.  
  76.          var htmlObjects = $.ajax({ 
  77.              type: "POST", 
  78.              data: selectObj, 
  79.              async: true, 
  80.              success: function (result) { 
  81.              }, 
  82.              error: function (result) { 
  83.              } 
  84.          }); 
  85.          return false; 
  86.      } 
  87.   </script> 
  88. </html> 
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link href="Scripts/EasyUI/themes/icon.css" rel="stylesheet" type="text/css" /> <link href="Scripts/EasyUI/themes/default/easyui.css" rel="stylesheet" type="text/css" /> <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> </head> <body> <form id="form1" runat="server" > <div id="tabTop"> <div title="標簽一" runat="server"> <table> <tr> <td> <asp:Button ID="btn1" runat="server" Text="點擊1" OnClick="Tab1_Button_Click"/> </td> </tr> </table> </div> <div title="標簽二" runat="server"> <table> <tr> <td> <asp:Button ID="btn2" runat="server" Text="點擊2" OnClick="Tab2_Button_Click"/> </td> </tr> </table> </div> </div> </form> </body> <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> </html>

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

后臺代碼：
[csharp] view plaincopyprint?
  1. public partial class _Default : System.Web.UI.Page 
  2.    { 
  3.        protected static string SelectTabTitle = "0"; 
  4.  
  5.  
  6.        protected void Page_Load(object sender, EventArgs e) 
  7.        { 
  8.            if (!IsPostBack) 
  9.            { 
  10.  
  11.  
  12.            } 
  13.  
  14.  
  15.            switch (Request["OperateType"]) 
  16.            { 
  17.                case "TabTitle": 
  18.                    SetSelectedTab(); 
  19.                    break; 
  20.  
  21.  
  22.                default: 
  23.  
  24.  
  25.                    break; 
  26.            } 
  27.        } 
  28.        /// <summary> 
  29.        /// 保存選中的tab 
  30.        /// </summary> 
  31.        private void SetSelectedTab() 
  32.        { 
  33.            SelectTabTitle = Request["SelectTabTitle"]; 
  34.        } 
  35.        /// <summary> 
  36.        /// 獲取選中的tab 
  37.        /// </summary> 
  38.        /// <returns></returns> 
  39.        protected string GetSelectedTab() 
  40.        { 
  41.            return SelectTabTitle; 
  42.        } 
  43.  
  44.  
  45.        protected void Tab1_Button_Click(object sender, EventArgs e) 
  46.        { 
  47.  
  48.  
  49.        } 
  50.  
  51.  
  52.        protected void Tab2_Button_Click(object sender, EventArgs e) 
  53.        { 
  54.  
  55.  
  56.        } 
  57.    } 
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; } } /// <summary> /// 保存選中的tab /// </summary> private void SetSelectedTab() { SelectTabTitle = Request["SelectTabTitle"]; } /// <summary> /// 獲取選中的tab /// </summary> /// <returns></returns> protected string GetSelectedTab() { return SelectTabTitle; } protected void Tab1_Button_Click(object sender, EventArgs e) { } protected void Tab2_Button_Click(object sender, EventArgs e) { } }
效果如下：

即使在標簽2下點擊按鈕，頁面刷新完后，依然顯示標簽2。
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生
------分隔線----------------------------
分享到:
------分隔線----------------------------
為碼而活
積分：4237
15粉絲
7關注
欄目熱點
關閉
程序員人生
主站蜘蛛池模板： 日本理论在线观看被窝网 | 亚洲国产视频在线观看 | 国产精品嫩草研究院成人 | 日本护士做xxxxxhd | 久久福利资源站免费观看i 久久高清一级毛片 | 黑人巨大三根一起进hd | 国产精品亚洲综合五月天 | 福利视频100| 在线观看亚洲精品国产 | 欧美视频在线一区二区三区 | 久操欧美| 国产片在线看 | 精品国产高清毛片 | 中文字幕亚洲欧美日韩高清 | 亚洲成a人片在线观看中文动漫 | 欧美一级日韩一级亚洲一级 | 波多结衣一区二区三区 | 高清一区二区三区四区五区 | 久久天天躁狠狠躁夜夜2020一 | 欧美另类在线观看 | 秋霞午夜限制土鳖免费观看 | аⅴ成人天堂中文在线 | 日韩日韩日韩 | 欧美午夜小视频 | 九一精品 | 在线看片欧美 | 免费jizz在线播放视频 | 欧美性狂丰满性猛交 | 欧美v片 | 日本高清69| 免费麻豆国产一区二区三区四区 | 中文字幕第一页亚洲 | 国产一区免费在线观看 | 一级做a爰片久久毛片欧美 一级做a爰片久久毛片人呢 | 在线观看一级毛片免费 | 看一级毛片国产一级毛片 | 欧美一区二区在线播放 | 高清免费a级在线观看国产 高清免费国产在线观看 | 成人做爰网站 | 国产美女视频爽爽爽 | 亚洲欧洲精品成人久久曰 |