Обновить html атрибут элемента и css как функцию загрузки? - PullRequest
Новая
       10

Обновить html атрибут элемента и css как функцию загрузки?

0 голосов
/ 25 марта 2020

Я хочу обновить 'width' и 'aria-valuenow' bootstrap индикатор выполнения как загрузку функции, чтобы индикатор выполнения анимировался при загрузке функции.

aspx - индикатор выполнения: 

<div runat="server" id="progressBar" class="progress-bar" role="progressbar" 
     aria-valuenow="00" aria-valuemin="0" aria-valuemax="100" style="width:100%">
</div>

aspx.cs: 

public void UpdateBar(int width)
        {
            progressBar.Attributes.Add("style", $"width:{width}%");
            progressBar.Attributes.Add("aria-valuenow", $"{width}");
        }

public void function()
        {
            UpdateBar(0);
            function1();
            UpdateBar(10);
            function2();
            UpdateBar(20);
            .
            .
            .
            function10();
            UpdateBar(100);
        }

, но анимация не загружается. Но, скажем, если бы я сделал это: 

public void function()
        {
            UpdateBar(0);
            function1();
            .
            .
            .
            functio10();
            UpdateBar(10);

они прогресс-бар не меняется при загрузке функции, но когда функция завершит загрузку, индикатор выполнения будет обновляться в конце без анимации.

Я также пытался использовать javascript для создания функции и использовал клиентский скрипт для вызова функции - та же проблема, не обновляет индикатор выполнения до тех пор, пока функция не завершит sh загрузка.

javascript: 

function setProgressBar(input) {
            document.getElementById("ContentPlaceHolder1_progressBar").style.width = input + "%";
            document.getElementById("ContentPlaceHolder1_progressBar").setAttribute("aria-valuenow", input);
        }

aspx.cs: 

ScriptManager.RegisterStartupScript(this, GetType(), "setProgressBar", "setProgressBar(0);", true);
// or
ClientScript.RegisterStartupScript(this.GetType(), "setProgressBar", "setProgressBar(0);", true);
...