C#.Net页面渲染后延迟更新HTML表格列的技术问询

要实现页面渲染完成x分钟后给表格新增/填充列的需求，我们需要结合后端标记行标识和前端延迟执行逻辑，分两种场景给出具体实现：

第一步：后端生成表格时添加唯一标识 #

首先修改你的C#后台代码，给每个表格行添加唯一的data-runner-id属性（用runner的唯一ID），同时可以预留一个空列用于后续填充，或者后续动态新增列：

// 假设每个runner有唯一的runnerId属性
string runnerId = market[0].runners[marketCounter].runnerId.ToString();
htmlStr = $"<tr data-runner-id=\"{runnerId}\">" +
           $"<td>{market[0].runners[marketCounter].runnerName}</td>" +
           $"<td>{marketOdds[0].runners[marketCounter].lastPriceTraded.ToString()}</td>" +
           $"<td></td>" +
           // 预留空列用于后续填充，或者可以删掉这一行，后面动态新增列
           $"<td id=\"dynamic-cell-{runnerId}\"></td>" +
           "</tr>";

场景1：新值可在前端直接计算 #

如果新值不需要后端数据，仅通过前端逻辑生成，直接用setTimeout延迟执行即可：

// 设置延迟时间，将x分钟转为毫秒（示例为10分钟）
const delayMinutes = 10;
const delayMs = delayMinutes * 60 * 1000;

setTimeout(() => {
    // 获取所有带标识的表格行
    const tableRows = document.querySelectorAll('tr[data-runner-id]');
    
    tableRows.forEach(row => {
        const runnerId = row.dataset.runnerId;
        
        // 替换为你的前端计算逻辑
        const newValue = getCalculatedValue(runnerId);
        
        // 方式1：填充预留的空列
        const targetCell = document.getElementById(`dynamic-cell-${runnerId}`);
        if (targetCell) {
            targetCell.textContent = newValue;
        }
        
        // 方式2：动态新增一列（如果没预留空列）
        // const newCell = document.createElement('td');
        // newCell.textContent = newValue;
        // row.appendChild(newCell);
        
        // 可选：如果需要同步更新表头，新增表头列
        // const tableHeader = document.querySelector('thead tr');
        // if (tableHeader && !tableHeader.querySelector('#dynamic-header')) {
        //     const newHeader = document.createElement('th');
        //     newHeader.id = 'dynamic-header';
        //     newHeader.textContent = '延迟更新值';
        //     tableHeader.appendChild(newHeader);
        // }
    });
}, delayMs);

// 示例：根据runnerId计算新值的函数
function getCalculatedValue(runnerId) {
    // 这里写你的前端计算逻辑，比如模拟生成值
    return `更新值-${runnerId} ${new Date().toLocaleTimeString()}`;
}

场景2：新值需要从后端获取 #

如果新值需要调用后端逻辑（比如你的NewValuesin10Mins()函数），需要先在ASPX后台添加一个可被前端调用的接口，再通过AJAX获取数据：

2.1 后端添加WebMethod接口 #

在你的ASPX页面后台代码中添加静态WebMethod：

using System.Web.Services;
using System.Collections.Generic;
using System.Web.Script.Serialization;

public partial class YourAspxPage : System.Web.UI.Page
{
    // 允许前端调用的WebMethod
    [WebMethod]
    public static string GetDelayedRunnerValues()
    {
        // 这里调用你的NewValuesin10Mins逻辑，获取每个runner的新值
        Dictionary<string, string> newValues = new Dictionary<string, string>();
        foreach (var runner in market[0].runners)
        {
            string runnerId = runner.runnerId.ToString();
            // 替换为你的实际取值逻辑
            newValues[runnerId] = NewValuesin10Mins(runnerId);
        }
        
        // 序列化为JSON返回
        JavaScriptSerializer serializer = new JavaScriptSerializer();
        return serializer.Serialize(newValues);
    }
    
    // 调整你的原有函数，接收runnerId参数
    private static string NewValuesin10Mins(string runnerId)
    {
        // 实现根据runnerId获取新值的逻辑
        return "后端返回的新值";
    }
}

2.2 前端AJAX调用并更新表格 #

const delayMinutes = 10;
const delayMs = delayMinutes * 60 * 1000;

setTimeout(() => {
    // 调用后端WebMethod获取新值
    $.ajax({
        type: "POST",
        url: "YourAspxPage.aspx/GetDelayedRunnerValues",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(response) {
            // 解析后端返回的JSON数据
            const newValues = JSON.parse(response.d);
            
            // 更新每一行的列
            const tableRows = document.querySelectorAll('tr[data-runner-id]');
            tableRows.forEach(row => {
                const runnerId = row.dataset.runnerId;
                const newValue = newValues[runnerId];
                
                if (newValue) {
                    // 填充预留列或动态新增列（同场景1的两种方式）
                    const targetCell = document.getElementById(`dynamic-cell-${runnerId}`);
                    if (targetCell) {
                        targetCell.textContent = newValue;
                    }
                }
            });
        },
        error: function(xhr, status, error) {
            console.error("获取延迟值失败:", error);
        }
    });
}, delayMs);

注意事项 #

• 行标识唯一性：确保data-runner-id的值是唯一的，这样前端能精准对应每个runner的新值。
• 延迟准确性：客户端setTimeout可能因浏览器休眠（如页面最小化）导致延迟，如果需要更精准的时间，可以在页面加载时记录服务器时间，前端定时检查当前时间与目标时间的差值。
• 页面刷新问题：如果用户在x分钟内刷新页面，延迟任务会丢失。若需避免这种情况，可以用localStorage记录任务状态，或结合SignalR实现后端主动推送。

内容的提问来源于stack exchange，提问作者QuietWorld