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.
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. Try Server Intellect for Windows Server Hosting. Quality and Quantity!
| Private Sub LongTask() Dim i As Integer End SubFor i = 0 To 10 Thread.Sleep(1000) NextSession("State") = i + 1 Session("State") = 100 Public Shared Sub OpenProgressBar(ByVal Page As System.Web.UI.Page) Dim sbScript As New StringBuilder() End Sub sbScript.Append(" " + ControlChars.Lf) Page.RegisterClientScriptBlock("OpenProgressBar", sbScript.ToString()) |
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)) End Sub thread.Start() Session("State") = 1 OpenProgressBar(Me.Page) |
Need help with Windows Dedicated Hosting? Try Server Intellect. I'm a happy customer!
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> |
I just signed up at Server Intellect and couldn't be more pleased with my Windows Server! Check it out and see for yourself.
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()) End Sub Else Session("State") = 0 End IfIf state > 0 AndAlso state <= 10 Then Me.lblMessages.Text = "Processing..." End IfMe.panelProgress.Width = state * 30 Me.lblPercent.Text = state * 10 & "%" Page.RegisterStartupScript("", " ") If state = 100 Then Me.panelProgress.Visible = False End IfMe.panelBarSide.Visible = False Me.lblMessages.Text = "Task Completed!" Page.RegisterStartupScript("", " ") |
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 End Class 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 End SubFor i = 0 To 10 Thread.Sleep(1000) NextSession("State") = i + 1 Session("State") = 100 Public Shared Sub OpenProgressBar(ByVal Page As System.Web.UI.Page) Dim sbScript As New StringBuilder() End SubsbScript.Append(" " + ControlChars.Lf) Page.RegisterClientScriptBlock("OpenProgressBar", sbScript.ToString()) Public Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Dim thread As New Thread(New ThreadStart(AddressOf LongTask)) End Subthread.Start() Session("State") = 1 OpenProgressBar(Me.Page) |
We are using Server Intellect and have found that by far, they are the most friendly, responsive, and knowledgeable support team we've ever dealt with!
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 End Class If Not (Session("State") Is Nothing) Then End Substate = 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 |
No comments:
Post a Comment