您的位置：首页 > Web前端 > JavaScript

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

2014-09-30 01:18 423 查看

前文使用了easyui的tab标签，切换问题，使用了session保存当前选中页，然后页面整体刷新时再切换至上次保存页码。那么使用updatepanel后，这个问题就很好解决了。
/article/1419349.html
引用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>

效果如下：

这样按钮事件后，也不会整体刷新页面了，也就解决了页签自动跳转至默认页的问题了。
代码下载：http://download.csdn.net/detail/yysyangyangyangshan/7991493

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航