Click here to Skip to main content
15,566,114 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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
Updated 17-Sep-19 12:23pm

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


CSS
.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;
          }

JavaScript
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) {



               }
           });


HTML
<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>
 
Share this answer
 
v3
Comments
HardikPatel.SE 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.. :)
Hello Smitha, you can use UpdateProgress control provided by AJAX Extensions controls as follows:

ASPX changes:
XML
<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:
C#
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.
 
Share this answer
 
v2
Comments
Smitha5 11-Jun-14 6:02am    
Thank you.
Y COMO SERIA EN VB.NET. POR FAVOR SU APOYO
 
Share this answer
 
Comments
CHill60 18-Sep-19 3:48am    
Si tiene una pregunta, utilice el enlace rojo "Ask a Question" que se encuentra arriba. No publique preguntas o comentarios como soluciones. Este es un sitio en idioma inglés.

If you have a question, use the red "Ask a question" link above. Do not post questions or comments as solutions. This is an English language site

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900