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

2021-07-15 22:25:29

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

码农公寓

相关文章