ASP.NET使用C#,在Repeater中自动刷新div

时间:2011-09-18 23:31:06

标签: c# javascript jquery asp.net

我使用Repeater控件列出线程。

还有一个带有Label控件的Div,用于在Repeater ItemTemplate中显示发布日期。

这是我现在正在做的事情,但它不是独立自动刷新特定div。它会自动刷新整个页面。

setInterval(function () { $(".refresh").load(location.href + " .refresh"); }, 5000);


<asp:Repeater ID="Repeater1" runat="server" OnItemDataBound="Repeater1_ItemDataBound">
      <HeaderTemplate>

      </HeaderTemplate>
      <ItemTemplate>
            ..........
            .............

          <div class="date"><asp:Label ID="post_date_LB" runat="server"></asp:Label></div> 
            //display the posted date for each thread, And I want it to auto refresh independently not the whole page.

          ...............
          ...................

      </ItemTemplate>
      <FooterTemplate>

      </FooterTemplate>
</asp:Repeater>

我希望发布的日期显示如下:10分钟前发布,1小时发布等等。

所以我需要一个自动刷新div。

有什么想法让转发器中的div可以独立自动刷新吗?

如果使用js或jquery,我认为DIV重复ID可能存在问题。

希望有一个解决方案。

提前致谢! :)

3 个答案:

答案 0 :(得分:0)

您可以使用AJAX。

您可以在UpdatePanel控件中独立刷新部件。您还需要使用一个脚本管理器控件。

它在您的AJAX工具箱中。

答案 1 :(得分:0)

将ajax updatepanel与计时器一起使用也是最好的想法。

但是如果你想使用jQuery和AJAX,这可能是对你有用的代码

    <asp:Repeater ID="Repeater1" runat="server" OnItemDataBound="Repeater1_ItemDataBound">
          <HeaderTemplate>

          </HeaderTemplate>
          <ItemTemplate>
                ..........
                .............

              <div class="date"><%-- <asp:Label ID="post_date_LB" runat="server"></asp:Label> --%> 
<div class="refresh" data-postid="<%= Eval("PostIDColumn")%>"><%= defaultTime(Eval("Postcreated")) %></div> <%-- Create method to count time defaultTime--%>
</div> 
                //display the posted date for each thread, And I want it to auto refresh independently not the whole page.

              ...............
              ...................

          </ItemTemplate>
          <FooterTemplate>

          </FooterTemplate>
    </asp:Repeater>

现在使用jQuery的JavaScript

setInterval(function () { $(".refresh").load(location.href + " .refresh"); }, 5000);

而不是上线

setInterval(/*It will loop and get the new time from server*/function () { $(".refresh").each(function(){
$(this).load("ajax.aspx",{postid:function(){return $(this).data('postid');}});
}); }, 5000);

Finlay我的建议是,如果只是显示时间线,那么不要使用AJAX调用。您可以在客户端脚本(javascript)本身中执行此操作。

setInterval(/*It will loop and get the new time from server*/
    function () { $(".refresh").each(function(){
        var current= $(this);
        var time=current.data('postedDateTime');
        current.html((collectTime(time) );
            }); }, 5000);

答案 2 :(得分:0)

如果您只想更新日期,但不收集任何其他数据,我建议您计算客户端的通过时间。

一旦初始发布日期发送到客户端,您可以通过javascript更新用户友好的时间信息(“刚刚”,“五分钟前”,“昨天”等)。这样你就可以在服务器上保存带宽和cpu。