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.
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.
Step 11 : When we click on the Add Record button then the following message is shown.
Step 12 : Now we define all require fields and click on the add record button.
Resources
Work with UpdatePanel Control in AJAX