Animated Gif while processing...

I was wondering what the best approach would be to show an animated gif while I do some processing. I would assume threads would be involved, but Im looking for some good suggestions or tutorials... Thanks for your help!

Re: Animated Gif while processing...

Yes we have done it. for this u have to create a user control,basically this user control will be having a gif image of your loading and it will set its own position to the center of ther page...

u have to place the control in the update progress panel on ur aspx page like this..

<asp:UpdateProgress ID="UpdateProgressItemList" AssociatedUpdatePanelID="panelListHotel"

runat="server">

<tr>

<uc1:LoadImage ID="LoadImage1" runat="server" ContentHeight="100" ContentWidth="100">

</uc1:LoadImage>

</td>

</tr>

</table>

</ProgressTemplate>

Here LoadImage is the user control... now i wil show u pierce of code wot we have done in the LoadImage control

in the code behind

public partial class LoadImage : System.Web.UI.UserControl

{

protected int _contentWidth = 100;

protected int _contentHeight = 100;

protected string _contentCSSClass = "loading_image_main";protected string _backgroundCSSClass = "loading_image_black_overlay";

public int ContentWidth

{

get { return _contentWidth; }

set { _contentWidth = value; }

}

public int ContentHeight

{

get { return _contentHeight; }set { _contentHeight = value; }

}

public string BackgroundCSSClass

{

get { return _backgroundCSSClass; }

set { _backgroundCSSClass = value; }

}

public string ContentCSSClass

{

get { return _contentCSSClass; }set { _contentCSSClass = value; }

}

protected void Page_Load(object sender, EventArgs e)

{

}

and in the controls' aspx page place tihs code..only some javascript

< %@ Control AutoEventWireup="true" Codebehind="LoadImage.ascx.cs" Inherits="HotelBooking.App_Controls.UserControls.LoadImage"
    Language="C#" % >
< !--div id="backgroundDiv" style="height: 100%;" >
< /div >-- >
< %--< div id="contentDiv" >
    < img alt="Loading" src="App_Themes/Default/images/loader.gif" / >
< /div >--% >
< div id="contentDiv" style="border: 1px solid rgb(192, 147, 56); position: absolute; display: block; top: 262.5px; left: 402.5px; background-color: rgb(248, 240, 203); width: 200px; height: 50px; color: rgb(192, 147, 56);z-index:1000;" align="center" >
    < img src="App_Themes/Default/images/loader.gif" alt="Please wait..." id="imgBNWait" style="text-align: center; padding-top: 15px;" align="middle" >< br >Loading...

< /div >

< script language="javascript" type="text/javascript" >
/*call the function when the control loads.*/
//loadContentDiv('< %=ContentWidth% >', '< %=ContentHeight% >');
setCssClass('< %=BackgroundCSSClass% >', '< %=ContentCSSClass% >');

function loadContentDiv(width, height)
{
/*< img alt="Loading" src="App_Themes/Default/images/loader.gif" / >*/
    if (width != '' && parseInt(width) != NaN)
        width = parseInt(width, 10);
    else
        alert("Please provide valid Width.");

    if (height != '' && parseInt(height) != NaN)
        height = parseInt(height, 10);
    else
        alert("Please provide valid Height.");

/* Fudge factors for window decoration space.
   In my tests these work well on all platforms & browsers.*/
var w = width + 32;
var h = height + 96;
var wleft = (screen.width - w) / 2;
var wtop = (screen.height - h) / 2;

/* IE5 and other old browsers might allow a window that is
   partially offscreen or wider than the screen. Fix that.
   (Newer browsers fix this for us, but let's be thorough.)*/
if (wleft < 0) {
    w = screen.width;
    wleft = 0;
}
if (wtop < 0) {
    h = screen.height;
    wtop = 0;
}

var objDiv = document.getElementById('contentDiv')
if (objDiv != null || String(objDiv) != "undefined")
{
    /* Set left and top of the content div*/
    objDiv.style.left = wleft + "px";
    objDiv.style.top = wtop + "px";

    /* Set height and width of the content div*/
    objDiv.style.width = width + "px";
    objDiv.style.height = height + "px";

}

< /script >

</asp:UpdateProgress>

Re: Animated Gif while processing...

Hi,

http://www.asp.net/AJAX/Documentation/Live/overview/PartialUpdates.aspx

Hope The Above Sample Help You..

Re: Animated Gif while processing...

Hi gmcalab,

Using the UpdateProcess is a good choice. The gif picture can be placed inside the UpdateProcesss ProcessTemplate directly.

Here is my sample code:

.aspx file

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TestGifInProgress.aspx.vb"
    Inherits="UpdateProgress.TestGifInProgress" %>


<!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>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                <asp:Button ID="Button1" runat="server" Text="Button" />
                <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
                    <ProgressTemplate>
                        <asp:Image ID="Image1" runat="server" ImageUrl="~/fun.gif" />
                    </ProgressTemplate>
                </asp:UpdateProgress>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

.aspx.vb file

Public Partial Class TestGifInProgress
    Inherits System.Web.UI.Page

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click ', Timer1.Tick
        System.Threading.Thread.Sleep(3000)
        Label1.Text = Date.Now.ToString
    End Sub

End Class

The related tutorial: http://www.asp.net/learn/ajax-videos/video-123.aspx

Best regards,

Zhi-Qiang Ni

Re: Animated Gif while processing...

Thanks all three of you for your great examples. This helped me very much!