前面使用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）。





直接看全部的代码：

前台代码例如以下：

  1. <html
    xmlns="http://www.w3.org/1999/xhtml">
  2. <head
    runat="server">
  3. <title></title>
  4. <link
    href="Scripts/EasyUI/themes/icon.css"
    rel="stylesheet"
    type="text/css"
    />
  5. <link
    href="Scripts/EasyUI/themes/default/easyui.css"
    rel="stylesheet"
    type="text/css"
    />
  6. <script
    src="Scripts/EasyUI/jquery-1.8.0.min.js"
    type="text/javascript"></script>
  7. <script
    src="Scripts/EasyUI/jquery.easyui.min.js"
    type="text/javascript"></script>
  8. <script
    src="Scripts/EasyUI/easyui-lang-zh_CN.js"
    type="text/javascript"></script>
  9. <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. <script
    type="text/javascript">
  37. $('#tabTop').tabs({
  38. width: $("#tabTop").parent().width(),
  39. height: "auto",
  40. onSelect: function (title) {
  41. //这是默认的选中事件，可是当运行了pageload这个也会运行
  42. }
  43. });
  44. //初始化—始终显示后台保存的标签
  45. $(document).ready(function () {
  46. var tabTitle = parseInt("<%=GetSelectedTab()%>");
  47. if (tabTitle != null && tabTitle
    >=0) {
  48. $("#tabTop").tabs("select", tabTitle);
  49. }
  50. $('#tabTop').bind('click', function () {
  51. buttonTabHeadClick();
  52. });
  53. });
  54. //标签页点击事件
  55. function buttonTabHeadClick() {
  56. var title = parseInt($('.tabs-selected').index());
  57. var oldTitle =parseInt("<%=GetSelectedTab()%>");
  58. if ( oldTitle>=0 && title == oldTitle) {
  59. return false;
  60. }
  61. var selectObj =
    new Object();
  62. selectObj.SelectTabTitle =
    title;
  63. selectObj.OperateType =
    "TabTitle";
  64. var htmlObjects = $.ajax({
  65. type: "POST",
  66. data: selectObj,
  67. async: true,
  68. success: function (result) {
  69. },
  70. error: function (result) {
  71. }
  72. });
  73. return false;
  74. }
  75. </script>
  76. </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总会显示第一个了。



