CODEWITHSUNDEEP
c#jqueryhtmlloading
MarsOne
MarsOne

Reputation: 2186

How do i show a simple loading message on the screen while my page fetches data from server?

How do i display a simple loading message on a masked screen while my webpage loads.

I have a product comparison page which gets called with a button click. Now the comparison page takes approx 4 secs to load. This is because the Stored Procedure take about 3.5 secs to return a result.

So for these 4 secs after the user clicks the button we see the previous screen with only the spinner on the tag to indicate that the page is being redirected. Is there any way i can show a page mask where the current page is blacked out before the next page is loaded..

The way i redirect to the compare page is a c# function

protected void redirect_comparepage(object sender, EventArgs e)
{
    Response.Redirect("~/ProductComparison.aspx", false);
}

I tried to do the following on the comparison page however it does not work.

How to display a loading screen while site content loads Any suggestions?

Upvotes: 1

Views: 2206

Answers (2)

m-albert
m-albert

Reputation: 1100

How about something like this? I used a little jQuery.

Add an OnClientClick to your button control to start the magic...

<asp:Button runat="server" ID="SubmitButton" Text="Submit" 
OnClientClick="pleaseWait();" />

Include these new HTML elements to dim the screen and place a "PLEASE WAIT" in the middle of it. Make sure that the z-indexes used in these elements are higher than anything else on your page. 1000 & 1001 should do nicely...

<div id="modal" class="modal" style="background-color:rgba(64,64,64,0.5);width:100%;height:100%;z-index:1000;display:none">
</div>
<div id="wait" class="modal" style="width:300px;height:200px;margin:100px auto 0 auto;display:none;background-color:#fff;z-index:1001;text-align:center;">
    PLEASE WAIT...
</div>

Here is the OnClientClick function. It just uses JQuery to make the HTML elements appear...

function pleaseWait(){
    $(".modal").show();
    return true; // Can't remember if this is needed; but it won't hurt.
}

So when you click the button that starts the long data-process, the page will dim and a "PLEASE WAIT" appears in the middle until it refreshes.

If you aren't using or don't want to use jQuery, your pleaseWait() function would look something like this...

function pleaseWait(){
    document.getElementById("modal").style.display = "block";
    document.getElementById("wait").style.display = "block";
    return true; // Can't remember if this is needed; but it won't hurt.
}

Upvotes: 2

Adnan Ali
Adnan Ali

Reputation: 802

you can use use multithreading for this.

private void ThreadCall(){
            Thread thread = new Thread(new ThreadStart(FetchData));
            thread.Start();
        }
        private void FetchData(){
            //your code here
        }

put your fetching code in FetchData() and just call ThreadCall() from your main function..

it could have been given a better answer if you provide code and more information about your problem ..

Upvotes: 1

Related Questions