Considering that I have progress bar coded from this website https://www.geeksforgeeks.org/creating-progress-bar-using-javascript/
.
I have one razor page with cshtml
format and one razor page's code with cshtml.cs
.
Let's assume I have Index.cshtml
and Index.cshtml.cs
.
Index.cshtml
<style>
#Progress_Status {
width: 50%;
background-color: #ddd;
}
#myprogressBar {
width: 0%;
height: 35px;
background-color: #4CAF50;
text-align: center;
line-height: 32px;
color: black;
}
</style>
<div id="Progress_Status">
<div id="myprogressBar"></div>
</div>
<script>
function update(width) {
var element = document.getElementById("myprogressBar");
var identity = setInterval(scene, 10);
function scene() {
if (width >= 100) {
clearInterval(identity);
} else {
width++;
element.style.width = width + '%';
}
}
}
</script>
Index.cshtml.cs
public async void OnGet()
{
var progress = new Progress<int>(percent =>
{
//Do something
});
await Task.Run(() => TestFunction(progress));
}
public void TestFunction(IProgress<int> progress)
{
int LoopCount = 1;
while (LoopCount <= 100)
{
if (progress != null)
{
progress.Report(LoopCount);
}
LoopCount += 1;
}
}
My question is .. considering that I have a progressbar coded with the sample link above. How can I call the update function that exist in javascript in Index.cshtml.cs?
The usual upload file async that can update the progress bar exists in ASP.NET Core (stackoverflow or other website) does not work as this application does not involve with uploading file.
If this way of calling javascript function to update the progressbar is not recommended, is there any alternative way to do it?