Serial Progress Bar for ASP.NET 3.5

1 Aug 2011   | Design · Programming

Tags: · · · · ·

There are many user controls in ASP.NET for a progress bar, but not so many for a progress bar that shows you how many steps are finished and how many are left to be completed. I call that a Serial Progress Bar, hence the title of the post.

So since I had to go ahead and do it my self, I thought I’d share it. Now for the style, I had to have different styles for finished (customSerialFlowBarFinished) and unfinished steps (customSerialFlowBarUnFinished). I also added a little salt into it and made the steps look like arrows, so I needed four more styles with images… two for every step (finished and unfinished), which where the start and the end of the arrow.

      

  1. /* Custom Serial Flow Bar*/
  2. .customSerialFlowBar
  3. {
  4. }
  5. .customSerialFlowBar .customSerialFlowBarFinished
  6. {
  7.     height:15px;
  8.     font-size:1px;
  9.     float:left;
  10. }
  11. .customSerialFlowBar .customSerialFlowBarFinished .customSerialFlowBarFinishedL
  12. {
  13.     height:15px;
  14.     font-size:1px;
  15.     float:left;
  16.     background:url(‘Images/flowFinishedL.png’) no-repeat scroll left center #2080C0;
  17.     width:49%;
  18. }
  19. .customSerialFlowBar .customSerialFlowBarFinished .customSerialFlowBarFinishedR
  20. {
  21.     height:15px;
  22.     font-size:1px;
  23.     float:left;
  24.     background:url(‘Images/flowFinishedR.png’) no-repeat scroll right center #2080C0;
  25.     width:49%;
  26. }
  27. .customSerialFlowBar .customSerialFlowBarUnFinished
  28. {
  29.     height:15px;
  30.     font-size:1px;
  31.     float:left;
  32. }
  33. .customSerialFlowBar .customSerialFlowBarUnFinished .customSerialFlowBarUnFinishedL
  34. {
  35.     height:15px;
  36.     font-size:1px;
  37.     float:left;
  38.     background:url(‘Images/flowUnFinishedL.png’) no-repeat scroll left center #A6CAF0;
  39.     width:49%;
  40. }
  41. .customSerialFlowBar .customSerialFlowBarUnFinished .customSerialFlowBarUnFinishedR
  42. {
  43.     height:15px;
  44.     font-size:1px;
  45.     float:left;
  46.     background:url(‘Images/flowUnFinishedR.png’) no-repeat scroll right center #A6CAF0;
  47.     width:49%;
  48. }

 

After the style the logic behind the code is easy. In order to render the serial progress bar you need the MaxValue which is the number of steps and the ItemValue which is the step you currently are now. You only have to calculable the percentage of the width of each step and go ahead and render the code.

 

  1.         Dim RtrnHtml As StringBuilder = New StringBuilder()
  2.         Dim ProcessDivWidth As Double = 0
  3.         Dim CssClassPrefix As String = “”
  4.         RtrnHtml.Append(“<div class='” & BarStyleClass & “‘>”)
  5.         Try
  6.             ‘calculate div width for every step (percentage)
  7.             ProcessDivWidth = Math.Round(((1) / (MaxValue) * 100)) – 1
  8.             ‘for all steps
  9.             For i = 1 To MaxValue Step 1
  10.                 ‘if step is in finished show finished
  11.                 If i <= ItemValue Then
  12.                     CssClassPrefix = “customSerialFlowBarFinished”
  13.                 Else
  14.                     CssClassPrefix = “customSerialFlowBarUnFinished”
  15.                 End If
  16.                 RtrnHtml.Append(“<div class='” & CssClassPrefix & “‘ style=’width:” & ProcessDivWidth & “%’>”)
  17.                 RtrnHtml.Append(“<div class='” & CssClassPrefix & “L’></div>”)
  18.                 RtrnHtml.Append(“<div class='” & CssClassPrefix & “R’></div></div>”)
  19.             Next
  20.             RtrnHtml.Append(“<div style=’clear:both;’></div>”)
  21.         Catch ex As Exception
  22.             RtrnHtml.Append(” “)
  23.         End Try
  24.         RtrnHtml.Append(“</div>”)

 

At the end you should end up with with something like this:

  1. <div class=”customSerialFlowBar”>
  2. <div class=”customSerialFlowBarFinished” style=”width:32%”><div class=”customSerialFlowBarFinishedL”></div><div class=”customSerialFlowBarFinishedR”></div></div>
  3. <div class=”customSerialFlowBarUnFinished” style=”width:32%”><div class=”customSerialFlowBarUnFinishedL”></div><div class=”customSerialFlowBarUnFinishedR”></div></div>
  4. <div class=”customSerialFlowBarUnFinished” style=”width:32%”><div class=”customSerialFlowBarUnFinishedL”></div><div class=”customSerialFlowBarUnFinishedR”></div></div>
  5. <div style=”clear:both;”></div>
  6. </div>

 

Now this is not the best way to do it, but since we are doing it the .NET 3.5 way we used a custom control for it. The optimal way would be to render all html through Javascript (maybe use jQuery) and if you want to pass values from the server, you can pass them with JSON through AJAX.

Leave a Reply

  

  

  

This site uses Akismet to reduce spam. Learn how your comment data is processed.