Creating a Progress Bar for Uploads in DotNet (VB.NET)

[Joe Finsterwald]

Here is how to build a progress bar in dotnet that doesn't require any
third party components and uses JavaScript on the client side so it
doesn't require any additional post backs.

This script works perfect for uploads, or any operation that requires
a significant amount of processor time on the server.

-------------------------------------------------------------------------------
In the header of your aspx page...

<script language="JavaScript">
<!-- Begin

// This part switches the image on the onClick

if (document.images) {
nav1 = new Image();
// YOUR ANIMATED GIF GOES HERE!
nav1.src = "Images/processing.gif";
}

// Trick Javascript into generating a new thread

function threadStart(imgName) {
t = 200;
setTimeout("imgOn('" + imgName + "')", t)
}

// Function to activate image

function imgOn(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + ".src");
document.all.Label.style.visibility="hidden";
document.body.style.cursor = "wait";
}
}

// End -->
</script>

In the body... The first cell is an image of one pixel. The second
cell of the table (with the <div> tags) ensures that if you are
displaying an error
message or some other text it should disappear on the onClick event.

Image tag for the loading button...

<table>
<tr>
<td>
&nbsp;<img src="Images/dot.gif" border="0" Name="nav1">
</td>
<td>
<div id = Label>
<asp:label id="ErrorMessage" runat="server" Font-Bold="true"/>
</div>
</td>
</tr>
</table>


Here is the LinkButton that triggers the event (Pretend it's in a
datagrid)...

<aspataGrid>

<asp:LinkButton ID="ApproveIt" Runat="server" Text="cLICK ME"
CommandName="OK_Command" CausesValidation="False" Font-Size="9"
Font-Bold="true" ForeColor="#33cc66" />

</aspataGrid>
-------------------------------------------------------------------------------

In the code behind...

Sub DEDR_ItemCommand(ByVal sender As Object, ByVal e As
System.Web.UI.WebControls.DataGridCommandEventArgs) Handles
EventData.ItemCommand

'// Calls the Key ID Number of the Field from the DataGrid
Dim idNum As Integer = CType(e.Item.Cells(0).Text, Integer)

'// Some SQL operation goes here
If (e.CommandName = "OK_Command") Then
...Some operation on idNum
End If

End Sub

'// This writes the grid so that there is a confirm box attached to
each LinkButton in DataGrid

Sub EventData_ItemDataBound(ByVal sender As Object, ByVal e As
DataGridItemEventArgs) Handles EventData.ItemDataBound

Dim m As LinkButton

If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType =
ListItemType.AlternatingItem Then

m = CType(e.Item.FindControl("ApproveIt"), LinkButton)
m.Attributes.Add("onclick", "if (confirm('Approve this item?')
== true) threadStart('nav1');")

End If

End Sub