question

SantoshUmarani-1390 avatar image
0 Votes"
SantoshUmarani-1390 asked JerryCai-MSFT edited

Displaying progress bar in asp.net mvc

Hi,

I have written following controller :

public ActionResult ProgressBarDisplay()
{
int count = 0;

        // reads the count from database and updates the count

         double percentage = (count / 9) * 100; 

         return View(percentage);
     }

I have to read this in view and display in UI as progress bar (with the percentage value) using MVC.
Can anybody please let me know what is the best way to acheive this functionality ?
Kindly waiting for your response.

Thanks,
Santosh

dotnet-aspnet-core-mvcdotnet-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.

BruceBarker-8516 avatar image
0 Votes"
BruceBarker-8516 answered

Using a JavaScript timer, an Ajax call can be made to get the progress and update a progress bar. The standard template uses bootstrap which has a progress bar.

If you don’t like polling, you can use websockets so the server can use a timer to push notifications. If websockets are not supported by your serve, you can use signal/r. But probably polling is the best.

Change action to return json progress percent

Then something like:

 function updateProgress(percentage){
     if(percentage > 100) percentage = 100;
     $('#progressBar').css('width', percentage+'%');
     $('#progressBar').html(percentage+'%');
 }
    
 function fetchProgress() {
       fetch('status/progress’)
       .then(response => response.json())
       .then(data => {
             updateProgress(data);
              If (data < 100)
                   setTimeout(fetchProgress,1000;
        });;
 }
    
 }
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.

JerryCai-MSFT avatar image
0 Votes"
JerryCai-MSFT answered JerryCai-MSFT edited

Hi,SantoshUmarani

You can use jquery progress bar:

  public IActionResult Index()
         {
             double percentage = 48.3;
             return View(percentage);
         }

View:

 <input id="percentagevalue" type="hidden" value="@Model">
 <div id="progressbar"></div>

Script:

107552-image.png
Result:
107582-image.png
Best Regards,
Jerry Cai


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.


image.png (18.0 KiB)
image.png (1.1 KiB)
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.