Partial-Page Update Sample Ajax Application

Article
12/04/2014

This tutorial creates a basic sample application that uses Microsoft Ajax features of ASP.NET. You can read more about Microsoft Ajax features in ASP.NET, what technical issues these features are designed to solve, and what the important Microsoft Ajax components are in the following introductory documents:

In this tutorial you will build an application that displays pages of employee data from the AdventureWorks sample database. The application uses the UpdatePanel control to refresh only the part of the page that has changed, without the page flash that occurs with a postback. This is referred to as a partial-page update. The sample application also uses the UpdateProgress control to display a status message while the partial-page update is processing.

Prerequisites

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

Microsoft Visual Studio 2005 or Microsoft Visual Web Developer Express.
An Ajax-enabled ASP.NET Web site.
The AdventureWorks sample database. You can download and install the AdventureWorks database from the Microsoft Download Center. (Search for "SQL Server 2005 Samples and Sample Databases (December 2006)").

Creating an ASP.NET Web Site

Web sites that you create in ASP.NET by default include support for Microsoft Ajax functionality.

To create an Ajax-enabled Web Site

Start Visual Studio.
In the File menu, click New Web Site.

The New Web Site dialog box is displayed.
Under Visual Studio installed templates, select ASP.NET Web Site.
Enter a location and a language, and then click OK.

Adding an UpdatePanel Control to an ASP.NET Web Page

After you create an ASP.NET Web site, you create an ASP.NET Web page that includes an UpdatePanel control. Before you add an UpdatePanel control to the page, you must add a ScriptManager control. The UpdatePanel control relies on the ScriptManager control to manage partial-page updates.

To create a new ASP.NET Web page

In Solution Explorer, right-click the name of the site and then click Add New Item.

The Add New Item dialog box is displayed.
Under Visual Studio installed templates, select Web Form.
Name the new page Employees.aspx and clear the Place code in separate file check box.
Select the language you want to use.
Click Add.
Switch to Design view.
In the AJAX Extensions tab of the toolbox, double-click the ScriptManager control to add it to the page.
Drag an UpdatePanel control from the toolbox and drop it underneath the ScriptManager control.

Adding Content to an UpdatePanel Control

The UpdatePanel control performs partial-page updates and identifies content that is updated independently of the rest of the page. In this part of the tutorial, you will add a data-bound control that displays data from the AdventureWorks database.

To add content to an UpdatePanel control

From the Data tab of the toolbox, drag a GridView control into the editable area of the UpdatePanel control.
In the GridView Tasks menu, click Auto Format.
In the Auto Format panel, under Select a scheme, select Colorful and then click OK.
In the GridView Tasks menu, select <New data source> from the Choose Data Source list.

The Data Source Configuration wizard is displayed.
Under Where will the application get data from, select Database and then click OK.
In the Configure Data Source wizard, for the Choose Your Data Connection step, configure a connection to the AdventureWorks database and then click Next.
For the Configure the Select Statement step, select Specify a custom SQL statement or stored procedure and then click Next.
In the SELECT tab of the Define Custom Statement or Stored Procedures step, enter the following SQL statement:
```
SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY LastName, FirstName
```
Click Next.
Click Finish.
In the GridView Tasks menu, select the Enable paging check box.
Save your changes, and then press CTRL+F5 to view the page in a browser.

Notice that there is no page flash when you select different pages of data. This is because the page is not performing a postback and updating the whole page every time.

Adding an UpdateProgress Control to the Page

The UpdateProgress control displays a status message while new content for an UpdatePanel control is being requested.

To add an UpdateProgress control to the page

From the AJAX Extensions tab of the toolbox, drag an UpdateProgress control onto the page and drop it underneath the UpdatePanel control.
Select the UpdateProgress control, and in the Properties window, set the AssociatedUpdatePanelID property to UpdatePanel1.

This associates the UpdateProgress control with the UpdatePanel control that you added previously.
In the editable area of the UpdateProgress control, type Getting Employees ... .
Save your changes, and then press CTRL+F5 to view the page in a browser.

If there is a delay while the page runs the SQL query and returns the data, the UpdateProgress control displays the message that you entered into the UpdateProgress control.

Adding a Delay to the Sample Application

If your application updates each page of data quickly, you might not see the content of the UpdateProgress control on the page. The UpdateProgress control supports a DisplayAfter property that enables you to set a delay before the control is displayed. This prevents the control from flashing in the browser if the update occurs very fast. By default, the delay is set to 500 milliseconds (.5 second), meaning that the UpdateProgress control will not be displayed if the update takes less than half a second.

In a development environment, you can add an artificial delay to your application to make sure that the UpdateProgress control is functioning as intended. This is an optional step and is only for testing your application.

To add a delay to the sample application

Inside the UpdatePanel control, select the GridView control.
In the Properties window, click the Events button.
Double-click the PageIndexChanged event to create an event handler.
Add the following code to the PageIndexChanged event handler to artificially create a three-second delay:
```
'Include three second delay for example only.
System.Threading.Thread.Sleep(3000)
```
```
//Include three second delay for example only.
System.Threading.Thread.Sleep(3000);
```
Note

The handler for the PageIndexChanged event intentionally introduces a delay for this tutorial. In practice, you would not introduce a delay. Instead, the delay would be the result of server traffic or of server code that takes a long time to process, such as a long-running database query.

Save your changes, and then press CTRL+F5 to view the page in a browser.

Because there is now a three-second delay every time that you move to a new page of data, you will be able to see the UpdateProgress control.

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    Protected Sub GridView1_PageIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs)
        'Include three second delay for example only.
        System.Threading.Thread.Sleep(3000)
    End Sub
</script>

<html xmlns="https://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>

    </div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:GridView ID="GridView1" runat="server" AllowPaging="True" CellPadding="4" DataSourceID="SqlDataSource1"
                    ForeColor="#333333" GridLines="None" OnPageIndexChanged="GridView1_PageIndexChanged">
                    <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                    <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
                    <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
                    <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
                    <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                    <AlternatingRowStyle BackColor="White" />
                </asp:GridView>
                <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
                    SelectCommand="SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY LastName, FirstName">
                </asp:SqlDataSource>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdateProgress ID="UpdateProgress1" runat="server">
            <ProgressTemplate>
                Getting employees...
            </ProgressTemplate>
        </asp:UpdateProgress>
    </form>
</body>
</html>

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    protected void GridView1_PageIndexChanged(object sender, EventArgs e)
    {
        //Include three second delay for example only.
        System.Threading.Thread.Sleep(3000);
    }
</script>

<html xmlns="https://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>

    </div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:GridView ID="GridView1" runat="server" AllowPaging="True" CellPadding="4" DataSourceID="SqlDataSource1"
                    ForeColor="#333333" GridLines="None" OnPageIndexChanged="GridView1_PageIndexChanged">
                    <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                    <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
                    <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
                    <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
                    <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                    <AlternatingRowStyle BackColor="White" />
                </asp:GridView>
                <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
                    SelectCommand="SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY LastName, FirstName">
                </asp:SqlDataSource>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdateProgress ID="UpdateProgress1" runat="server">
            <ProgressTemplate>
                Getting employees...
            </ProgressTemplate>
        </asp:UpdateProgress>
    </form>
</body>
</html>

Share via