UpdateProgress Control With UpdatePanel in AJAX


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 and click on the [Design] option and drag 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>
        <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>

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

img4.gif

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 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>

Step 10 : Now run the application by Pressing F5.

ima1.gif

Step 11 : When we click on the Add Record button then the following message is shown.

img2.gif

Step 12 : Now we define all require fields and click on the add record button.

img3.gif

Resources

Work with UpdatePanel Control in AJAX

Atlas - Visual Feedback Using the UpdateProgress Control

NumericUpDownExtender Control With UpdatePanel in AJAX

Put ASP.NET AJAX Timer and UpdatePanel with RssToolKit all in action

Up Next
    Ebook Download
    View all
    Learn
    View all