Displaying progress bar in asp.net mvc

Question

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

Answer 1

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;
       });;
}

}

Answer 2

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:

Result:

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.