ASP.NET - loading image - Asked By msakt on 21-May-12 12:31 AM

in a page page_load have 4 function..so many time take for complete this page_load..so i want loading image for tis time..when i click menu button for this page show loading image..how can i set
Jitendra Faye replied to msakt on 21-May-12 12:39 AM
To show image you can use UpdateProgress in your page.

Use UpdateProgress like this-

<body>
    <form id="form1" runat="server">
      <asp:ScriptManager ID="ScriptManager1" runat="server" />
      <asp:UpdateProgress runat="server" id="PageUpdateProgress">
        <ProgressTemplate>
          Loading...
        </ProgressTemplate>

      </asp:UpdateProgress>
      <asp:UpdatePanel runat="server" id="Panel">
        <ContentTemplate>
          <asp:Button runat="server" id="UpdateButton" onclick="UpdateButton_Click" text="Update" />
        </ContentTemplate>
      </asp:UpdatePanel>
    </form>
</body>

The following method should be added to your CodeBehind file:
protected void UpdateButton_Click(object sender, EventArgs e)
{
    System.Threading.Thread.Sleep(5000);
}

 
Hope this will help you.

LIJO PHILIP replied to msakt on 21-May-12 12:50 AM
Hi,

for this you have to impliment AJAX.

<asp:UpdateProgress ID="uprgWorkRequest"  AssociatedUpdatePanelID="DeptPanel" runat="server">
 <ProgressTemplate>


<div id="IMGDIV1" align="center" valign="middle" runat="server" style="position: absolute;visibility:visible;vertical-align:middle;border-style:none;border-color:black;background-color:transparent;">


  <asp:Image ID="Image1" runat="server" ImageUrl="Images/loading.gif" />Loading...


   </div>


  </ProgressTemplate>


 </asp:UpdateProgress>


 
Somesh Yadav replied to msakt on 21-May-12 01:05 AM
Hi,

try this below code, this uses modal popup with ajax and its shows the loading process image

In css class:

.divModalBackground
{
filter: alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5;
width:100%;
background-color: #999988;
position: absolute;
top: 0px;
left: 0px;
z-index: 800;
}

In aspx page:
<asp:Panel ID="Panel1" runat="server" Height="900px" Width="100%" CssClass="divModalBackground" Visible="true" >
<asp:Image runat="Server" ID="ImageLoader" CssClass="LoadingProgress" ImageUrl="../../App_Themes/Black/images/ajax-loader.gif" />
</asp:Panel>


In aspx.cs page I put the code like this:
//to show modal popup at page startup
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
Panel1.Visible = true;
}

In aspx page place this
// to clear the modal background when page load complete, place this code at the end of your page just before the end of the form tag
<script type="text/javascript" >
function init()
{
var objdiv=document.getElementById('<%=Panel1.ClientID%>')
if(objdiv)
{
objdiv.style.visibility = 'hidden';
}
}

init();
</script>



http://aspboss.blogspot.com/2010/03/how-to-show-page-loading-progress-with.html
kalpana aparnathi replied to msakt on 21-May-12 06:43 AM
hi,

Put your button in an update panel.Drop an UpdateProgress to your webform and associate this with your updatepanel

<asp:UpdatePanel ID="Up1" runat="server">
<ContentTemplate>
<asp:Button ID="Btn1" runat="server" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server"
AssociatedUpdatePanelID="UpdatePanel1">
</asp:UpdateProgress>

Create a template for your "Loading" text to be shown when you click the button and put that inside the updateprogress's <ProgressTemplate> tag

<ProgressTemplate>
<div>loading</div>
</ProgressTemplate>

you can add the some style like position absolute, etc to the template inorder to see this is in stylish.

Regards,
dipa ahuja replied to msakt on 21-May-12 03:09 PM
   <asp:ScriptManager ID="ScriptManager2" runat="server" />
    <asp:UpdateProgress runat="server" ID="PageUpdateProgress">
      <ProgressTemplate>
         <asp:Image ID="Image1" AlternateText="Loading..." runat="server" />
        </div>
      </ProgressTemplate>
    </asp:UpdateProgress>
    <asp:UpdatePanel runat="server" ID="Panel">
      <ContentTemplate>
 <asp:Button runat="server" ID="Button1" OnClick="Button1_Click" Text="Display" />
      </ContentTemplate>
    </asp:UpdatePanel>
 
protected void Button1_Click(object sender, EventArgs e)
{
  //Code of buttonClick
 
  //display loading symbol for 3 sec
  System.Threading.Thread.Sleep(3000);
}