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

zoukankan html css js c++ java

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] view plain copy print ?

<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({
         $("#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({ $("#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总会显示第一个了。

后台代码：

[csharp] view plain copy print ?

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。
查看全文

相关阅读:
django框架进阶ModelForm组件长期维护
 crm项目stark组件
 前端html长期维护
 django框架进阶AJAX长期维护
 22python语法基础基础赋值与深浅拷贝
 django框架基础路由系统长期维护
 django框架基础ORM单表操作长期维护
 24python语法基础基础控制语句
 django框架基础ORM基础长期维护
 django框架基础ORM进阶长期维护

原文地址：https://www.cnblogs.com/zfyouxi/p/5160891.html