Tutorial: How to refresh an UpdatePanel control at a timed interval

  • Article

In this walkthrough you will update part of a web page at a timed interval by using three ASP.NET AJAX server controls: the ScriptManager control, the UpdatePanel control, and the Timer control. Adding these controls to a page eliminates the need to refresh the whole page with each postback. Only the contents of the UpdatePanel control will be updated.

All of the ASP.NET AJAX controls require specific settings in a web.config file in order to function correctly. If you try to work with one of these controls, and your site doesn't contain the required web.config file, errors appear in the Design view of the page where the control would have appeared. In Design view, if you click a control that is in that state, Microsoft Expression Web will give you the option to create a new web.config file or update your existing web.config file.

To refresh an UpdatePanel control at a timed interval

  1. On the File menu, point to New, and click ASPX.

  2. Put your cursor in the Design view of your ASPX page.

  3. In the Toolbox panel, under ASP.NET Controls, under AJAX, double-click the ScriptManager control to add it to the page. If a dialog box appears that asks to add or update a web.config file to support the .NET Framework version 3.5, click Yes. If a dialog box appears that asks if you want to turn on a Visual Aid for non-visual controls, click Yes.

  4. In the Toolbox panel, under ASP.NET Controls, under AJAX, double-click the UpdatePanel control to add it to the page.

  5. Put your cursor inside the UpdatePanel control in Design view.

  6. In the Toolbox panel, under the ASP.NET Controls and AJAX categories, double-click the Timer control to insert it into the UpdatePanel control in your page.

    Cc295400.6d8eaf6e-b015-4738-b33f-31bac4a9b0ef(en-us,Expression.40).png

    Note

    The Timer control can work as a trigger either inside or outside an UpdatePanel control. This example shows how to use the Timer control inside an UpdatePanel control. For an example of using a Timer control as a trigger outside an UpdatePanel control, see Walkthrough: Using the ASP.NET Timer Control with Multiple UpdatePanel Controls Cc295400.xtlink_newWindow(en-us,Expression.40).png in the MSDN Library. Although that topic is written for Microsoft Visual Web Developer, you can follow it with few exceptions in Microsoft Expression Web.

  7. With the Timer control selected in your page, in the Tag Properties panel, set the Interval property to 10000. The Interval property is defined in milliseconds, so that setting the Interval property to 10,000 milliseconds will refresh the UpdatePanel control every 10 seconds.

    Note

    In this example, the timer interval is set to 10 seconds. That way, when you run the example, you do not have to wait a long time to see the results. However, each timer interval causes a postback to the server and causes network traffic. Therefore, in a production application, you should set the interval to the longest time that is still practical for your application.

  8. Put your cursor in the UpdatePanel control in Design view.

  9. In the Toolbox panel, under the ASP.NET Controls and Standard categories, double-click the Label control to insert it into the UpdatePanel control.

  10. With the Label control selected in your page, in the Tag Properties panel, in the Text box, type Panel not refreshed yet.

  11. Put your cursor outside the UpdatePanel control.

  12. In the Toolbox panel, under the ASP.NET Controls and Standard categories, double-click the Label control to add a second label to the page.

    Note

    Make sure that you add the second Label control outside the UpdatePanel control.

    Cc295400.e14384c1-a32c-4924-b012-dbbb44643f09(en-us,Expression.40).png

  13. In the Code view of your page, before the </head> tag, add one of the following code samples according to the Page Language of your page.

    <script runat="server" type="text/c#">
  protected void Timer1_Tick(object sender, EventArgs e)
    {
        Label1.Text = "Panel refreshed at: " +
DateTime.Now.ToLongTimeString();
    }
</script>

    <script runat="server" type="text/vb">
Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs)
Label1.Text = "Panel refreshed at: " + DateTime.Now.ToLongTimeString()
End Sub 
</script>

  14. In Code view, locate the tag <asp:Timer runat="server" id="Timer1" Interval="10000"> and add OnTick="Timer1_Tick" to the tag.

  15. On the File menu, click Save.

  16. Press F12 to preview the page in your web browser. Wait at least 10 seconds for the UpdatePanel panel to refresh. The text inside the panel changes to display the last time that the panel's content was refreshed. However, the text outside the panel is not refreshed.

The following tables show the final page code.

Visual Basic 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Page Language="VB" %>
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<script runat="server" type="text/vb">
Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs)
Label1.Text = "Panel refreshed at: " + DateTime.Now.ToLongTimeString()
End Sub 
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" id="ScriptManager1">
</asp:ScriptManager>
<asp:UpdatePanel runat="server" id="UpdatePanel1">
<ContentTemplate>
<asp:Timer runat="server" id="Timer1" Interval="10000" OnTick="Timer1_Tick"></asp:Timer>
<asp:Label runat="server" Text="Page not refreshed yet." id="Label1">
</asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Label runat="server" Text="Label" id="Label2"></asp:Label>
</form>
</body>
</html>
C# 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Page Language="C#" %>
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<script runat="server" type="text/c#">
  protected void Timer1_Tick(object sender, EventArgs e)
    {
        Label1.Text = "Panel refreshed at: " +
DateTime.Now.ToLongTimeString();
    }
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" id="ScriptManager1">
</asp:ScriptManager>
<asp:UpdatePanel runat="server" id="UpdatePanel1">
<ContentTemplate>
<asp:Timer runat="server" id="Timer1" Interval="10000" OnTick="Timer1_Tick"></asp:Timer>
<asp:Label runat="server" Text="Page not refreshed yet." id="Label1">
</asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Label runat="server" Text="Label" id="Label2"></asp:Label>
</form>
</body>
</html>

This walkthrough introduced the basic concepts of using a Timer control and an UpdatePanel control to enable partial-page updates. You must add a ScriptManager control to any page that contains an UpdatePanel control or Timer control. By default, a Timer control inside the panel will cause just the panel to refresh during an asynchronous postback. A Timer control outside a panel can cause the UpdatePanel to be refreshed if it is configured as a trigger for the panel.

See also

Concepts

Timer
UpdatePanel
ScriptManager
Partial-page rendering overview

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.