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
xmlns="http://www.w3.org/1999/xhtml"> - <head
runat="server"> - <title></title>
- <link
href="Scripts/EasyUI/themes/icon.css"
rel="stylesheet"
type="text/css"
/> - <link
href="Scripts/EasyUI/themes/default/easyui.css"
rel="stylesheet"
type="text/css"
/> - <script
src="Scripts/EasyUI/jquery-1.8.0.min.js"
type="text/javascript"></script> - <script
src="Scripts/EasyUI/jquery.easyui.min.js"
type="text/javascript"></script> - <script
src="Scripts/EasyUI/easyui-lang-zh_CN.js"
type="text/javascript"></script> - <script
src="Scripts/Common.js"
type="text/javascript"></script> - <script
src="Scripts/Ajax.js"
type="text/javascript"></script> - </head>
- <body>
- <form
id="form1"
runat="server"
> - <div
id="tabTop"> - <div
title="标签一"
runat="server"> - <table>
- <tr>
- <td>
- <asp:Button
ID="btn1"
runat="server"
Text="点击1"
OnClick="Tab1_Button_Click"/> - </td>
- </tr>
- </table>
- </div>
- <div
title="标签二"
runat="server"> - <table>
- <tr>
- <td>
- <asp:Button
ID="btn2"
runat="server"
Text="点击2"
OnClick="Tab2_Button_Click"/> - </td>
- </tr>
- </table>
- </div>
- </div>
- </form>
- </body>
- <script
type="text/javascript"> - $('#tabTop').tabs({
- width: $("#tabTop").parent().width(),
- height: "auto",
- onSelect: function (title) {
- //这是默认的选中事件，可是当运行了pageload这个也会运行
- }
- });
- //初始化—始终显示后台保存的标签
- $(document).ready(function () {
- var tabTitle = parseInt("<%=GetSelectedTab()%>");
- if (tabTitle != null && tabTitle
>=0) { - $("#tabTop").tabs("select", tabTitle);
- }
- $('#tabTop').bind('click', function () {
- buttonTabHeadClick();
- });
- });
- //标签页点击事件
- function buttonTabHeadClick() {
- var title = parseInt($('.tabs-selected').index());
- var oldTitle =parseInt("<%=GetSelectedTab()%>");
- if ( oldTitle>=0 && title == oldTitle) {
- return false;
- }
- var selectObj =
new Object(); - selectObj.SelectTabTitle =
title; - selectObj.OperateType =
"TabTitle"; - var htmlObjects = $.ajax({
- type: "POST",
- data: selectObj,
- async: true,
- success: function (result) {
- },
- error: function (result) {
- }
- });
- return false;
- }
- </script>
- </html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Scripts/EasyUI/themes/icon.css" rel="stylesheet" type="text/css" />
<link href="Scripts/EasyUI/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<script src="Scripts/EasyUI/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="Scripts/EasyUI/jquery.easyui.min.js" type="text/javascript"></script>
<script src="Scripts/EasyUI/easyui-lang-zh_CN.js" type="text/javascript"></script>
<script src="Scripts/Common.js" type="text/javascript"></script>
<script src="Scripts/Ajax.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server" >
<div id="tabTop">
<div title="标签一" runat="server">
<table>
<tr>
<td>
<asp:Button ID="btn1" runat="server" Text="点击1" OnClick="Tab1_Button_Click"/>
</td>
</tr>
</table>
</div>
<div title="标签二" runat="server">
<table>
<tr>
<td>
<asp:Button ID="btn2" runat="server" Text="点击2" OnClick="Tab2_Button_Click"/>
</td>
</tr>
</table>
</div>
</div>
</form>
</body> <script type="text/javascript"> $('#tabTop').tabs({
width: $("#tabTop").parent().width(),
height: "auto",
onSelect: function (title) {
//这是默认的选中事件。可是当运行了pageload这个也会运行
}
});
//初始化—始终显示后台保存的标签
$(document).ready(function () {
var tabTitle = parseInt("<%=GetSelectedTab()%>");
if (tabTitle != null && tabTitle >=0) {
$("#tabTop").tabs("select", tabTitle);
} $('#tabTop').bind('click', function () {
buttonTabHeadClick();
});
}); //标签页点击事件
function buttonTabHeadClick() { var title = parseInt($('.tabs-selected').index());
var oldTitle =parseInt("<%=GetSelectedTab()%>");
if ( oldTitle>=0 && title == oldTitle) {
return false;
}
var selectObj = new Object();
selectObj.SelectTabTitle = title;
selectObj.OperateType = "TabTitle"; var htmlObjects = $.ajax({
type: "POST",
data: selectObj,
async: true,
success: function (result) {
},
error: function (result) {
}
});
return false;
}
</script>
</html>
$(document).ready(function ():这里是初始化页面时运行的方法，在这里读取之前保存的tab页的索引。然后让tabs显示保存的那个索引的tab；同一时候还绑定了一个tab标签的click事件。
function buttonTabHeadClick()：这个函数，就是当tab标签被选中时记录当前标签的索引，此处用后台的一个静态变量来保存的；
"<%=GetSelectedTab()%>"：完毕前台调用后台的方法。
两个button 点击1和点击2 是測试用的。假设不做不论什么处理，每当button点击时，tabs总会显示第一个了。
后台代码：
- public partial class _Default : System.Web.UI.Page
- {
- protected
static string SelectTabTitle =
"0"; - protected void Page_Load(object sender, EventArgs e)
- {
- if (!IsPostBack)
- {
- }
- switch (Request["OperateType"])
- {
- case
"TabTitle": - SetSelectedTab();
- break;
- default:
- break;
- }
- }
- /// <summary>
- /// 保存选中的tab
- /// </summary>
- private void SetSelectedTab()
- {
- SelectTabTitle = Request["SelectTabTitle"];
- }
- /// <summary>
- /// 获取选中的tab
- /// </summary>
- /// <returns></returns>
- protected
string GetSelectedTab() - {
- return SelectTabTitle;
- }
- protected
void Tab1_Button_Click(object sender, EventArgs e) - {
- }
- protected void Tab2_Button_Click(object sender, EventArgs e)
- {
- }
- }
public partial class _Default : System.Web.UI.Page
{
protected static string SelectTabTitle = "0"; protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{ } switch (Request["OperateType"])
{
case "TabTitle":
SetSelectedTab();
break; default: break;
}
}
/// <summary>
/// 保存选中的tab
/// </summary>
private void SetSelectedTab()
{
SelectTabTitle = Request["SelectTabTitle"];
}
/// <summary>
/// 获取选中的tab
/// </summary>
/// <returns></returns>
protected string GetSelectedTab()
{
return SelectTabTitle;
} protected void Tab1_Button_Click(object sender, EventArgs e)
{ } protected void Tab2_Button_Click(object sender, EventArgs e)
{ }
}
效果例如以下：
即使在标签2下点击button，页面刷新完后。依旧显示标签2。
JavaScript提高：005：ASP.NET使用easyUI TABS标签显示问题的更多相关文章
- JavaScript提高：006：ASP.NET使用easyUI TABS标签updatepanel
前文使用了easyui的tab标签.切换问题,使用了session保存当前选中页,然后页面总体刷新时再切换至上次保存页码.那么使用updatepanel后,这个问题就非常好攻克了.http://blo ...
- 布局-EasyUI Panel 面板、EasyUI Tabs 标签页/选项卡、EasyUI Accordion 折叠面板、EasyUI Layout 布局
EasyUI Panel 面板 通过 $.fn.panel.defaults 重写默认的 defaults. 面板(panel)当做其他内容的容器使用.它是创建其他组件(比如:Layout 布局.Ta ...
- ASP.NET MVC+EF框架+EasyUI实现权限管理系列(23)-设置角色遗留问题和为权限设置角色以及EasyUI Tabs的使用
ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇) (1):框架搭建 (2):数据库访问层的设计Demo (3):面向接口编程 (4 ):业务逻辑层的封装 ...
- 设置角色遗留问题和为权限设置角色以及EasyUI Tabs的使用
设置角色遗留问题和为权限设置角色以及EasyUI Tabs的使用 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇) (1):框架搭建 (2):数据库访问层的设计Demo ...
- ASP.NET MVC +EasyUI 权限设计(二)环境搭建
请注明转载地址:http://www.cnblogs.com/arhat 今天突然发现博客园出问题了,老魏使用了PC,手机,平板都访问博客园了,都是不能正常的访问,原因是不能加载CSS,也就是不能访问 ...
- ASP.NET MVC4+EasyUI+EntityFrameWork5权限管理系统——菜单模块的实现（二）
ASP.NET MVC4+EasyUI+EntityFrameWork5权限管理系统——数据库的设计(一) 菜单和模块是在同一个表中,采用的是树形结构,模块菜单表结构如下代码: USE [Permis ...
- ASP.NET MVC+EasyUI+Entity FrameWork 整合开发
本文详细讲解怎么用ASP.NET MVC+EasyUI+Entity FrameWork 来开发一个项目 对于ASP.NET MVC的Jscript库,主要引用 <script type=.mi ...
- EasyUI Tabs + Yii2.0实现iframe方式打开页面（解决共用静态文件引入加载的问题）
在项目实际开发中,有将打开的各个链接页面隔离的需求(防止静态资源起冲突),这个时候常规思路就是使用iframe来实现!但遇到一个比较棘手的问题,当用easyui Tabs打开一个iframe页面时,怎 ...
- Post Complex JavaScript Objects to ASP.NET MVC Controllers
http://www.nickriggs.com/posts/post-complex-javascript-objects-to-asp-net-mvc-controllers/ Post ...
随机推荐
- Python学习之路——迭代器、生成器、算法基础、正则
一.迭代器: 迭代器是访问集合元素的一种方式. 迭代器对象是从集合的第一个元素开始访问,直到所有的元素被访问完结束. 迭代器只能往前不会后退,不过这也没什么,因为人们很少在迭代途中往后退. 另外,迭代 ...
- TF-IDF算法-自动提取关键词汇
引子:Automatic Keyphrase extraction 很长文章里面,如何自动提取关键词汇呢? 比如在<中国的蜜蜂养殖>的长文里面,我们准备提取它的关键词.首先一个思路, 那些 ...
- cocos2dx进阶学习之CCAction
CCAction在cocos2dx中,抽象了节点的动作.它由CCObject派生,因此它不是渲染节点. 它经常的用法是,创建一个action,然后让某个CCNode对象(一般是精灵),去执行它. 在马 ...
- java大作业 KShinglingAlgorithm
wiki上关于KShingling Algorithm(w-shingling)的说明: http://en.wikipedia.org/wiki/W-shingling 摘要: In natural ...
- uva11178 Morley’s Theorem（求三角形的角三分线围成三角形的点）
Morley’s Theorem Input: Standard Input Output: Standard Output Morley’s theorem states that that the ...
- HNU13028Attacking rooks (二分匹配，一行变多行，一列变多列)
Attacking rooks Time Limit: 20000ms, Special Time Limit:50000ms, Memory Limit:65536KB Total submit u ...
- [置顶] linux常用命令手册
前言:整理了一份linux常用命令手册,与大家分享.这是一些比较常用的命令. 我已经整理成一份PDF带书签的手册,可以到CSDN免费下载. 下载地址:http://download.csdn.net/ ...
- SSH框架入门学习之二(spring)
Spring也是一个开源框架,我在学习Spring的时候,认为最重要的几点是:IOC(控制反转).AOP(面向切面)和容器概念. 详细的教程还请大家去看网上的视频,这里贴一个小Demo以供学习. (前 ...
- cocos2d-html5 简易 下拉表单 控件
刚才在CH5的群里问了问 有没有大侠写过 下拉表单控件啊! 没人鸟窝 ,DZ老师表示非常伤心啊 ,于是乎 自己写一个把 共享给大家. 效果图上一个 仅仅实现了一个最最主要的控件 非常eas ...
- 静态化 - 伪静态技术（Apache Rewrite 实现）
打开apache的配置文件httpd.conf 找到 #LoadModule rewrite_module modules/mod_rewrite.so 把前面#去掉.没有则添加,但必选独占一行,使a ...