javascript - 如何在 1 分钟后使用 javascript 刷新 Repeater？

Question

我已经创建了一个转发器，现在我想每 1 分钟刷新一次转发器。blow 是我的代码:

 <asp:Repeater ID="gvd" runat="server">

                <ItemTemplate>
                    <tr class="gradeA">
                        <td>
                            <asp:Label ID="lblcategory" runat="server" Text='<%#Eval("Firstname")%>'></asp:Label>

                        </td>
                        <td>
                            <asp:Label ID="lblcontent" runat="server" Text='<%#Eval("Lastname")%>'></asp:Label>
                        </td>

                     </tr>
                </ItemTemplate>

            </asp:Repeater>

它提供了完美的输出，但现在我想通过 javascript 刷新整个转发器，因为使用 updatepanel 会增加服务器上的负载

那么我如何通过 javascript 执行此操作？

Answer 1

SignalR旨在准确解决您所描述的问题。

这是你的情况:您想要一种显示可能不断变化的信息的方法。在任何时候，都应该显示最新的信息。

以 Web 窗体为中心的方法是使用 UpdatePanel。但是我自己和some others不太喜欢那些。它们通常会在以后造成问题，因为它们不能很好地与其他技术配合使用。它们也很“昂贵”，它们在客户端和服务器之间来回发送大量数据，耗尽带宽和资源。

deostroll 稍微涉及到的另一种方法是使用 AJAX 定期轮询服务器以获取数据。这不是一个坏方法，尽管我不会像他那样实现它。他/她的方式会大量消耗带宽和资源，因为您每隔几秒就会重新创建整个表。归结为对话类型格式，他/她的方法如下所示:

Client -> Server - Send me the entire table.
Server -> Client - Here's a 1MB table.
Client -> Server - Send me the entire table.
Server -> Client - Here's an 1MB table.
Client -> Server - Send me the entire table.
Server -> Client - Here's a 1.5MB table.
Client -> Server - Send me the entire table.
Server -> Client - Here's a 1MB table.

相反，基于 AJAX 轮询的方法应该如下所示:

3:30PM Client -> Server - The last data I have is from 3:30PM. Got anything new?
3:30PM Server -> Client - No.
3:31PM Client -> Server - The last data I have is from 3:30PM. Got anything new?
3:31PM Server -> Client - No.
3:32PM Client -> Server - The last data I have is from 3:31PM. Got anything new?
3:32PM Server -> Client - No.
3:33PM Client -> Server - The last data I have is from 3:32PM. Got anything new?
3:33PM Server -> Client - Yes, two new records. Here you go, 10KB.
3:34PM Client -> Server - The last data I have is from 3:33PM. Got anything new?
3:34PM Server -> Client - No.

这使用更少的带宽。我不会费心向您展示如何在代码中执行此操作，尽管我知道它相对简单并且代表了对 deostroll 方法的巨大改进。

相反，我想描述基于 SignalR 的方法是如何工作的。 SignalR 是“实时”的。它利用多种技术将更改从服务器“推送”到客户端。用于实现此目的的一种技术称为 Web 套接字，这是首选方法。但是，如果客户端或服务器不支持 Web 套接字，SignalR 会优雅地切换到其他技术。不过您不必担心，一切都已为您处理好。

让我们看一下在 SignalR 中实现它的简单方法。每次更改表数据时，您都希望在客户端上运行 JavaScript 函数以使用最新数据更新它们。

首先，我们需要在服务器上有一个集线器。

public class TableHub : Hub
    {
    }

在客户端，执行此操作以连接事件:

 $(function () {
    var tableHub= $.connection.tableHub;
    tableHub.client.tableChanged= function (html) {
    //append the html markup to your DOM
    };
});

然后每当表数据发生变化时，在服务器上调用这段代码:

var context = GlobalHost.ConnectionManager.GetHubContext<TableHub >();
string html="<table><tr><td>Some data</td></tr></table>"; //obviously you'd built the HTML table up here
context.Clients.All.TableChanged(html); //call tableChanged() on the client!

实际上最终会在客户端近乎实时地调用 tableChanged() 函数，从服务器端启动它!这基本上就是远程过程调用。因此，这不仅负责选择最佳可用传输机制(网络 socks 、服务器发送事件、长轮询)，而且还解决了客户端功能，并允许您通过在服务器端使用 dynamics 来调用它们.

那是一个非常基本的例子。我们正在发送表格的整个 HTML，这并不理想。但是，通过一些工作，您可以通知客户端何时对 API 进行 AJAX 调用以仅检索更改的表数据，而不是检索整个表。事实上，这是我在最近创建的网站上采用的一种方法，用于将新文章从服务器实时推送到客户端。