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

最新推荐文章于 2019-05-05 14:05:01 发布

转载最新推荐文章于 2019-05-05 14:05:01 发布 · 73 阅读

文章标签：

#xhtml #ui #javascript #ViewUI

本文介绍如何利用ASP.NET AJAX的UpdatePanel组件优化EasyUI Tab控件的用户体验，避免页面整体刷新导致的标签页切换问题。通过具体示例代码展示了如何在按钮点击事件后仅更新指定部分，保持当前标签页不变。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前文使用了easyui的tab标签。切换问题，使用了session保存当前选中页，然后页面总体刷新时再切换至上次保存页码。那么使用updatepanel后，这个问题就非常好攻克了。
http://blog.youkuaiyun.com/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>

效果例如以下：