20 Feb 2013

Using AJAX Update Panels

Category:
  • Software Applications
  • Software Design & Development

An UpdatePanel can be used to enable partial-page postbacks within an ASP.NET page.  The contents of the UpdatePanel, which need to be encased in a ContentTemplate element, will be sent back to the server whilst the rest of the page will remain unchanged.  The data returned from the postback will then be rendered to the page using updates within the DOM (Document Object Model).

As long as the page contains a ScriptManager control and an UpdatePanel control partial-page postbacks can happen.

An UpdateProgress control can be added to an update panel to make it so loading symbols can be used to show when a partial postback is happening, thereby informing the user that an update is in progress.  The required loading symbol (of other HTML elements to be displayed) need to be placed within a ProgressTemplate element within the UpdateProgress control.

There are several advantages to using UpdatePanels, the main one of these is allowing just the posting back of areas of a page, therefore not having to post back a full page when any server side code needs to be run, this means that the speed of postback will be increased and items can still be edited within the rest of the page whilst the postback is occurring.

An example of the structure of an UpdatePanel with an associated UpdateProgress Control is shown below, the actual controls to be updated will be in the section marked “Rest of controls...”:

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">

        <ContentTemplate>

            <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID=" UpdatePanel1" DynamicLayout="true">

                <ProgressTemplate>

                    <div class="Loading">

                        <img src="../IconImages/loading-red.gif" />

                    </div>

                </ProgressTemplate>

            </asp:UpdateProgress>

Rest of controls...
        </ContentTemplate>
    </asp:UpdatePanel> 
    </asp:UpdatePanel>

Go Back

Please enter your details and we will aim to call you back the same day.