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

如果您愿意改变您的方法，离开更新面板并改用 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);