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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript提高:006:ASP.NET使用easyUI TABS标签updatepanel相关的知识,希望对你有一定的参考价值。

前文使用了easyui的tab标签。切换问题,使用了session保存当前选中页,然后页面总体刷新时再切换至上次保存页码。那么使用updatepanel后,这个问题就非常好攻克了。
http://blog.csdn.net/yysyangyangyangshan/article/details/38578403
引用dll上文已说过。以下直接看怎样改进tab在页面中的使用。
前台代码:
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="asp" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<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">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
     </asp:ScriptManager>


    <div id="tabTop" runat="server">
    
    <div id="Div1" title="标签一" runat="server">
    <asp:updatepanel ID="Updatepanel1" runat="server">
     <ContentTemplate>
      <table>
       <tr>
        <td>
         <asp:Button ID="btn1" runat="server" Text="点击1" OnClick="Tab1_Button_Click"/>
        </td>
       </tr>
      </table>    
      </ContentTemplate>
    </asp:updatepanel>
    </div>




   
    <div id="Div2" title="标签二" runat="server">  
    <asp:updatepanel ID="Updatepanel2" runat="server">
     <ContentTemplate>
      <table>
       <tr>
        <td>
         <asp:Button ID="btn2" runat="server" Text="点击2"  OnClick="Tab2_Button_Click" />
        </td>
       </tr>
      </table>     
      </ContentTemplate>
<%--  <Triggers>
    <asp:AsyncPostBackTrigger ControlID="" EventName="" />
    <asp:PostBackTrigger ControlID="" />
  </Triggers>--%>
  </asp:updatepanel>
    </div>


  </div>
  </form>
</body>
<script type="text/javascript">


    $(function () {
        $(‘#tabTop‘).tabs({
            width: $("#tabTop").parent().width()
        });


        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
    });


    function EndRequestHandler() {
        //刷新后的操作
        return false;
    }
  </script>
</html>
后台:
public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {


        }


        protected void Tab1_Button_Click(object sender, EventArgs e)
        {


        }


        protected void Tab2_Button_Click(object sender, EventArgs e)
        {


        }
    }

依旧在web.config中增加配置标签:
     <httpHandlers>
        <remove verb="*" path="*.asmx"/>
        <add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
        <add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>
      </httpHandlers>
效果例如以下:
技术分享

这样button事件后,也不会总体刷新页面了,也就攻克了页签自己主动跳转至默认页的问题了。

代码下载:http://download.csdn.net/detail/yysyangyangyangshan/7991493

以上是关于JavaScript提高:006:ASP.NET使用easyUI TABS标签updatepanel的主要内容,如果未能解决你的问题,请参考以下文章

使用 javascript/jquery 检测 Asp.Net 表单是不是有效

隐藏面板内的 ASP.NET updatepanel 可能存在错误

asp.net webforms ajax 更新gridview

提高 ASP.NET 网站性能的方法都有哪些? [关闭]

如何提高ASP.NET页面载入速度的方法

提高 ASP.NET Web 应用性能