使用AJAX计时器防止asp:表在刷新时重复

本文关键字:刷新 计时器 AJAX asp 使用 | 更新日期: 2023-09-27 18:05:18

我在c#中创建了一个非常简单的代码来显示asp:Table中的数据。在初始页面加载时,一切看起来都很好。我使用AJAX计时器每15秒刷新一次,以保持数据是最新的。问题是在刷新表后显示所有重复的数据。我试过调试,一切看起来都很好,直到AJAX刷新,然后它似乎在c#代码中跳过所有的地方,而不是按照预期的顺序。

希望我没有以完全错误的方式接近这个,但如果我有,请告诉我!有没有办法防止/修复这种重复?

我在这里以非常简单的形式复制了问题代码。即:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="testASPTables._default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <asp:Table ID="Table1" runat="server">
        </asp:Table>
        <asp:Timer ID="Timer1" runat="server" Interval="15000" OnTick="Timer1_Tick">
        </asp:Timer>
    </div>
    </form>
</body>
</html>

…后面的代码:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace testASPTables
{
    public partial class _default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            TableRow[] tRows = new TableRow[5];
            TableCell[] tCells = new TableCell[5];

            for (int i = 0; i < 5; i++)
            {
                tRows[i] = new TableRow();
                Table1.Rows.Add(tRows[i]);
                tCells[i] = new TableCell();
                tRows[i].Cells.Add(tCells[i]);
                tCells[i].Text = "Cell Number: " + i.ToString();
            }
        }
        protected void Timer1_Tick(object sender, EventArgs e)
        {
            Page_Load(sender, e);
        }
    }
}

使用AJAX计时器防止asp:表在刷新时重复

您呼叫Page_Load两次。Page_Load在回发时运行,然后从Timer1_Click再次调用它。

您需要始终注意页面是否处于回发状态以及Page_Load是如何工作的。

我会这么做。

protected void Page_Load(object sender, EventArgs e)
{
    if(!IsPostBack)
    {
        LoadTableData();
    }
}
protected void LoadTableData()
{
    Table1.Rows.Clear(); //I added this
    TableRow[] tRows = new TableRow[5];
    TableCell[] tCells = new TableCell[5];
    for (int i = 0; i < 5; i++)
    {
        tRows[i] = new TableRow();
        Table1.Rows.Add(tRows[i]);
        tCells[i] = new TableCell();
        tRows[i].Cells.Add(tCells[i]);
        tCells[i].Text = "Cell Number: " + i.ToString();
    }
}

protected void Timer1_Tick(object sender, EventArgs e)
{
    LoadTableData();
}

哦,除此之外,您还需要清除现有的表行。

顺便说一下,这是非常低效的。你每15秒就重新加载一次整个表。再加上几个客户端,你实际上是在对自己进行DoS攻击。考虑使用SignalR在向底层数据添加行时向客户端推送新的更改。