Displaying progress bar in asp.net mvc

Santosh Umarani 81 Reputation points
2021-06-18T07:45:25.067+00:00

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

ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,138 questions
ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,244 questions
0 comments No comments
{count} votes

2 answers

Sort by: Most helpful
  1. Bruce Barker 801 Reputation points
    2021-06-18T15:29:54.34+00:00

    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;
           });;
    }
    
    }
    
    0 comments No comments

  2. Jerry Cai-MSFT 986 Reputation points
    2021-06-21T09:22:06.127+00:00

    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.