如何间隔刷新页面的一部分

Question

I have a page that above it I want to have a panel that automatically refresh every 5 minutes, and if a user has a message in his inbox show to him. What is the best solution for this?

Should I usel AJAX, jQuery, or JavaScript? My preferred solution is server side solution.

Answer 1

I would use Jquery to send an AJax request to the server to fetch the updated content. Upon receiving the content I would use JQuery again to update the markup.

You can set this up to trigger every 5 min using setInterval in Javascript

Answer 2

Hard to give a specific example without code. But you basically need to load the new content with an ajax request that is triggered by a timer.

setInterval(function(){
    $.ajax({
      url: "someUrlThatServesUpdatedContent.aspx",
      cache: false
    }).done(function( html ) {
      $("#results").html(html);
    });
}, 300000);

The above is just a simple example to point you in the right direction.

Edit: Here is an example of how to do the ajax call without JQuery https://stackoverflow.com/a/2792721/1059001

Answer 3

It's possible to do that with AJAX using method described by previous answers, but if you wish to have a server side solution I would recommend loading that part of the page in an iframe, with meta refresh:

<meta http-equiv="refresh" content="300">

This method however would make it difficult to communicate any events or user actions back to main page.

Answer 4

Since you are working with ASP.Net, you can also achieve this behavior by using a combination of the following:

1. ScriptManager or ScriptManagerProxy (if you have nested pages): Manages the ajax calls
2. UpdatePanel : Determines what gets updated. Controls nested within <ContentTemplate> are subject to partial updates
3. Triggers : Controls when the content is updated.

For your purpose, a Timer control can be used as a trigger to ensure that partial postbacks are triggered every 5 seconds:

<asp:ScriptManager ID="scriptManagerMain" runat="server"/>
<asp:Timer ID="timer" Interval="5000" runat="server"/>
<asp:UpdatePanel runat="server">
    <ContentTemplate>
        <asp:Panel ID="panelToBeUpdated" runat="server">
            <asp:Label ID="lblContent" runat="server" ></asp:Label>
        </asp:Panel>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="timer" />
    </Triggers>
</asp:UpdatePanel>