程序员人生 网站导航

JavaScript提高：005：ASP.NET使用easyUI TABS标签显示问题

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

$(document).ready(function ():这里是初始化页面时执行的方法，在这里读取之前保存的tab页的索引，然后让tabs显示保存的那个索引的tab；同时还绑定了一个tab标签的click事件；
 function buttonTabHeadClick()：这个函数，就是当tab标签被选中时记录当前标签的索引，此处用后台的一个静态变量来保存的；
 "<%=GetSelectedTab()%>"：完成前台调用后台的方法。
 两个按钮 点击1和点击2 是测试用的，如果不做任何处理，每当按钮点击时，tabs总会显示第一个了。
 
 后台代码：
 

  1. 01.public partial class _Default : System.Web.UI.Page    
  2. 02.   {    
  3. 03.       protected static string SelectTabTitle = "0";    
  4. 04.    
  5. 05.    
  6. 06.       protected void Page_Load(object sender, EventArgs e)    
  7. 07.       {    
  8. 08.           if (!IsPostBack)    
  9. 09.           {    
  10. 10.    
  11. 11.    
  12. 12.           }    
  13. 13.    
  14. 14.    
  15. 15.           switch (Request["OperateType"])    
  16. 16.           {    
  17. 17.               case "TabTitle":    
  18. 18.                   SetSelectedTab();    
  19. 19.                   break;    
  20. 20.    
  21. 21.    
  22. 22.               default:    
  23. 23.    
  24. 24.    
  25. 25.                   break;    
  26. 26.           }    
  27. 27.       }    
  28. 28.       /// <summary>     
  29. 29.       /// 保存选中的tab     
  30. 30.       /// </summary>     
  31. 31.       private void SetSelectedTab()    
  32. 32.       {    
  33. 33.           SelectTabTitle = Request["SelectTabTitle"];    
  34. 34.       }    
  35. 35.       /// <summary>     
  36. 36.       /// 获取选中的tab     
  37. 37.       /// </summary>     
  38. 38.       /// <returns></returns>     
  39. 39.       protected string GetSelectedTab()    
  40. 40.       {    
  41. 41.           return SelectTabTitle;    
  42. 42.       }    
  43. 43.    
  44. 44.    
  45. 45.       protected void Tab1_Button_Click(object sender, EventArgs e)    
  46. 46.       {    
  47. 47.    
  48. 48.    
  49. 49.       }    
  50. 50.    
  51. 51.    
  52. 52.       protected void Tab2_Button_Click(object sender, EventArgs e)    
  53. 53.       {    
  54. 54.    
  55. 55.    
  56. 56.       }    
  57. 57.   }   

 即使在标签2下点击按钮，页面刷新完后，依然显示标签2。
本文来自CSDN程序员人生

------分隔线----------------------------

上一篇 网页table表格边框做成一个像素

下一篇 php基础篇-二维数组排序 array_multisort

------分隔线----------------------------

最新技术推荐

1深入浅出Fetch API 带你入解应用场景及适用问题 2网页禁止复制内容的方法 3JavaScript提高：005：ASP.NET使用easyUI TABS标签显示问题 4js如何立即退出函数 5javascript事件：获取事件对象getEvent函数 6Firefox下frameset取不到值的解决方法 7JavaScript数组实例：点击逐条读取文字