Click here to Skip to main content
13,201,452 members (72,710 online)
Rate this:
 
Please Sign up or sign in to vote.
See more:
Hi
I'm using visual studio 2010 .net framework 3.5.
In my project I'm importing excel file and it will take some time to load.
So at this point I want to show something like a wheel that shows loading is in progress and make the screen read only.you might have seen in some webpages.
so I want to know how to implement that.
Please help me in this regard
Posted 9-Jun-14 21:54pm
Smitha5292
Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 1

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


 
  .divBackMain
        {
            z-index: 99;
            position: fixed;
            top: 0px;
            left: 0px;
            height: 100%;
            width: 100%;
            background-color: black;
            opacity: 0.4;
        }
        .divLoader
        {
            position: fixed;
            top: 50%;
            left: 50%;
            z-index: 100;
            margin-left: -110px;
            margin-top: -110px;
            width: 220px;
            background-image: url('http://2.bp.blogspot.com/-XTR-_X58BHo/UE-v8fIayII/AAAAAAAACMw/fu8ZxR57xUU/s1600/LoadingGIF.gif');
        }
        #DivLoaderContainer
        {
            display:none;
            }

 function UploadData() {
 
            $("#DivLoaderContainer").fadeIn(); //set fadeIn whenever ypu want to show loader
            $.ajax({
                type: "POST",
                url: "PageName.aspx/MethodName",
                contentType: "application/json;charset=utf-8",
                data: {}, //Parameters
                dataType: "json",
                success: function (data) {
 
                    $("#DivLoaderContainer").fadeOut(); //set logout after finish all process 
 

                },
                error: function (result) {
 

 
                }
            });


<div id="DivLoaderContainer">
           <div class="divBackMain">
           </div>
           <div class="divLoader">
               <img src="http://2.bp.blogspot.com/-XTR-_X58BHo/UE-v8fIayII/AAAAAAAACMw/fu8ZxR57xUU/s1600/LoadingGIF.gif" />
           </div>
       </div>
  Permalink  
v3
Comments
HardikPatel89 10-Jun-14 6:47am
   
My 5+
Smitha5 10-Jun-14 6:48am
   
Hi Nirav,
Thanks for the reply.
I'm very new to Ajax.Could you please explain in detail like where to add the code that you have mentioned and how it works.
where exactly I need to call any functions.
Thanks in advance
Nirav Prabtani 10-Jun-14 6:56am
   
There is no role of ajax in my solution ,i have just creat loader using Div.
I have set visible using $("#DivLoaderContainer").fadeIn(); before ajax call
and after completion of ajax call it should be disappear using $("#DivLoaderContainer").fadeOut();
you can set fadeIn and fadeOut as per your need.. :)
Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 2

Hello Smitha, you can use UpdateProgress control provided by AJAX Extensions controls as follows:

ASPX changes:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
 
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
        <asp:Label ID="Label1" runat="server"></asp:Label>
    </ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server"
        AssociatedUpdatePanelID="UpdatePanel1">
    <ProgressTemplate>
        <img alt="please wait..." src="loder.gif" />
    </ProgressTemplate>
</asp:UpdateProgress>

Code behind changes:
protected void Button1_Click(object sender, EventArgs e)
{
    System.Threading.Thread.Sleep(5000);
    Label1.Text = "Page loaded at: " + DateTime.Now.ToString();
}

Here I have created a delay using Thread.Sleep() method.
  Permalink  
v2
Comments
Smitha5 11-Jun-14 6:02am
   
Thank you.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


Advertise | Privacy |
Web03 | 2.8.171020.1 | Last Updated 10 Jun 2014
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100