首页 > 代码库 > JavaScript提高:005:ASP.NET使用easyUI TABS标签显示问题
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问题,该如何解决呢?
思路很简单,无非就是记住上次选中的tab页,然后当页面刷新时读取出上次的tab,在初始化页面的时候,强制显示指定的tab页。
这里有几个步骤比较重要:
1、记录选中的tab;
2、读取指定的tab;
3、显示指定的tab。
关于用到的easyui的js以及样式文件,前文已经说过了(http://blog.csdn.net/yysyangyangyangshan/article/details/38306591)。
直接看所有的代码:
前台代码如下:
$(document).ready(function ():这里是初始化页面时执行的方法,在这里读取之前保存的tab页的索引,然后让tabs显示保存的那个索引的tab;同时还绑定了一个tab标签的click事件;
function buttonTabHeadClick():这个函数,就是当tab标签被选中时记录当前标签的索引,此处用后台的一个静态变量来保存的;
"<%=GetSelectedTab()%>":完成前台调用后台的方法。
两个按钮 点击1和点击2 是测试用的,如果不做任何处理,每当按钮点击时,tabs总会显示第一个了。
后台代码:
效果如下:
即使在标签2下点击按钮,页面刷新完后,依然显示标签2。
大家都知道,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。
关于用到的easyui的js以及样式文件,前文已经说过了(http://blog.csdn.net/yysyangyangyangshan/article/details/38306591)。
直接看所有的代码:
前台代码如下:
[html] view plaincopyprint?
- <htmlxmlns="http://www.w3.org/1999/xhtml">
- <head runat="server">
- <title></title>
- <link href="Scripts/EasyUI/themes/icon.css"rel="stylesheet"type="text/css"/>
- <linkhref="Scripts/EasyUI/themes/default/easyui.css"rel="stylesheet"type="text/css"/>
- <scriptsrc="Scripts/EasyUI/jquery-1.8.0.min.js"type="text/javascript"></script>
- <scriptsrc="Scripts/EasyUI/jquery.easyui.min.js"type="text/javascript"></script>
- <scriptsrc="Scripts/EasyUI/easyui-lang-zh_CN.js"type="text/javascript"></script>
- <scriptsrc="Scripts/Common.js"type="text/javascript"></script>
- <scriptsrc="Scripts/Ajax.js"type="text/javascript"></script>
- </head>
- <body>
- <formid="form1"runat="server">
- <div id="tabTop">
- <divtitle="标签一"runat="server">
- <table>
- <tr>
- <td>
- <asp:ButtonID="btn1"runat="server"Text="点击1"OnClick="Tab1_Button_Click"/>
- </td>
- </tr>
- </table>
- </div>
- <div title="标签二"runat="server">
- <table>
- <tr>
- <td>
- <asp:ButtonID="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()%>":完成前台调用后台的方法。
两个按钮 点击1和点击2 是测试用的,如果不做任何处理,每当按钮点击时,tabs总会显示第一个了。
后台代码:
[csharp] view plaincopyprint?
- 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下点击按钮,页面刷新完后,依然显示标签2。
JavaScript提高:005:ASP.NET使用easyUI TABS标签显示问题
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。