龙空技术网

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

爱音乐的程序员小新人 29

前言:

此时咱们对“easyuiajax返回失败”大概比较关切,看官们都需要知道一些“easyuiajax返回失败”的相关资讯。那么小编也在网络上收集了一些关于“easyuiajax返回失败””的相关知识,希望大家能喜欢,你们快快来了解一下吧!

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

大家都知道,asp.net页面的控件,当控件的事件不是使用 "return js函数();"时,或者控件注册的是后台的事件,那么整个页面会重新加载的。此时这个easy ui实现的tabs标签,总是回到了第一个tab页。虽然可以借助ajax和jQuery的方法,来实现前后台交互

($.ajax方式前后台交互:

$.post方式前后台交互:)。

可以把后台的数据转换为json字符串形式,传递给前台,前台经过拆分还原出内容,赋值给对应的控件。这也不失为一种方式。

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

针对这个tabs问题,该如何解决呢?

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

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

1、记录选中的tab;

2、读取指定的tab;

3、显示指定的tab。

直接看所有的代码:

前台代码如下:

[html] view plaincopyprint? 01.<html xmlns=";> 02.<head runat="server"> 03. <title></title> 04. <link href="Scripts/EasyUI/themes/icon.css" rel="stylesheet" type="text/css" /> 05. <link href="Scripts/EasyUI/themes/default/easyui.css" rel="stylesheet" type="text/css" /> 06. <script src="Scripts/EasyUI/jquery-1.8.0.min.js" type="text/javascript"></script> 07. <script src="Scripts/EasyUI/jquery.easyui.min.js" type="text/javascript"></script> 08. <script src="Scripts/EasyUI/easyui-lang-zh_CN.js" type="text/javascript"></script> 09. <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()%>":完成前台调用后台的方法。 两个按钮 点击1和点击2 是测试用的,如果不做任何处理,每当按钮点击时,tabs总会显示第一个了。 后台代码:

01.public 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. /// <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下点击按钮,页面刷新完后,依然显示标签2。

标签: #easyuiajax返回失败 #jsajax无法访问后台 #net弹出js提示 #jqueryeasyui问题