Hope you have enjoyed my previous articles about Jquery Lightbox integration step by step tutorial and 3 Different ways to add AjaxControlToolkit in Asp .Net Website.
In this article we will see how to use multiple loading/waiting images within Updatepanel. Sometimes our website contains multiple controls which performs large code behind calculations or communication with the database. In some cases these tasks take some long time to perform their actions. At these situations website page hangs up until the background operation is not completed. This make website users confused and frustrated because most of the users are not familiar with the coding. They might assume that website is not working and they continuously hit website page buttons or refresh their website page.
To avoid this situation we can show users a waiting message or loading image during our control is doing its task in the background. The most common way to show wait message or loading image in asp .net is to use UpdatePanel and UpdateProgress and show users a wait message or loading image while background operation is in process. UpdatePanel and UpdateProgress provides us easy and quick way to solve this situation but they have some limitations too. The most important I found that is by using UpdateProgress we can show only one waiting image or loading message within a page to our users. This make users very difficult to view loading image or waiting message if our website page is long or too many controls.
To solve this problem in this article I'll demonstrate you how we can show multiple loading images or wait messages near controls which has begun background process. This will easily make website visitors understand that some operation is being executed in the background.
Step1: Create a new asp .net website.
Step2: Create a Default.aspx page and add required controls to it so that our page looks like:
Source:
Step3: Add a loading/waiting image to your website folder.
Step4: Add loading image near controls where you want to show during your background process. Make sure to assign different Id's to loading images and make then initially display=none.
E.g. <img src="ajaxRoundLoader.gif" style="display: none" id="loaderState" />
.aspx code will be like this:
Step5: We will now create Javascript functions to show loading or waiting image while control is pressed by the visitor.
Step6: Now it's time to call showLoader() Javascript function from our controls to display required images.
E.g.
Final .aspx code will be like this
Code Behid:
protected void ddlCountry_SelectedIndexChanged(object sender, EventArgs e)
{
Thread.Sleep(1000);
}
protected void ddlState_SelectedIndexChanged(object sender, EventArgs e)
{
Thread.Sleep(1000);
}
protected void btnSaveData_Click(object sender, EventArgs e)
{
Thread.Sleep(1000);
//==== Show success message.
lblSuccessMsg.Text = "Data successfully saved.";
//==== Clear form fields.
clearIputFields();
}
//==== Method to clear all the textboxes and dropdowns.
public void clearIputFields()
{
txtAge.Text = string.Empty;
txtName.Text = string.Empty;
ddlCountry.ClearSelection();
ddlState.ClearSelection();
}
Final Output:
