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

来源：互联网发布：苹果美版网络锁查询编辑：程序博客网时间：2024/05/17 08:59

前文使用了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>

效果如下：

这样按钮事件后，也不会整体刷新页面了，也就解决了页签自动跳转至默认页的问题了。

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

1 0