Question

我有

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

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

问题是，当函数Timer1_Tick被触发（每5秒）时，它会以某种方式重新加载页面，并且jquery函数不再有效。面板2数据不再滚动，当我再次使用

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

虽然没有任何数据更新

无论如何都要解决这些问题

如何在执行触发事件后保持jquery继续工作（不重新加载）（部分回发/重新加载页面）？
如何在没有部分回发的情况下触发UpdatePanel？
检查数据库中数据是否已更改的更好方法是什么？

的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);

UpdatePanel的触发器上的Jquery函数

1 个答案: