Use multiple loading/waiting images within update panel in asp .net.

 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:

  
Name
Country
State
Age
 

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:

 
Name
Country
State
Age
 

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

 
        
            
                
Name
Country
State
Age
 


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:     

Use-multiple-loading-waiting-images-within-update-panel-in-asp-net

 
Best quality Asp .Net Ajax Control Toolkit tutorials.
your article is very simple and clear and helpful as usual thanks Anuj
23-Dec-2013 From  Hanan Abdelwahab
Thanks Hanan Abdelwahab for your supportive comments.
15-Jan-2014 From  Anuj
your article is clear simple and fast for learning thanks
17-Jan-2014 From  shakir
Good
29-May-2014 From  Rabi Sankar Paul
Welcome dear Rabi
4-Jun-2014 From  Anuj

Give your valuable comments.

Name
Email
Comment
8 + 7 =
 

About Us | Terms of Use | Privacy Policy | Disclaimer | Contact Us Copyright © 2012-2024 CodingFusion
50+ C# Programs for beginners to practice