Tutorial: How to create a page with two independently updating regions

Article
10/10/2017

In this tutorial, you will work with multiple UpdatePanel controls on a page. By using multiple UpdatePanel controls on a page, you can incrementally update regions of the page separately or together. For more information about partial-page updates, see Partial-page rendering overview.

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 create a page with two independently updating regions

On the File menu, point to New, and click ASPX.
Put your cursor in the Design view of your ASPX page.
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 a web.config file to your site 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.
In the Toolbox panel, under ASP.NET Controls, under AJAX, double-click the UpdatePanel control twice to add two UpdatePanel controls to the page.
With one of the UpdatePanel controls selected in your page, in the Tag Properties panel, set the UpdateMode property to Conditional. Repeat this step for the other UpdatePanel control.
In the Toolbox panel, under the ASP.NET Controls and Standard categories, drag a Label control into one of the UpdatePanel controls in Design view.
With the Label control selected in your page, in the Tag Properties panel, set the Text property to "Panel Created".
In the Toolbox panel, under the ASP.NET Controls and Standard categories, drag a Button control into the same UpdatePanel control that contains the Label control.
With the button selected in your page, in the Tag Properties panel, set the Text property to "Refresh Panel".
In the Toolbox panel, under the ASP.NET Controls and Standard categories, drag a Calendar control into the other UpdatePanel control in Design view.

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 Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = "Panel refreshed at " +
            DateTime.Now.ToString();
    }
</script>

<script runat="server" type="text/vb">
    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        Label1.Text = "Panel refreshed at " & _
            DateTime.Now.ToString()
    End Sub
</script>

In Code view, locate the tag <asp:Button runat="server" Text="Refresh Panel" id="Button1" /> and add "OnClick="Button1_Click" to the tag.
On the File menu, click Save.
Press F12 to preview the page in your web browser.

In your page in the web browser, click the button. The text in the panel changes to display the last time that the panel's content was refreshed. In the calendar, move to a different month. The time in the other panel does not change. The content of both panels is updated independently.

The following tables show the final page code:

<!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 2</title>
<script runat="server" type="text/c#">
    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = "Panel refreshed at " +
            DateTime.Now.ToString();
    }
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" id="ScriptManager1">
</asp:ScriptManager>
<asp:UpdatePanel runat="server" id="UpdatePanel1" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label runat="server" Text="Panel Created" id="Label1">
</asp:Label>
<asp:Button runat="server" Text="Refresh Panel" id="Button1" OnClick="Button1_Click"/>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel runat="server" id="UpdatePanel2" UpdateMode="Conditional">
<ContentTemplate>
<asp:Calendar runat="server" id="Calendar1">
</asp:Calendar>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>

<!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 2</title>
<script runat="server" type="text/vb">
    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        Label1.Text = "Panel refreshed at " & _
            DateTime.Now.ToString()
    End Sub
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" id="ScriptManager1">
</asp:ScriptManager>
<asp:UpdatePanel runat="server" id="UpdatePanel1" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label runat="server" Text="Panel Created" id="Label1">
</asp:Label>
<asp:Button runat="server" Text="Refresh Panel" id="Button1" OnClick="Button1_Click"/>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel runat="server" id="UpdatePanel2" UpdateMode="Conditional">
<ContentTemplate>
<asp:Calendar runat="server" id="Calendar1">
</asp:Calendar>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>

Review

This tutorial introduced the concept of using multiple UpdatePanel controls on a page. When UpdatePanel controls are not nested you can update each panel independently by setting the UpdateMode property to Conditional. (The default value of the UpdateMode property is Always. This causes the panel to refresh in response to any asynchronous postback.)

When panels are nested, the behavior is slightly different. If you set the UpdateMode property of both the outer control and the nested control to Conditional, the inner panel can be refreshed without refreshing the outer panel. However, if the outer update panel is refreshed, the inner update panel is refreshed also.

For additional tutorials on using UpdatePanel controls, see the links under How-to and Walkthrough Topics in the UpdatePanel Control Overview Cc295469.xtlink_newWindow(en-us,Expression.40).png topic in the MSDN library. Although those tutorials are written for Microsoft Visual Web Developer, you can follow them with few exceptions in Microsoft Expression Web.

Tutorial: How to create a page with two independently updating regions

To create a page with two independently updating regions

See also

Concepts

Additional resources