In this short article I will explain how to create a progress bar for ASP.NET websites. In order to update the progress bar I'm using an Ajax Update Panel and the Timer Control.
First of all I created an Ajax enabled Website project and dropped some controls at the web form. Here is the resulting Default.aspx page.
<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " href="http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="True" />
<div>
<atlas:TimerControl ID="TimerControl1" runat="server" OnTick="TimerControl1_Tick" Enabled=false Interval=2000>
</atlas:TimerControl>
</div>
<atlas:UpdatePanel ID="UpdatePanel1" runat="server" Mode="Conditional">
<Triggers>
<atlas:ControlEventTrigger ControlID=TimerControl1 EventName=Tick />
</Triggers>
<ContentTemplate>
<div style="background-color:Black; height:10px; width:300px">
<div id="bar" runat="server" style="height:10px; width:0px; background-color:Fuchsia">
</div>
</div>
<asp:Label ID="Label1" runat="server" Text="0 %"></asp:Label>
<br />
<br />
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Default.aspx" Visible="False">Reload Page</asp:HyperLink><br />
</ContentTemplate>
</atlas:UpdatePanel>
<asp:Button ID="Button1" runat="server" Text="Button" />
</form>
<script type="text/xml-script">
<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">http://schemas.microsoft.com/xml-script/2005">
<references>
</references>
<components>
</components>
</page>
</script>
</body>
</html>
Here are some details about the above code. To Update the progress bar I used an Ajax Timer Control. This timer calls the server method TimerControl1_Tick. The TimerControl1 has to be disabled at first.
<atlas:TimerControl ID="TimerControl1" runat="server" OnTick="TimerControl1_Tick" Enabled=false Interval=2000>
</atlas:TimerControl>
Then I created an UpdatePanel that is triggered by the TimerControl1 tick event. This means whenever the tick event of the TimerControl1 fires the UpdatePanel1 will be refreshed:
<atlas:UpdatePanel ID="UpdatePanel1" runat="server" Mode="Conditional">
<Triggers>
<atlas:ControlEventTrigger ControlID=TimerControl1 EventName=Tick />
</Triggers>
<ContentTemplate>
</ContentTemplate>
</atlas:UpdatePanel>
Last I used two div-elements to display the progress bar:
<div style="background-color:Black; height:10px; width:300px">
<div id="bar" runat="server" style="height:10px; width:0px; background-color:Fuchsia">
</div>
</div>
Next I placed a Button outside the UpdatePanel1 to submit the form and start the long running task:
<asp:Button ID="Button1" runat="server" Text="Button" />
When the user clicks the Button1 the form is posted to the server. Then the code behind creates a new Thread to execute the long running task. Next I started the thread and enabled the TimerControl1.
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
Session.Add("status", 0)
Dim objThread As New Thread(New System.Threading.ThreadStart(AddressOf DoTheWork))
objThread.IsBackground = True
objThread.Start()
Session("Thread") = objThread
Button1.Enabled = False
TimerControl1.Enabled = True
End Sub
The long running task is done in the function DoTheWork. Here is the code:
Protected Sub DoTheWork()
Dim i As Integer = 0
While i < 100
Thread.Sleep(500)
i = i + 1
Session("status") = i
End While
Dim objThread As Thread = CType(Session("Thread"), Thread)
objThread.Abort()
End Sub
The current status of the task is written into a session variable status. This session variable will be used in the TimerControl1_Tick event to update the progress bar. Here is the code for the tick event:
Protected Sub TimerControl1_Tick(ByVal sender As Object, ByVal e As System.EventArgs) Handles TimerControl1.Tick
Dim i As Integer = CType(Session.Item("status"), Integer)
If i = 100 Then
TimerControl1.Enabled = False
HyperLink1.Visible = True
End If
Label1.Text = i.ToString + " %"
Dim div As HtmlGenericControl = Me.FindControl("bar")
i = i * 3
div.Style.Item("width") = i.ToString + "px"
End Sub
First I convert the session variable status into an Integer. Next I check wether the task is finished (i=100). When this is true I disable the TimerControl1 again and enable an Hyperlink to reload the page. In any case I update the text value for Label1. And also I set the width for the inner div-element.
| You must Sign In to use this message board. | |||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||
