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)。





直接看全部的代码:

前台代码例如以下:

  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)
{ }
}

效果例如以下:

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

即使在标签2下点击button,页面刷新完后。依旧显示标签2。

上一篇:【小月博客】用HTML5的File API做上传图片预览功能


下一篇:Maven配置文件Pom.xml详解