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>

效果例如以下：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveXlzeWFuZ3lhbmd5YW5nc2hhbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />

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

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

巴特西

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

最新文章

热门文章