How to show spinner image while retrieving data

Article
2011-06-14

Question

_{Tuesday, June 14, 2011 5:35 PM}

Hello,

I'm trying to modify my code below and remove the button completely and have its function happen automatically when the page loads. Is there a way to do this or do I need to look at AJAX?

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Toolbar.aspx.cs" Inherits="Toolbar" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script type="text/javascript">
        function UpdateImg(ctrl, imgsrc) {
            var img = document.getElementById(ctrl);
            img.src = imgsrc;
        }
        function Loading(b) {
            if (b == true) {
                document.getElementById("<%=ibSpinning.ClientID%>").style.visibility = "visible";
            }
            else {
                document.getElementById("<%=ibSpinning.ClientID%>").style.visibility = "hidden";
            }
        }
    </script>
</head>
<body id="body1" runat="server">
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="Button1" OnClientClick="Loading(true);" OnClick="Button1_Clicked" Text="click me" runat="server" />
    </div>
        <asp:Table ID="Table1" runat="server">
   <asp:TableRow>
                <asp:TableCell Width="21">
                    <asp:Image runat="server" ID="ibSpinning" ImageUrl="~/Images/spinning.gif"></asp:Image>
                </asp:TableCell>
                <asp:TableCell BackColor="#888888">
                    <asp:Image runat="server" ID="ib1" Width="1" ImageUrl="~/Images/noImage.gif"></asp:Image>
                </asp:TableCell>
    <asp:TableCell Width="21" HorizontalAlign="Right">
                    <asp:Label ID="lbl1" runat="server" Text=""></asp:Label>
    </asp:TableCell>
                <asp:TableCell BackColor="#888888">
                    <asp:Image runat="server" ID="ib2" Width="1" ImageUrl="~/Images/noImage.gif"></asp:Image>
                </asp:TableCell>
    <asp:TableCell Width="21" HorizontalAlign="Right">
     <asp:Label ID="lbl2" runat="server" Text=""></asp:Label>
    </asp:TableCell>
                <asp:TableCell BackColor="#888888">
                    <asp:Image runat="server" ID="ib3" Width="1" ImageUrl="~/Images/noImage.gif"></asp:Image>
                </asp:TableCell>
    <asp:TableCell Width="21" HorizontalAlign="Right">
     <asp:Label ID="lbl3" runat="server" Text=""></asp:Label>
    </asp:TableCell>
                <asp:TableCell BackColor="#888888">
                    <asp:Image runat="server" ID="ib4" Width="1" ImageUrl="~/Images/noImage.gif"></asp:Image>
                </asp:TableCell>
    <asp:TableCell Width="21" HorizontalAlign="Right">
     <asp:Label ID="lbl4" runat="server" Text=""></asp:Label>
    </asp:TableCell>
                <asp:TableCell BackColor="#888888">
                    <asp:Image runat="server" ID="ib5" Width="1" ImageUrl="~/Images/noImage.gif"></asp:Image>
                </asp:TableCell>
    <asp:TableCell Width="21" HorizontalAlign="Right">
     <asp:Label ID="lbl5" runat="server" Text=""></asp:Label>
    </asp:TableCell>
                <asp:TableCell BackColor="#888888">
                    <asp:Image runat="server" ID="ib6" Width="1" ImageUrl="~/Images/noImage.gif"></asp:Image>
                </asp:TableCell>
    <asp:TableCell Width="21" HorizontalAlign="Right">
     <asp:Label ID="lbl6" runat="server" Text=""></asp:Label>
    </asp:TableCell>
                <asp:TableCell BackColor="#888888">
                    <asp:Image runat="server" ID="ib7" Width="1" ImageUrl="~/Images/noImage.gif"></asp:Image>
                </asp:TableCell>
    <asp:TableCell Width="21" HorizontalAlign="Right">
     <asp:Label ID="lbl7" runat="server" Text=""></asp:Label>
    </asp:TableCell>
                <asp:TableCell BackColor="#888888">
                    <asp:Image runat="server" ID="ib8" Width="1" ImageUrl="~/Images/noImage.gif"></asp:Image>
                </asp:TableCell>
    <asp:TableCell Width="21" HorizontalAlign="Right">
     <asp:Label ID="lbl8" runat="server" Text=""></asp:Label>
    </asp:TableCell>
   </asp:TableRow>
  </asp:Table>
    </form>
</body>
</html>

using System;
using System.Collections;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Text.RegularExpressions;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Globalization;
using System.IO;
using LMS2.components;

