question

SantoshUmarani-1390 avatar image
0 Votes"
SantoshUmarani-1390 asked LanHuang-MSFT commented

Change of colour in progress bar

Hi,

I am using a progress bar in cshtml like below:

$("#progress-bar").progressbar({ value: 0 });
$("#progress-bar").progressbar("value", @ViewData["ProgressValue"]);

         <div>
             <div style="margin-top: 59px; margin-right: 250px; float: right; position: relative; width: 250px; height: 50px">
                 <div id="progress-bar" title="BuildCompleted" class="progress-bar"></div>
             </div>
         </div>

On the change of the value ViewData["ProgressValue"], progress bar changes in UI.
However, I need to change the color of the progress bar when the value changes. Like 10 to 20 % Red, 20 to 50 Yellow and above 50 Green.
Also, on hover on progress bar, value of the build competed should be displayed.
Can you please help me to achieve above two points ?
Kindly waiting for your response.

Thanks,
Santosh

dotnet-aspnet-mvc
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

LanHuang-MSFT avatar image
0 Votes"
LanHuang-MSFT answered

Hi @SantoshUmarani-1390,
Could you tell us if the @ViewData["ProgressValue"] is a real-time data?
If it's a real-time data, it needs to be monitored the "live" progress using SignalR.

Best regards,
Lan Huang


If the answer is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our  documentation  to enable e-mail notifications if you want to receive the related email notification for this thread.




5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

SantoshUmarani-1390 avatar image
0 Votes"
SantoshUmarani-1390 answered LanHuang-MSFT commented

Hi LanHuang-MSFT, Yes @ViewData["ProgressValue"] is a real-time data.
Can you please help on usage of SignalR?
Kindly waiting for your response.

Thanks,
Santosh

· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi @SantoshUmarani-1390,
First, you need to add SignalR to the project: PM>Install-Package Microsoft.AspNet.SignalR.
Second,start the connection and process the data sent from the server. Create a class called ProgressHub.cs,which inherits from Hub. Only with this class can SignalR communicate between the server and the client.
Specific examples can refer to: https://github.com/nirzaf/SignalRProgressBarSimpleExample.

Best regards,
Lan Huang

0 Votes 0 ·