UpdateProgress Control With UpdatePanel in AJAX

Davin Martyn
1y
90.1k
0
1

Article

Introduction

Ajax (Asynchronous JavaScript and XML) is a new web development technique for interactive websites. With the help of AJAX, we can develop web applications and retrieve small amounts of data from a web server. AJAX consists of a different type of technology.

JavaScript
XML
Asynchronous Call to the server

UpdateProgress

The UpdateProgress control provides status information about partial-page updates in UpdatePanel controls. You can customize the default content and the layout of the UpdateProgress control. To prevent flashing when a partial-page update is very fast, you can specify a delay before the UpdateProgress control is displayed.

Step 1. Open Visual Studio 2010.

Go to File->New->WebSite
Select ASP.NET Empty WebSite

Step 2. Go to Solution Explorer and right-click.

Select Add->New Item
Select WebForm
Default.aspx page open

Step 3. Go to Default.aspx page click on the [Design] option and drag the control from Toolbox.

Drag Panel, ScriptManager, TextBox, Label, UpdatePanel, RequireFieldValidator

Step 4. Now we define ContentTemplate for the UpdatePanel.

ContentTemplate

Code

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:Label ID="lblMessage" runat="server" EnableViewState="false" ForeColor="blue"></asp:Label>
        <table border="1">
            <tr>
                <td>Name</td>
                <td><asp:TextBox ID="TextBox1" runat="Server"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="Req1" runat="server" ControlToValidate="TextBox1" Text=" * Required"></asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
                <td>Address</td>
                <td><asp:TextBox ID="TextBox2" runat="Server"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox2" Text=" * Required"></asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
                <td>Phone</td>
                <td><asp:TextBox ID="TextBox3" runat="Server"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="TextBox3" Text=" * Required"></asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
                <td>City</td>
                <td><asp:TextBox ID="TextBox4" runat="Server"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="TextBox4" Text=" * Required"></asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
                <td><b>Notice "Please wait" message below after clicking button.</b></td>
                <td>
                    <asp:Button ID="btnSave" runat="Server" Text="Add Records" onclick="btnSave_Click" />
                </td>
            </tr>
        </table>
    </ContentTemplate>
</asp:UpdatePanel>

Step 5. Now go to the Default.aspx[design] page and drag an UpdateProgress control from the Toolbox.

Step 6. Now the following code is given below.

Code

<asp:UpdateProgress ID="Up1" runat="Server" AssociatedUpdatePanelID="UpdatePanel1">
    <ProgressTemplate>
        <span style="background-color:#66997A;"> <img src="img/images.jpg" alt="Please wait" width="100px"/> Please wait ...</span>
    </ProgressTemplate>
</asp:UpdateProgress>

Step 7. Now click on the button control and write some code.

Code

System.Threading.Thread.Sleep(3000);
lblMessage.Text = "Processing completed";

Step 8. Go to the default.aspx.cs option and write some code.

Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Threading;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }

    protected void btnSave_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3000);
        lblMessage.Text = "Processing completed";
    }
}

Step 9. Now the complete code is in Default.aspx[source] page is.

Code

<title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div style="background-color: #BBC6DD">
            <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <asp:Label ID="lblMessage" runat="server" EnableViewState="false" ForeColor="blue"></asp:Label>
                    <table border="1">
                        <tr>
                            <td>Name</td>
                            <td>
                                <asp:TextBox ID="TextBox1" runat="Server"></asp:TextBox>
                                <asp:RequiredFieldValidator ID="Req1" runat="server" ControlToValidate="TextBox1" Text=" * Required"></asp:RequiredFieldValidator>
                            </td>
                        </tr>
                        <tr>
                            <td>Address</td>
                            <td>
                                <asp:TextBox ID="TextBox2" runat="Server"></asp:TextBox>
                                <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox2" Text=" * Required"></asp:RequiredFieldValidator>
                            </td>
                        </tr>
                        <tr>
                            <td>Phone</td>
                            <td>
                                <asp:TextBox ID="TextBox3" runat="Server"></asp:TextBox>
                                <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="TextBox3" Text=" * Required"></asp:RequiredFieldValidator>
                            </td>
                        </tr>
                        <tr>
                            <td>City</td>
                            <td>
                                <asp:TextBox ID="TextBox4" runat="Server"></asp:TextBox>
                                <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="TextBox4" Text=" * Required"></asp:RequiredFieldValidator>
                            </td>
                        </tr>
                        <tr>
                            <td><b>Notice "Please wait" message below after clicking button.</b></td>
                            <td>
                                <asp:Button ID="btnSave" runat="Server" Text="Add Records" onclick="btnSave_Click" />
                            </td>
                        </tr>
                    </table>
                </ContentTemplate>
            </asp:UpdatePanel>
            <!-- UpdateProgress control -->
            <asp:UpdateProgress ID="Up1" runat="Server" AssociatedUpdatePanelID="UpdatePanel1">
                <ProgressTemplate>
                    <span style="background-color:#66997A;"> <img src="img/images.jpg" alt="Please wait" width="100px"/> Please wait ...</span>
                </ProgressTemplate>
            </asp:UpdateProgress>
        </div>
    </form>
</body>