Improving Performance with the AJAX Update Panel

Certify and Increase Opportunity.
Be
Govt. Certified ASP.NET Programmer

Improving Performance with the AJAX Update Panel

The UpdatePanel control remove the requirement to refresh the whole page with each postback, which improves the user experience.

To implement the procedures in your own development environment you need:

  • Visual Studio or Visual Web Developer Express.
  • An AJAX-enabled ASP.NET Web site.

To use an UpdatePanel control

  1. Create a new page and switch to Design view.
  2. In the AJAX Extensions tab of the toolbox, double-click the Script Manager control to add it to the page.UpdatePanel Tutorial
  3. Double-click the Update Panel control to add it to the page.UpdatePanel Tutorial
  4. Click inside the Update Panel control and then in the Standard tab of the toolbox, double-click the Label and Button controls to add them to the Update Panel control.
    NoteNote
    Make sure that you add the Label and Button controls inside the Update Panel control.
  5. Set the Text property of the Label to Panel created.UpdatePanel Tutorial
  6. Double-click the Button control to add a handler for the button’s Click event.
  7. Add the following code to the Click handler, which sets the value of the label in the panel to the current time.
    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = "Refreshed at " +
            DateTime.Now.ToString();
    }
  8. Save your changes and press CTRL+F5 to view the page in a browser.
  9. Click the button.Notice that the text in the panel changes to display the last time the panel’s content was refreshed. This text is set in the button’s Click event handler.The example is styled to better show the region of the page that the Update Panel represents.
    <%@ Page Language="C#" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
    
        protected void Button1_Click(object sender, EventArgs e)
        {
            Label1.Text = "Refreshed at " +
                DateTime.Now.ToString();
        }
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Untitled Page</title>
        <style type="text/css">
        #UpdatePanel1 { 
          width:300px; height:100px;
         }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div style="padding-top: 10px">
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <fieldset>
                    <legend>UpdatePanel</legend>
                    <asp:Label ID="Label1" runat="server" Text="Panel created."></asp:Label><br />
                    <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
                    </fieldset>
                </ContentTemplate>
            </asp:UpdatePanel>
            <br />
            </div>
    
        </div>
        </form>
    </body>
    </html>

    The panel content changes every time that you click the button, but the whole page is not refreshed. By default, the Children As Triggers property of an Update Panel control is true. When this property is set to true, controls inside the panel participate in partial-page updates when any control in the panel causes a postback.

You can understand the benefits of the Update Panel control best by adding some controls to the page that are not included in the update panel. You can then see how their behavior differs from the controls inside the update panel.

To demonstrate the benefits of using UpdatePanel control

  1. Create a new page and switch to in Design view.
  2. In the AJAX Extensions tab of the toolbox, double-click the Script Manager control to add it to the page.
  3. Double-click the Update Panel control to add it to the page.UpdatePanel Tutorial
  4. Click inside the Update Panel control and then in the Standard tab of the toolbox, double-click a Calendar control to add it to the Update Panel control.

    >

    Note Note
    Make sure that you add the Calendar control inside the Update Panel control.

    UpdatePanel Tutorial

  5. Click outside the Update Panel control and then add a second Calendar control to the page.This control will not be part of the Update Panel control.UpdatePanel Tutorial
  6. Save your changes and then press CTRL+F5 view the page in a browser.
  7. Navigate to the previous or next month in the calendar that is inside the Update Panel control.The displayed month changes without refreshing the whole page.
  8. Navigate to the previous or next month in the calendar that is outside the Update Panel controlThe whole page is refreshed.The example is styled to better show the region of the page that the Update Panel represents.
    <%@ Page Language="C#" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
    
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>UpdatePanel Tutorial</title>
        <style type="text/css">
        #UpdatePanel1 { 
          width:300px;
         }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <fieldset>
                    <legend>UpdatePanel</legend>
                    <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
                    </fieldset>
                </ContentTemplate>
            </asp:UpdatePanel>
            <br />
            <asp:Calendar ID="Calendar2" runat="server"></asp:Calendar>    
        </div>
        </form>
    </body>
    </html>

By default, a postback control (such as a button) inside an Update Panel control causes a partial-page update. By default, a button or other control outside an Update Panel control causes the whole page to be refreshed, as you have seen.You can also configure a control outside the update panel to be a trigger that refreshes just the update panel.

To refresh of an UpdatePanel control with an external button

  1. Create a new page and switch to Design view.
  2. In the AJAX Extensions tab of the toolbox, double-click the Script Manager and Update Panel controls to add one of each control to the page.UpdatePanel Tutorial
  3. Click inside the Update Panel control, and then in the Standard tab of the toolbox, double-click the Label control to add it to the Update Panel control.
  4. Set the Text property of the label to Panel created.UpdatePanel Tutorial
  5. Click outside the Update Panel control and then add a Button control.UpdatePanel Tutorial
  6. Double-click the Button control to add a handler for the button’s Click event.
  7. Add the following code to the Click handler, which sets the value of the label in the panel to the current time.
    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = "Refreshed at " +
            DateTime.Now.ToString();
    }
  8. Switch to Design view, select the Update Panel, and then view the Properties window.UpdatePanel Tutorial

    >

    Note Note
    If the Properties window is not displayed, press F4.
  9. In the Triggers field, double-click the ellipsis (…) button.The UpdatePanelTrigger Collection Editor dialog box is displayed.UpdatePanel Tutorial
  10. Click Add to add a new trigger.
  11. In the ControlID field of the trigger properties, use the drop-down list to select Button1.UpdatePanel TutorialIn this example, the EventName property of the trigger was not specified. Therefore, the button’s default event (the Click event) will trigger the refresh of the Update Panel control.
  12. Click OK in collection editor.
  13. Save your changes and then press CTRL+F5 view the page in a browser.
  14. Click the button.The text in the panel changes to display the time that the panel’s content was refreshed.
  15. Click the button several more times.The time changes, but the whole page is not refreshed.Clicking the button outside the Update Panel refreshes the panel’s content because you configured the button to be a trigger for the Update Panel control. A button that is a trigger performs an asynchronous postback when you click it, and causes a refresh of the associated update panel. This behavior resembles the behavior of the first example in this tutorial, where the button was inside the Update PanelThe example is styled to better show the region of the page the Update Panel represents.
    <%@ Page Language="C#" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
    
        protected void Button1_Click(object sender, EventArgs e)
        {
            Label1.Text = "Refreshed at " +
                DateTime.Now.ToString();
        }
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>UpdatePanel Tutorial</title>
        <style type="text/css">
        #UpdatePanel1 { 
          width:300px;
         }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <fieldset>
                    <legend>UpdatePanel</legend>
                    <asp:Label ID="Label1" runat="server" Text="Panel created."></asp:Label><br />
                    </fieldset>
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="Button1" />
                </Triggers>
            </asp:UpdatePanel>
            <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" /></div>
        </form>
    </body>
    </html>

Get industry recognized certification – Contact us

Menu