ASP.NET UpdatePanel中的jQuery可崩溃div

时间：2014-09-24 12:14:15

标签： jquery asp.net

我的ASP.NET页面中有一些div存在于更新面板中，当用户单击它们时会折叠和展开。从谷歌周围，我已经连线，以便点击扩展和折叠在更新面板内工作正常......就像这样：

 $(document).ready(function () {
            $("a.groupBtn").click(function () {
                $(this).parent().next(".device-list").slideToggle("fast");
            });
        });

        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_endRequest(function () {
            $("a.groupBtn").click(function () {
                $(this).parent().next(".device-list").slideToggle("fast");
            });
        });

这一切都运行正常，但我遇到的问题是每次更新面板打勾时，div都会返回默认状态，即崩溃状态。有没有办法连接它，以便div更新面板滴答时会记住它们的状态？

编辑：这是我的页面。 div是在UpdatePanel3内部以编程方式生成的。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="DashboardFrontEnd.index" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>

     <script type="text/javascript">
         $(document).ready(function () {
             $("a.groupBtn").click(function () {
                 $(this).parent().next(".device-list").slideToggle("fast");
                 var $hState = $(".div-state");
                 var val = ($hState.val() || 0) == 1;
                 $hState.val(!val);
                });
            });


         var prm = Sys.WebForms.PageRequestManager.getInstance();
         prm.add_endRequest(function () {
             var $hState = $(".div-state");
             var val = $hState.val() == 1;
             if (val)
                 $(this).parent().next(".device-list").show()
             else
                 $(this).parent().next(".device-list").hide();
        });
</script>


<div class="topBar">&nbsp;</div>
    <div class="wrapper">
        <img src="img/summit-logo-website.png" />
        <div id="stack-title">Network Monitor Dashboard</div>
        <hr />
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:Panel ID="redPnl" runat="server" CssClass="panel red" Visible="False" Direction="LeftToRight"></asp:Panel>
                    <asp:Timer ID="Timer1" runat="server" OnTick="Timer1_Tick" Interval="5000">
                    </asp:Timer>
                </ContentTemplate>

            </asp:UpdatePanel>

        <br />

            <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                <ContentTemplate>
                    <asp:Panel ID="yellowPnl" runat="server" BackColor="#FFCC00" CssClass="panel" Visible="False"></asp:Panel>
                </ContentTemplate>
            </asp:UpdatePanel>

        <br />

            <asp:UpdatePanel ID="UpdatePanel3" runat="server">
                <ContentTemplate>
                <input runat="server" class="div-state" />
            <div id="device-list">
                <asp:Panel ID="greenPnl" runat="server" CssClass="panel">
                </asp:Panel>
            </div>
                </ContentTemplate>
            </asp:UpdatePanel>

            <asp:UpdatePanel ID="UpdatePanel4" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <asp:Panel ID="Panel1" runat="server" Direction="RightToLeft" CssClass="right device-detail" Visible="False">
                        <asp:Label ID="Label4" runat="server" Text="Label" Font-Size="Medium"></asp:Label><br />
                        <asp:Label ID="Label1" runat="server" Text="Label" Font-Bold="False" Font-Size="Medium"></asp:Label><br />
                        <asp:Label ID="Label2" runat="server" Text="Label" Font-Bold="False" Font-Size="Medium"></asp:Label>
                        <br />
                        <asp:Label ID="Label3" runat="server" Text="Label" Font-Bold="True" Font-Size="Larger"></asp:Label>
                    </asp:Panel>

                </ContentTemplate>
            </asp:UpdatePanel>




    </div>
</form>

1 个答案:

答案 0 :(得分：0)

我可以使用HiddenField（在UpdatePanel外部）存储DIV的状态，并为asyc请求管理事件endRequest。 将隐藏字段放在UpdatePanel的容器中    

＆＃13;
＆＃13; 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="DashboardFrontEnd.index" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>

     <script type="text/javascript">
         $(document).ready(function () {
             $("a.groupBtn").click(function () {
                 $(this).parent().next(".device-list").slideToggle("fast");
                 var $hState = $(".div-state");
                 var val = ($hState.val() || 0) == 1;
                 $hState.val(!val);
                });
            });


         var prm = Sys.WebForms.PageRequestManager.getInstance();
         prm.add_endRequest(function () {
             var $hState = $(".div-state");
             var val = $hState.val() == 1;
             if (val)
                 $(this).parent().next(".device-list").show()
             else
                 $(this).parent().next(".device-list").hide();
        });
</script>


<div class="topBar">&nbsp;</div>
    <div class="wrapper">
        <img src="img/summit-logo-website.png" />
        <div id="stack-title">Network Monitor Dashboard</div>
        <hr />
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:Panel ID="redPnl" runat="server" CssClass="panel red" Visible="False" Direction="LeftToRight"></asp:Panel>
                    <asp:Timer ID="Timer1" runat="server" OnTick="Timer1_Tick" Interval="5000">
                    </asp:Timer>
                </ContentTemplate>

            </asp:UpdatePanel>

        <br />

            <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                <ContentTemplate>
                    <asp:Panel ID="yellowPnl" runat="server" BackColor="#FFCC00" CssClass="panel" Visible="False"></asp:Panel>
                </ContentTemplate>
            </asp:UpdatePanel>

        <br />
            <input runat="server" class="div-state" />
             <!-- THE HIDDEN FIELD MUST BE OUTSIDE THE UPDATE PANEL -->
            <asp:UpdatePanel ID="UpdatePanel3" runat="server">
                <ContentTemplate>
               
            <div id="device-list">
                <asp:Panel ID="greenPnl" runat="server" CssClass="panel">
                </asp:Panel>
            </div>
                </ContentTemplate>
            </asp:UpdatePanel>

            <asp:UpdatePanel ID="UpdatePanel4" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <asp:Panel ID="Panel1" runat="server" Direction="RightToLeft" CssClass="right device-detail" Visible="False">
                        <asp:Label ID="Label4" runat="server" Text="Label" Font-Size="Medium"></asp:Label><br />
                        <asp:Label ID="Label1" runat="server" Text="Label" Font-Bold="False" Font-Size="Medium"></asp:Label><br />
                        <asp:Label ID="Label2" runat="server" Text="Label" Font-Bold="False" Font-Size="Medium"></asp:Label>
                        <br />
                        <asp:Label ID="Label3" runat="server" Text="Label" Font-Bold="True" Font-Size="Larger"></asp:Label>
                    </asp:Panel>

                </ContentTemplate>
            </asp:UpdatePanel>




    </div>
</form>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题