public partial class Toolbar : System.Web.UI.Page
{
string sTagname = string.Empty;
string sDevice = string.Empty;
string sLocation = string.Empty;
string sArea = string.Empty;
string sRegion = string.Empty;
string sDatabaseName = string.Empty;

protected void Page_Load(object sender, EventArgs e)
{
  Response.Cache.SetCacheability(HttpCacheability.NoCache);
  body1.Attributes.Add("onload", "Loading(false)");
  Button1.Attributes.Add("onclick", "setTimeout(\UpdateImg('" + ibSpinning.ClientID + "','Images/spinning.gif');\,50);");

  sTagname = Request.QueryString["Tagname"] != null ? Request.QueryString["Tagname"] : string.Empty;
  sDevice = Request.QueryString["Device"] != null ? Request.QueryString["Device"] : string.Empty;
  sLocation = Request.QueryString["Location"] != null ? Request.QueryString["Location"] : string.Empty;
  sArea = Request.QueryString["Area"] != null ? Request.QueryString["Area"] : string.Empty;
  sRegion = Request.QueryString["Region"] != null ? Request.QueryString["Region"] : string.Empty;
  if (!IsPostBack)
  {
   GetData();
  }
}

protected void Button1_Clicked(object sender, EventArgs e)
{
GetData();
}

protected void GetData()
{
DataSet dsWork = new DataSet();
string error = string.Empty;

  dsWork = SASWrapper.InitializeWebPage(string.Empty, string.Empty);
  if (dsWork != null && dsWork.Tables.Count > 0)
  {
   DataTable dt = dsWork.Tables[0];
   if (dt.Columns.Contains("Result"))
   {
    foreach (DataRow row in dt.Rows)
     if (row["Name"].ToString() == "DatabaseName") sDatabaseName = row["Result"].ToString();
   }
  }

  dsWork = Wrapper.QueryStoredProc("ToolbarSelect", new string[] { "@Tagname", "@Device", "@Location", "@Area", "@Region" }, new string[] { sTagname, sDevice, sLocation, sArea, sRegion }, sDatabaseName, ref error);
  if (dsWork != null && dsWork.Tables.Count > 0 && dsWork.Tables[0].Rows.Count > 0)
  {
   lbl1.Text = dsWork.Tables[0].Rows[0][0].ToString();
   lbl2.Text = dsWork.Tables[0].Rows[0][1].ToString();
   lbl3.Text = dsWork.Tables[0].Rows[0][2].ToString();
   lbl4.Text = dsWork.Tables[0].Rows[0][3].ToString();
   lbl5.Text = dsWork.Tables[0].Rows[0][4].ToString();
   lbl6.Text = dsWork.Tables[0].Rows[0][5].ToString();
   lbl7.Text = dsWork.Tables[0].Rows[0][6].ToString();
   lbl8.Text = dsWork.Tables[0].Rows[0][7].ToString();
  }
}
}

All replies (3)

_{Thursday, June 16, 2011 12:03 PM ✅Answered}

Hi,

You could do that as follow:

1. Create a user control:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ucloading.ascx.cs" Inherits="ajax_load_ucloading" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Panel ID="pnlProgress" runat="server" CssClass="modalpopup">
    <div class="popupcontainerLoading">
        <div class="popupbody">
            <table width="100%">
                <tr>
                    <td align="center">
                        <asp:Image ID="imgProgress" runat="server" ImageUrl="~/images/ajax_loader.gif"/>
                    </td>
                    <td valign="middle">
                        <asp:Label ID="lblLoading" runat="server" Text='please wait'
                            Font-Bold="true"></asp:Label>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</asp:Panel>
<asp:LinkButton ID="LinkButton5" runat="server" Text=""></asp:LinkButton>
<asp:ModalPopupExtender ID="mpeProgress" runat="server" TargetControlID="LinkButton5"
    X="500" Y="0" PopupControlID="pnlProgress" BackgroundCssClass="modalBackground">
</asp:ModalPopupExtender>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class ajax_load_Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void Button_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3000);
    }
}

2. Include the usercontrol where you want to show spinner image

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="ajax_load_Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<%@ Register TagPrefix="uc1" TagName="ajax_load" Src="~/ajax load/ucloading.ascx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .modalBackground
        {
            background-color: Gray;
            filter: alpha(opacity=70);
            opacity: 0.7;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>        
        <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
            <ContentTemplate>
                <%=DateTime.Now.ToString() %>
                <br />
                <asp:Button ID="Button2" runat="server" Text="Refresh Panel" OnClick="Button_Click" />
                <br />
                <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
            <ProgressTemplate>
                <uc1:ajax_load id="ajax_load1" runat="server">
                </uc1:ajax_load>                
            </ProgressTemplate>
        </asp:UpdateProgress>
    </div>
    </form>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class ajax_load_Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void Button_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3000);
    }
}

_{Tuesday, June 14, 2011 5:44 PM}

I am not 100% sure that I am following you but you may want to look at update progress

http://msdn.microsoft.com/en-us/library/bb386421.aspx

_{Tuesday, June 14, 2011 11:23 PM}

Hi, Please refer this

http://encosia.com/easy-incremental-status-updates-for-long-requests/

http://mattberseth.com/blog/2007/07/modalpopup_as_an_ajax_progress.html

Share via

How to show spinner image while retrieving data

Question

All replies (3)

Additional resources