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

Question

我创建了一个中继器,现在我想在每1分钟后刷新一次中继器.打击是我的代码:

 <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.但是我和其他一些人并不喜欢那些.它们通常会在以后出现问题,因为它们不能很好地与其他技术配合使用.它们也"昂贵",它们在客户端和服务器之间来回传输大量数据,耗费带宽和资源.

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()在近乎实时的时间调用客户端的功能,从服务器端启动它!这基本上是远程过程调用.因此,不仅要注意选择最佳的可用传输机制(Web socks,Server Sent Events,Long Polling),还要解析客户端功能,并允许您通过dynamics在服务器端使用它们来调用它们.

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