Are you able to control a progress bar through C# ? (That isnt constantly running in the background)-CodePudding

I have a progress bar and i have some code in C# that defines classes "Lessons" "Courses". I want the progress bar to increase every time that the user completes a lesson in a course by pressing a button. I know that your able to control it with Javascript however i dont know that language and i wanted to know if A. If its even possible ? B. how to do it if so?

Some Code that might help

<div >
                    @Model.Course.Title
                </div>
                <div>
                    0/7 lessons completed
                </div>
                <div >
                    <div  role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                </div>

[HttpPost]
        public async Task<IActionResult> IncreaseBar()
        {
            int numlessons = 9;
            int percentageadd = 100 / numlessons;
            // Add percentageadd to progress bar
            return View();
        }

CodePudding user response：

You could pass a ViewModel to your View that contains the progress in percentage as an integer. Then in the progress bar you use the value from the ViewModel for the "aria-valuenow"

ViewModel

public class MyViewModel
{
    public int Progress { get; set; }
}

Controller

public class MyController
{
    public IActionResult IncreaseBar(MyViewModel viewModel)
    {
        if (viewModel is null)
        {
            viewModel = new MyViewModel();
            viewModel.Progress = 0;
        }
        else
        {
            viewModel.Progress  ;
        }

        return View("MyView", viewModel);
    }
}

View

@model MyProject.ViewModels.MyViewModel

<div >
    @Model.Course.Title
</div>
<div>
    0/7 lessons completed
</div>
<div >
    <div  role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<form asp-action="IncreaseBar">
    <input asp-for="Progress" hidden />
    <input type="submit" />
</form>

CodePudding user response：

This can be done by setting the style of the progress bar to this

<div Style="width: @Percentage%"></div>

And then you can Add a code block in the view at the top like this

@{ Code goes here }

Then inside the Code block you can write the code to work out the percentage if you haven't worked it out already.

A tip, the @ symbol allows you to import Variables from the code.