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

首页 > 代码库 > JavaScript提高：005：ASP.NET使用easyUI TABS标签显示问题

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

2024-07-20 06:34:38 226人阅读

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

直接看所有的代码：
前台代码如下：

[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>

<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()%>"：完成前台调用后台的方法。
两个按钮点击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)
{
}
}

 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个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > JavaScript提高：005：ASP.NET使用easyUI TABS标签显示问题

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

看完仍有疑问？有类似问题直接问程序猿