与asp：Timer同时使用javascript函数

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>

我想问你，每当计时器说要更新而根本没有显示标签时，怎么可能每分钟更新我的加载栏。 我试图找到一种方法来将“ width”变量链接到asp，使其遵循与label相同的规则，但没有成功。

提前致谢。

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");
}

更多信息在此MSDN页面上 。

Answer 2

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

制作自己的进度条的另一种方法是使用HTML5 progress元素。 您可以在此处了解更多信息： http : //www.w3schools.com/TAgs/tag_progress.asp