UpdatePanel tutorial ASP.NET AJAX

Winforms Grid TreeList Control .NET 2.0/3.5

UpdatePanel tutorial ASP.NET AJAX
Section: Ajax	Rating: 5

CodeGod submitted this resource
The member's homepage is http://www.codegod.de
Visit the profile here

Attachment

Introduction

What ist the UpdatePanel in ASP.NET Ajax? The answer is easy: When adding an UpdatePanel-control to your page, you can achieve a partial-update of your page on a postback. Only the content in the UpdatePanel is refreshed, the other parts of the page remain unchanged. This topic explains, how you can setup an Ajax-enabled project and use the UpdatePanel control.

The prearrangements

First things first, we need to download the latest version (currently 1.0) of the ASP.NET Ajax Essential Components:

Download ASP.NET Ajax

After installation, you should be up and running for your first ASP.NET Ajax-enabled Website.

Create the first project

Open VS 2005 and select File->New->Website and then ASP.NET AjaxEnabled Web-Site:

Figure 1

Now the wizard generates a project with all necessary files and references to get you started with ASP.NET Ajax. The Web.Config contains all configurations you need for your Ajax-project and an instance of the asp:ScriptManager is added to the Default.aspx.

<body style="font-size: small; font-family: Arial">
    <form id="form1" runat="server">
        
        <!-- You need to add this ScriptManager -->
        <asp:ScriptManager ID="scriptMgr" runat="server" />

    </form>
</body>

The ScriptManager manages among other things the partial-page rendering with the UpdatePanel.

Our sample project

Figure 2

In our sample project we want to demonstrate the benfits of an UpdatePanel. Therefore we display a list of names in random order. The list is generated on a ButtonClick-event, but only the area of the UpdatePanel should be refreshed. While waiting for the result, we show an UpdateProgress, another ASP.NET Ajax Control.

First we drop the controls from the Tab Ajax Extensions to our page (Default.aspx):

Figure 3

First the UpdatePanel: Drop it onto the Form. Then drop an asp:Button, an asp:UpdateProgress and an asp:Label into the UpdatePanel. The result will look like this:

<body style="font-size: small; font-family: Arial">
    <form id="form1" runat="server">
        
        <!-- You need to add this ScriptManager -->
        <asp:ScriptManager ID="scriptMgr" runat="server" />
        
        <div>
            This example demonstrates the benefits of an UpdatePanel.
        </div>
        <br />
        
        <!-- Only this area is updated on PostBack -->
        <asp:UpdatePanel ID="updatePnl" runat="server">
            <ContentTemplate>
            
                <fieldset>
                <legend>Panel with random names</legend>
                <br />
                <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" 
                    Text="Generate random names"
                    Width="200px" />
                <br />
                <div style="height: 35px; padding-top: 5px; padding-bottom: 5px">
                <asp:UpdateProgress ID="UpdateProgress1" runat="server" 
                    AssociatedUpdatePanelID="updatePnl"
                    DisplayAfter="100" DynamicLayout="true">
                    
                    <ProgressTemplate>
                        <img border="0" src="img/loading.gif" />
                    </ProgressTemplate>
                    
                </asp:UpdateProgress>
                </div>
                <asp:Label Font-Bold=true ID="lblNames" runat="server" Text="">
                </asp:Label>
                <br />
                </fieldset> 
                   
            </ContentTemplate>
        </asp:UpdatePanel>
       
    </form>
</body>

For the ProgressTemplate (see tag above) which is shown while postback is running we use an animated gif.

Here is the logic for generating the list of names on the ButtonClick-event:

private readonly string[] NAMES = new string[] { 
    "Mark", "Tom", "Harry", "Sally", "Sandra", "Paul", "Anastasia" };

/// <summary>
/// This task is running 3 seconds pretending a long-running task
/// </summary>
private void FillListBoxRandom()
{
    lblNames.Text = "";

    List<String> names = new List<string>();

    int count = NAMES.Length;

    for (int i = 1; i < 30; i++)
    {
        System.Threading.Thread.Sleep( 100 );
        Random rnd = new Random();
        int number = rnd.Next(count);
        string selName = NAMES[number];
        if (!names.Contains(selName))
        {
            names.Add(selName);
        }
    }

    foreach( string name in names )
        lblNames.Text += name + "<BR />";

}
protected void Button1_Click(object sender, EventArgs e)
{
    FillListBoxRandom();
}

The project is attached, have fun with it. Further tutorials about ASP.NET Ajax will follow.

Reader-Comments: