Show Loading Message while Upload Files in ASP.NET

Itorian
Posted by in ASP.NET category on for Beginner level | Points: 250 | Views : 9448 red flag

In this Article, we will learn how to display Loading.. message while uploading any files.


 Download source code for Show Loading Message while Upload Files in ASP.NET

Introduction

Actually, today while googling something over internet I found one interesting page provided by Microsoft itself. And I found there discussion that how to display Loading line message on web page. This system has some benefits from my point of view, as listed below:

(i) You do not need any external resources
(ii) You do not need Ajax as well as enough JavaScripts

How to use this?

Follow the steps for this:

Step 1

Place a FileUpload control on web form and a button.

Step2

In the click event of button place following codes.

protected void btnPostSubmit_Click(object sender, EventArgs e)

{

//Show loding message

Response.Write("<div id='mydiv' >");

Response.Write("_");

Response.Write("</div>");

Response.Write("<script>mydiv.innerText = '';</script>");

Response.Write("<script language=javascript>;");

Response.Write("var dots = 0;var dotmax = 10;function ShowWait()");

Response.Write("{var output; output = 'Loading';dots++;if(dots>=dotmax)dots=1;");

Response.Write("for(var x = 0;x < dots;x++){output += '.';}mydiv.innerText = output;}");

Response.Write("function StartShowWait(){mydiv.style.visibility = 'visible'; window.setInterval('ShowWait()',1000);}");

Response.Write("function HideWait(){mydiv.style.visibility = 'hidden';window.clearInterval();}");

Response.Write("StartShowWait();</script>");

Response.Write("</script>");

Response.Flush();

Thread.Sleep(10000);

//perform upload task

UploadToServer();

//show the message at the end

lblSuccessUpload.Text = "Thanks, success to upload.";

}


In the above code, I have used all scripts in the same button click even and also I am calling a method UploadToServer() method which will upload the files to server and at the end will display the success message. Now you are just one step behind to run this project.

Please note to use, System.Threading namespace in code behind.

Step 3

Now, place the following code inside your <head> tag.

<script>

HideWait();

</script>

This code will control procedure of loading messages. If you not use this, you will see the loading message when uploading completes, that is wrong.

INITIALLY in Page Load, HideWait() can throw error so you can keep this under try block.

The full credit of this coded resource goes to Microsoft. Find this post on Microsoft here.

HAVE A HAPPY CODING!!

Page copy protected against web site content infringement by Copyscape

About the Author

Itorian
Full Name: Abhimanyu Kumar Vatsa
Member Level: Starter
Member Status: Member
Member Since: 4/21/2011 3:54:53 AM
Country: India
Student of M.Tech IT | Microsoft MVP | Mindcracker MVP | IT Faculty | Blogger | Author
http://www.itorian.com
Abhimanyu Kumar Vatsa (Abhimanyu Kumar Singh) is a Microsoft MVP and Mindcracker (C# Corner) MVP (2010, 2011) and having experience in building web scale applications using Microsoft Technologies including ASP.NET, MVC, C#/VB, jQuery, JavaScript, Silverlight, SQL Server and many more web stuffs. He is also handy in non-Microsoft Technologies like PHP, ColdFusion etc but he's specility is always Microsoft. He love to work with Internet scale projects using Microsoft stuffs that has potential to change the every day use of technology. He love to blog and started it around June 2009 and because such blogging Microsoft awarded him MVP.

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)