Server Intellect
 
Home   Asp.Net Tutorials   What's New   Newsletter   More Resources
 
 
  Categories
Advanced Technologies
AJAX
Internet Browsers
Controls
Database
Email
Error Handling
File
Graphics
Website Navigation
Network
Performance
User Interface and Themes
Validation
Visual Web Developer
Web Services
XML
Suggest Tutorial


Navigator: Home - Tutorials - User Interface and Themes - Making web progress bar using ASP.NET 2.0 and VB.NET
Making web progress bar using ASP.NET 2.0 and VB.NET


ASP.NET User Interface and Themes Tutorial

Web progress bar is a user friendly UI factor to web applicaion. In this tutorial, we will show you how to create a web progress bar using ASP.NET 2.0 and VB.NET.

Download the Full Working Version of this Project written with Visual Studio.NET VB.NET 2005 Here!

Looking for the C#.NET 2005 Version? Click Here!

Looking for more ASP.NET Tutorials? Click Here!

First, to create a  WebProgressBar.aspx  page and WebProgressBar.aspx.cs. Then import the System.Web.SessionState, System.Text and  System.Threading  namespaces.

The System.Web.SessionState namespace supplies classes and interfaces that enable storage of data specific to a single client within a Web application on the server. The session-state data is used to give the client the appearance of a persistent connection with the application. While the System.Threading namespace provides classes and interfaces that enable multithreaded programming.

Imports System.Web.SessionState
Imports System.Text
Imports System.Threading

In order to demo the progress bar clearly, we simulate a long task by using the Thread.Sleep method to block the current thread for the specified number of milliseconds. Each block represent the different state. The session state value will be changed after each block.

The method of showModalDialog is used to create a modal dialog box that displays the specified HTML of progress bar.

Private Sub LongTask()

Dim i As Integer
For i = 0 To 10
Thread.Sleep(1000)
Session("State") = i + 1
Next
Session("State") = 100
End Sub
Public Shared Sub OpenProgressBar(ByVal Page As System.Web.UI.Page)
Dim sbScript As New StringBuilder()

sbScript.Append(" " + ControlChars.Lf)
Page.RegisterClientScriptBlock("OpenProgressBar", sbScript.ToString())
End Sub

Button1_Click event is for starting the threads.

Public Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
Dim thread As New Thread(New ThreadStart(AddressOf LongTask))

thread.Start()
Session("State") = 1
OpenProgressBar(Me.Page)
End Sub

The front WebProgressBar.aspx page looks something like this:

<body>
<form id="form1" runat="server">
<fieldset>
<legend>WebProgressBar</legend>
<div>
<asp:Button id="Button1" runat="server" Text="Start Long Task!" OnClick="Button1_Click"></asp:Button>
</div></fieldset>
</form>
</body>


In order to show the progress strip, we created Progress.aspx page. The bar will be refershed based on the session states, therefore, we can show the progress. The code behind page is as follows.
Private state As Integer = 0

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not (Session("State") Is Nothing) Then
state = Convert.ToInt32(Session("State").ToString())
Else
Session("State") = 0
End If
If state > 0 AndAlso state <= 10 Then
Me.lblMessages.Text = "Processing..."
Me.panelProgress.Width = state * 30
Me.lblPercent.Text = state * 10 & "%"
Page.RegisterStartupScript("", " ")
End If
If state = 100 Then
Me.panelProgress.Visible = False
Me.panelBarSide.Visible = False
Me.lblMessages.Text = "Task Completed!"
Page.RegisterStartupScript("", " ")
End If
End Sub

The front progress.aspx page looks something like this:

<body>
<form id="Form1" method="post" runat="server">
<asp:Label id="lblMessages" runat="server"></asp:Label>
<asp:Panel id="panelBarSide" runat="server" Width="300px" BorderStyle="Solid" BorderWidth="1px"
ForeColor="Silver">
<asp:Panel id="panelProgress" runat="server" Width="10px" BackColor="Green"></asp:Panel>
</asp:Panel>
<asp:Label id="lblPercent" runat="server" ForeColor="Blue"></asp:Label>
</form>
</body>

The whole WebProgressBar.aspx for the code behind page is as follows.

Imports System.Web.SessionState
Imports System.Text
Imports System.Threading
Partial Class WebProgressBar
Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

End Sub
'simulate tase
'each simulation tase progress to different state
Private Sub LongTask()

Dim i As Integer
For i = 0 To 10
Thread.Sleep(1000)
Session("State") = i + 1
Next
Session("State") = 100
End Sub
Public Shared Sub OpenProgressBar(ByVal Page As System.Web.UI.Page)
Dim sbScript As New StringBuilder()

sbScript.Append(" " + ControlChars.Lf)
Page.RegisterClientScriptBlock("OpenProgressBar", sbScript.ToString())
End Sub
Public Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
Dim thread As New Thread(New ThreadStart(AddressOf LongTask))

thread.Start()
Session("State") = 1
OpenProgressBar(Me.Page)
End Sub
End Class

The whole progress.aspx for the code behind page is as follows.

Partial Class progress
Inherits System.Web.UI.Page Private state As Integer = 0 Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not (Session("State") Is Nothing) Then
state = Convert.ToInt32(Session("State").ToString())
Else
Session("State") = 0
End If If state > 0 AndAlso state <= 10 Then
Me.lblMessages.Text = "Processing..." Me.panelProgress.Width = state * 30 Me.lblPercent.Text = state * 10 & "%" Page.RegisterStartupScript("", " ")
End If If state = 100 Then
Me.panelProgress.Visible = False Me.panelBarSide.Visible = False Me.lblMessages.Text = "Task Completed!" Page.RegisterStartupScript("", " ")
End If
End Sub
End Class

Download the Full Working Version of this Project written with Visual Studio.NET VB.NET 2005 Here!

Looking for the C#.NET 2005 Version? Click Here!

Looking for more ASP.NET Tutorials? Click Here!



 
  Developer Resources







Server Intellect Rocks