Question

我正在使用带有JQuery的ASP.NET Ajax。我有一个click事件，它在UpdatePanel中的对象上添加/删除css类，但是当发生ASP.NET Partial回发时，我失去了“状态”。这是我试图创建的最小例子;我如何保持css类状态？

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %>

<!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>

    <style type="text/css">
        .active { background: #000000; color: #ffffff; }
        .test {}
    </style>


    <script src="jquery-1.3.2.js" type="text/javascript"></script> 

    <script language="javascript" type="text/javascript">

        function pageLoad(sender, args) {

            // rebind events lost in partial postback
            $(".test").unbind();

            $(".test").click(function() {

                $(".test").removeClass("active");
                $(this).addClass("active");

            });

        }

    </script>








</head>
<body>
    <form id="form1" runat="server">


    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>

    <asp:Timer ID="Timer1" runat="server" Interval="30000" ontick="Timer1_Tick">
    </asp:Timer>

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">

    <Triggers>
    <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
    </Triggers>

    <ContentTemplate>


    <div class="test">

        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

    </div>


    <div class="test">

        <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>

    </div>

    </ContentTemplate>
    </asp:UpdatePanel>

    </form>
</body>
</html>

Answer 1

查看使用客户端PageRequestManager事件来保存/恢复状态（注意，以下是JavaScript）：

function SaveState(sender, args) 
{
  // code to save state of update panel controls
}

function ReapplyState(sender, args)
{

  // code to reapply state of update panel controls
}

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(SaveState);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(ReapplyState);

Answer 2

updatepanel会替换其范围内的DOM，因此您所做的任何修改都不会在回发之间保留。

您可以查看jQuery“实时”事件（据说 - 我没有尝试过）在将新元素添加到文档中时重新应用。

Answer 3

Zincorp的例子对我不起作用。我必须将sys.webform行放在一个单独的函数中，我必须绑定到正文页面的onload事件：

function load（）

{Sys.WebForms.PageRequestManager.getInstance（）add_endRequest（ReapplyState）。 }

并在body标签中添加onload =“load（）”

由https://zeemalik.wordpress.com/2007/11/27/how-to-call-client-side-javascript-function-after-an-updatepanel-asychronous-ajax-request-is-over/提供

在updatepanel部分回发上通过jquery添加了丢失的css类

3 个答案: