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问题。该怎样解决呢？
思路非常easy，无非就是记住上次选中的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> 

$(document).ready(function ():这里是初始化页面时运行的方法，在这里读取之前保存的tab页的索引。然后让tabs显示保存的那个索引的tab；同一时候还绑定了一个tab标签的click事件。
function buttonTabHeadClick()：这个函数，就是当tab标签被选中时记录当前标签的索引，此处用后台的一个静态变量来保存的；
"<%=GetSelectedTab()%>"：完毕前台调用后台的方法。


两个button 点击1和点击2 是測试用的。假设不做不论什么处理，每当button点击时，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.    } 
效果例如以下：

即使在标签2下点击button，页面刷新完后。依旧显示标签2。
posted @ 2016-01-26 16:45  zfyouxi  阅读(289)  评论(0)  编辑  收藏  举报