UpdatePanel 触发器上的 Jquery 函数

Question

我有

1. 两个 UpdatePanel 用于显示数据库中的数据。
2. 一个定时器，间隔设置为 5 秒。
3. 一个 jQuery 函数，用于使 UpdatePanel2 内的内容自动滚动。
   使用的插件:http://logicbox.net/jquery/simplyscroll/

目标是每 5 秒检查一次数据库中的数据是否已更改，然后自动更新 panel1 和 panel2(如果没有任何更改，则不执行任何操作，我不想每 5 秒刷新一次这些面板，因为 panel2 总是滚动，所以如果它刷新，它将再次从头开始滚动)。

问题是，当函数 Timer1_Tick 被触发(每 5 秒)时，它会导致页面以某种方式重新加载，并且 jquery 函数不再起作用。面板 2 数据不再滚动，当我使用

再次调用 jQuery 函数时

ScriptManager.RegisterStartupScript(
        UpdatePanel2, 
        UpdatePanel2.GetType(), 
        "ScrollMessage", "ScrollMessage();", true);` 

这样，它会导致数据从头开始滚动，尽管没有任何数据更新。所以如果你不调用jquery，它不会工作，如果你调用它，它会从头开始。

有没有办法解决这些问题

1. 如何让jquery在触发事件执行后继续工作(不重新加载)(部分回发/重新加载页面)？
2. 如何在不部分回发的情况下触发 UpdatePanel？
3. 有更好的方法来检查数据库中的数据是否发生更改吗？

JavaScript

function ScrollMessage() {
    $("#scroller-message").simplyScroll({ frameRate: 100 });
}

标记

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:Timer ID="Timer1" runat="server" 
    Interval="5000" 
    OnTick="Timer1_Tick">
</asp:Timer>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:Literal ID="ltl1" runat="server">
        </asp:Literal>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="Timer1" />
    </Triggers>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <div id="scroller-message">
            <asp:Literal ID="ltl2" runat="server"></asp:Literal>
        </div>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="Timer1" />
    </Triggers>
</asp:UpdatePanel>

隐藏代码

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        //*display data to ltl1 and ltl2*
        ScriptManager.RegisterStartupScript(
            UpdatePanel2, 
            UpdatePanel2.GetType(), 
            "ScrollMessage", "ScrollMessage();", true);
    }
}
protected void Timer2_Tick(object sender, EventArgs e)
{
    //update panel1 if new data updated
    if (condition is good)
    {
        ltl1.Text = "new data";
    }

    //update panel2 if new data updated
    if (condition is good)
    {
        ScriptManager.RegisterStartupScript(
            UpdatePanel2, 
            UpdatePanel2.GetType(), 
            "ScrollMessage", "ScrollMessage();", true);
        ltl2.Text = "new data";
    }
}

Answer 1

如果您愿意改变您的方法，离开 updatepanels 并使用 jquery，这里是实现它的指导步骤(您必须完成/修改此示例以满足您的需求):

作为替代解决方案，您可以将数据库查询逻辑放置在 Web 服务中(可能是 .asmx 文件)，以检查内容是否已更新(例如，您可以使用一个日期时间值来存储上次更新的时间)记录已写入)。
如果至少有一个值发生更改，则返回 JSON 作为此 Web 服务的结果。

[ScriptService]
public class CheckContentService : System.Web.Services.WebService
{
    private class Content
    {
        public string FirstContent { get; set; }
        public string SecondContent { get; set; }
    }

    [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public string CheckIfContentChanged()
    {
        // retrieve your content from database
        // ...

        var c = new Content();

        if (firstContentChanged)
            c.FirstContent = updatedValue1;
        else
            c.FirstContent = ""; 
            // you could return empty to know that it didn't change, 
            // or you could have a boolean property in previous class and 
            // set it to true if content changed, but try not to return all content if it didnt change at all

        if (secondContentChanged)
            c.SecondContent = updatedValue2; 
        else
            c.SecondContent = "";        

        this.Context.Response.ContentType = "application/json";
        JavaScriptSerializer s = new JavaScriptSerializer();

        return s.Serialize(c);
    }
}

在您的 html 中，放置两个 div，而不是之前的文字:

<div id="content1"></div>

<div id="content2"></div>

然后，在你的 JavaScript 中:

var checkForChanges = function () {
    $.ajax({
        type: "get",
        url: "/myservice.asmx",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {

            if (data.FirstContent != "")
                $("#content1").html(data.FirstContent)

            if (data.SecondContent != "")
                $("#content2").html(data.SecondContent)

        },
        error: function () {
            console.log('Error.');
        }
    });
}

// check for changes every 5 seconds
setInterval(checkForChanges(), 5000);