Question

<p><b> Completed: <asp:Label ID="completedPercentageLabel" runat="server"></asp:Label>%</b></p>    

<script>
        function updateBar()
        {
            var bar = document.getElementById("CompletionBar");
            var width = document.getElementById("completedPercentageLabel").innerText;
            bar.style.width = width + '%';
            document.getElementById("Percentage").innerHTML = width + '%';
        }
        setInterval(updateBar, 1000);
    </script>

    <asp:Timer ID="Timer1" runat="server" Interval="60000"></asp:Timer>

我想问你，每当Timer更新并且根本没有显示Label时，怎么可能每分钟都更新我的加载栏。我试图找到一种方法来链接＆＃34;宽度＆＃34;变量到asp让它遵守与标签相同的规则，但没有太大的成功。

提前致谢。

Answer 1

如果你想使用asp.net计时器控制，更好的选择是使用更新面板并在服务器端执行所有内容，如：

<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
    </Triggers>
    <ContentTemplate>
        <p id="CompletionBar" runat="server"></p>
        <p><b> Completed: 
          <asp:Label ID="completedPercentageLabel" runat="server"></asp:Label>%
        </b></p>
    </ContentTemplate>
</asp:UpdatePanel>


<asp:Timer ID="Timer1" runat="server" Interval="60000" OnTick="timer_tick"></asp:Timer>

然后在服务器端处理程序：

protected void Timer1_Tick(object sender, EventArgs e)
{
    completedPercentageLabel.Text = <NEW VALUE>;

    CompletionBar.Style.Add("width","<NEW VALUE>px");
}

有关详情，请访问this MSDN page。

Answer 2

您可以使用asp:HiddenField存储进度。然后你不必显示它。

制作自己的进度条的另一种方法是使用HTML5 progress元素。你可以在这里读更多关于它的内容： http://www.w3schools.com/TAgs/tag_progress.asp

用asp：Timer同时使用javascript函数

2 个答案: