Show Loading Message while Upload Files in ASP.NETPost title

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.

Saturday, September 10, 2011