后台代码：

  1. public partial class _Default : System.Web.UI.Page
  2. {
  3. protected
    static string SelectTabTitle =
    "0";
  4. protected void Page_Load(object sender, EventArgs e)
  5. {
  6. if (!IsPostBack)
  7. {
  8. }
  9. switch (Request["OperateType"])
  10. {
  11. case
    "TabTitle":
  12. SetSelectedTab();
  13. break;
  14. default:
  15. break;
  16. }
  17. }
  18. /// <summary>
  19. /// 保存选中的tab
  20. /// </summary>
  21. private void SetSelectedTab()
  22. {
  23. SelectTabTitle = Request["SelectTabTitle"];
  24. }
  25. /// <summary>
  26. /// 获取选中的tab
  27. /// </summary>
  28. /// <returns></returns>
  29. protected
    string GetSelectedTab()
  30. {
  31. return SelectTabTitle;
  32. }
  33. protected
    void Tab1_Button_Click(object sender, EventArgs e)
  34. {
  35. }
  36. protected void Tab2_Button_Click(object sender, EventArgs e)
  37. {
  38. }
  39. }
 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标签显示问题的更多相关文章

  1. JavaScript提高：006：ASP.NET使用easyUI TABS标签updatepanel

    前文使用了easyui的tab标签.切换问题,使用了session保存当前选中页,然后页面总体刷新时再切换至上次保存页码.那么使用updatepanel后,这个问题就非常好攻克了.http://blo ...

  2. 布局-EasyUI Panel 面板、EasyUI Tabs 标签页/选项卡、EasyUI Accordion 折叠面板、EasyUI Layout 布局

    EasyUI Panel 面板 通过 $.fn.panel.defaults 重写默认的 defaults. 面板(panel)当做其他内容的容器使用.它是创建其他组件(比如:Layout 布局.Ta ...

  3. ASP.NET MVC+EF框架+EasyUI实现权限管理系列(23)-设置角色遗留问题和为权限设置角色以及EasyUI Tabs的使用

    ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   (1):框架搭建    (2):数据库访问层的设计Demo    (3):面向接口编程   (4 ):业务逻辑层的封装    ...

  4. 设置角色遗留问题和为权限设置角色以及EasyUI Tabs的使用

    设置角色遗留问题和为权限设置角色以及EasyUI Tabs的使用 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   (1):框架搭建    (2):数据库访问层的设计Demo ...

  5. ASP.NET MVC +EasyUI 权限设计(二)环境搭建

    请注明转载地址:http://www.cnblogs.com/arhat 今天突然发现博客园出问题了,老魏使用了PC,手机,平板都访问博客园了,都是不能正常的访问,原因是不能加载CSS,也就是不能访问 ...

  6. ASP.NET MVC4+EasyUI+EntityFrameWork5权限管理系统——菜单模块的实现（二）

    ASP.NET MVC4+EasyUI+EntityFrameWork5权限管理系统——数据库的设计(一) 菜单和模块是在同一个表中,采用的是树形结构,模块菜单表结构如下代码: USE [Permis ...

  7. ASP.NET MVC+EasyUI+Entity FrameWork 整合开发

    本文详细讲解怎么用ASP.NET MVC+EasyUI+Entity FrameWork 来开发一个项目 对于ASP.NET MVC的Jscript库,主要引用 <script type=.mi ...

  8. EasyUI Tabs + Yii2.0实现iframe方式打开页面（解决共用静态文件引入加载的问题）

    在项目实际开发中,有将打开的各个链接页面隔离的需求(防止静态资源起冲突),这个时候常规思路就是使用iframe来实现!但遇到一个比较棘手的问题,当用easyui Tabs打开一个iframe页面时,怎 ...

  9. Post Complex JavaScript Objects to ASP.NET MVC Controllers

    http://www.nickriggs.com/posts/post-complex-javascript-objects-to-asp-net-mvc-controllers/     Post ...

随机推荐

  1. easyui-datagrid通过action从数据库获取数据的关键代码

    实际上是结合struts2来从数据获取json格式的数据.   关键代码: GetUserAction.java代码   package com.log.control; import java.io ...

  2. YII框架实现排序

    YII框架实现排序 用YII2实现批量修改排序功能,如下图 控制器: /** * Lists all CollectionAlbum models. * @return mixed */ public ...

  3. QT中QWidget类简介

    一.详细描述 QWidget类是所有用户界面对象的基类.通俗的来讲,Qt基本上所有的UI类都是由QWidget继承出来的,而QWidget继承于QObject,  大家可以查阅Qt source 即可 ...

  4. Dining（最大流）

    Dining Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 11844   Accepted: 5444 Descripti ...

  5. HDU 5091 线段树扫描线

    给出N个点.和一个w*h的矩形 给出N个点的坐标,求该矩形最多能够覆盖多少个点 对每一个点point(x.y)右边生成相应的点(x+w,y)值为-1: 纵向建立线段树,从左到右扫描线扫一遍.遇到点则用 ...

  6. B - 畅通工程(并查集)

    对并查集理解之后就可以做这种题了,虽说这种题做的不多,这道题做过才这么快搞定,可是还是挺happy滴,加油 Description 某省调查城镇交通状况,得到现有城镇道路统计表,表中列出了每条道路直接 ...

  7. 自定义ActionBar背景（分别针对3.0以下和3.0以上的版本）

    官方原文:http://developer.android.com/training/basics/actionbar/styling.html 针对3.0以上的版本: <?xml versio ...

  8. pycharm+QT4的helloworld

    # -*- coding: utf-8 -*- from PyQt4 import QtCore, QtGui try: _fromUtf8 = QtCore.QString.fromUtf8 exc ...

  9. C语言深度剖析---const关键字（转载）

    const是constant的缩写,是恒定不变的意思.被const修饰的值,是只读变量. 1.const修饰只读变量,具有不变性      #include <stdio.h> int m ...

  10. Chapter 13 建造者模式

    建造者模式又叫生成器模式:将一个产品的内部表象与产品的生成过程分割开来,从而可以使一个建造过程生成具有不同的内部表象的产品对象. 代码: package xiao; import java.util. ...