前面使用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。
直接看所有的代码:
前台代码如下:

[html] view plaincopyprint? 01. xmlns="http://www.w3.org/1999/xhtml"> 02. runat="server"> 03. 04. href="Scripts/EasyUI/themes/icon.css" rel="stylesheet" type="text/css" /> 05. href="Scripts/EasyUI/themes/default/easyui.css" rel="stylesheet" type="text/css" /> 06. 07. 08. 09. 10. 11. 12. 13. id="form1" runat="server" > 14.

id="tabTop"> 15.

runat="server"> 16. 17. 18. 19. ID="btn1" runat="server" Text="点击1" OnClick="Tab1_Button_Click"/> 20. 21. 22. 23.

24.

runat="server"> 25. 26. 27. 28. ID="btn2" runat="server" Text="点击2" OnClick="Tab2_Button_Click"/> 29. 30. 31. 32.

33.

34. 35. 36. 37. 38. 88.

$(document).ready(function ():这里是初始化页面时执行的方法,在这里读取之前保存的tab页的索引,然后让tabs显示保存的那个索引的tab;同时还绑定了一个tab标签的click事件; function buttonTabHeadClick():这个函数,就是当tab标签被选中时记录当前标签的索引,此处用后台的一个静态变量来保存的; "":完成前台调用后台的方法。 两个按钮 点击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. /// 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。

a标签的onclick事件_JavaScript提高:ASP.NET使用easyUI TABS标签显示问题相关推荐

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

    前面使用easy ui来实现了一个tabs标签(http://blog.csdn.net/yysyangyangyangshan/article/details/38307477),只是在ASP.NE ...

  2. a标签里面设置onclick_详解a标签添加onclick事件的几种方式

    我们常用的在a标签中有点击事件: 1. a href="javascript:js_method();" rel="external nofollow" 这种方 ...

  3. a标签中onclick事件的用法

    有时候我们使用a标签,不希望用到a标签的href去发送请求,因为可能需要再请求前做一些其他的js操作,所以希望通过onclick事件触发请求, 我们知道链接的 onclick 事件被先执行,其次是 h ...

  4. a标签在onclick事件中跳转,多打开一个空白页问题,href属性与onclick事件

    用a标签做页面跳转,因为需要在js中做参数处理,所以跳转放在了onclick事件中: <a href="javascript:void(0)" target="_b ...

  5. a标签添加onclick事件的几种方式

    我们常用的在a标签中有点击事件: 1. a href="javascript:js_method();" 这种方法在传递this等参数的时候很容易出问题,而且javascript: ...

  6. js中动态给img标签添加onclick事件

    //pageCode代表jsp界面中table的idvar oTBODY = document.getElementsByName(pageCode)[i].tBodies.item(0);//获取i ...

  7. 给超链接(a标签)加onclick事件

    <a onclick="alert('1')">超链接1</a><br> <a href="#" onclick=&q ...

  8. html input onclick,对部分input标签添加onclick事件

    a b c d var list=document.getElementsByTagName("input"); for(var i=0;i { list[i].οnclick=f ...

  9. js基础总结——js 获取元素节点、js 绑定onclick事件、js 获取属性 修改属性值、js 获取子元素、js 改变css样式

    参考书籍:<JavaScript DOM编程艺术 第2版> 本博客代码的测试页面是:https://www.layui.com/ js dom操作 js 获取元素节点 一份document ...

最新文章

  1. 基于Redis实现一个分布式锁
  2. c# 获取所有的进程的cpu使用率_Linux CPU使用率很高,但为啥却找不到高CPU的进程
  3. jmeter(十八)关联之XPath Extractor
  4. 开发转运维有什么好点的理由_企业微信SCRM哪家好点?
  5. 查看go 安装了哪些包_如何灵活地进行 Go 版本管理
  6. 安装Discuz!论坛
  7. mybatis plus使用雪花算法_MyBatis-Plus进阶
  8. 不确定规划及应用代码_性能测试划分之应用领域
  9. ikbc机械键盘打字出现重复_超小无线机械键盘,绝佳移动打字体验
  10. 怎样找到一份深度学习的工作(附学习材料,资源与建议)
  11. android7.1.2 xposed,安卓7.1 xposed框架
  12. “马赛克”真能去除了?老司机狂喜!这一神器一键去除!
  13. 蓝鲸智云平台部署[6.0.5]
  14. tomcat安装不上
  15. 网吧模式一台服务器拖显示器,摆500台机器太傻 网咖显示器如何配置?
  16. AD20 输出制板文件小记
  17. 134_人人后台管理系统-立即执行定时任务失败(坑)
  18. CNN-台大李宏毅学习笔记
  19. 每个程序员必须掌握的常用英语词汇(建议收藏)
  20. STM32驱动OV7725摄像头颜色识别

热门文章

  1. Axure高保真移动端电商app通用模板、axure高保真移动端教育app通用模板、旅游app通用模板、电商app、教育app、旅游app 、直播、在线教育、旅游、Axure原型、rp原型
  2. 软件工程学习进度第五周暨暑期学习进度之第五周汇总
  3. 你可能还不知道的关于JavaScript类型的细节?
  4. 图像中的一条直线在旋转缩放过程中会有分段现象,或产生分段节点
  5. 在vue项目中同时使用element-ui和mint-ui,的时候,.babelrc配置文件怎么写
  6. T-SQL: Batches
  7. “云时代架构”经典文章阅读感想八
  8. react-native 框架升级 安卓第三方插件报错 Android resource linking failed
  9. 机器学习 - 支持向量机
  10. Java判断Class变量是什么类型