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

　　前面使用easy ui来实现了一个tabs标签，不过在ASP.NET中使用时发现了一个问题。

　　大家都知道，asp.net页面的控件，当控件的事件不是使用 "return js函数();"时，或者控件注册的是后台的事件，那么整个页面会重新加载的。此时这个easy ui实现的tabs标签，总是回到了第一个tab页。虽然可以借助ajax和jQuery的方法，来实现前后台交互可以把后台的数据转换为json字符串形式，传递给前台，前台经过拆分还原出内容，赋值给对应的控件。这也不失为一种方式。

　　不过，javascript毕竟只是一个辅助的语言，在ASP.NET中如果把所有的前后台交互都用js这种方式实现，那是不可能的，那就成了舍本逐末，毕竟是用ASP.NET的事件机制，还是很方便的。

　　针对这个tabs问题，该如何解决呢？

　　思路很简单，无非就是记住上次选中的tab页，然后当专科页面刷新时读取出上次的tab，在初始化页面的时候，强制显示指定的tab页。

　　这里有几个步骤比较重要：

　　1、记录选中的tab；

　　2、读取指定的tab；

　　3、显示指定的tab。

　　直接看所有的代码：

　　前台代码如下：

　　[html] view plaincopyprint? 01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12. 13.

14.

15.

16. 17. 18. 21. 22.

19. 20.

23.

24.

25. 26. 27. 30. 31.

28. 29.

32.

33.

34.35. 36. 37. 38. 88.

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

　　01lic partial class _Default : System.Web.UI.Page 02. { 03. protected static string SelectTabTitle="0"; 04. 05. 06. protected void Page_Load(object sender, EventArgs e) 07. { 08. if (!IsPostBack) 09. { 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. ///

29. /// 保存选中的tab 30. ///31. private void SetSelectedTab() 32. { 33. SelectTabTitle=Request["SelectTabTitle"]; 34. } 35. ///36. /// 获取选中的tab 37. ///38. /// 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下点击按钮，页面刷新完后，依然显示标签2。