Таймер и UpdatePanel в ASP.NET

Question

я пытаюсь создать таймер в asp.net

Public Class _Default 
Inherits System.Web.UI.Page 
Dim min As Integer 
Dim sec As Integer 
Dim hr As Integer 
Dim totalTime As Integer 
Dim timerStr As String 

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load 
    totalTime = 5340 
    hr = Math.Floor(totalTime/3600) 
    min = 30 
    sec = totalTime Mod 60 
    timerStr = String.Format("{0:00}:{1:00}:{2:00}", hr, min, sec) 
    label1.Text = timerStr 
End Sub 


Protected Sub Timer1_Tick(ByVal sender As Object, ByVal e As EventArgs) 
    Display() 
    label1.Text = timerStr 
End Sub 
Protected Sub Display() 
    totalTime -= 1 
    hr = Math.Floor(totalTime/3600) 
    sec = totalTime Mod 60 
    If sec = 0 Then 
     min = (totalTime/60) Mod 60 
    End If 
    timerStr = String.Format("{0:00}:{1:00}:{2:00}", hr, min, sec) 
End Sub 

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click 
    Display() 
    label1.Text = timerStr 
End Sub 
End Class 

// обновление панели код

<asp:ScriptManager ID="ScriptManager1" runat="server"> 
</asp:ScriptManager> 
<asp:Timer ID="Timer1" runat="server" Interval="1000" OnTick="Timer1_Tick"> 
</asp:Timer> 
<asp:Button ID="Button1" runat="server" Text="Button" /> 
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" 
    RenderMode="Inline"> 
    <Triggers> 
     <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" /> 
    </Triggers> 
    <ContentTemplate> 
     <asp:Label ID="label1" runat="server"></asp:Label> 
    </ContentTemplate> 
</asp:UpdatePanel> 

сейчас, по вызову код таймера каждый второй, но его не происходит. Я стараюсь, чтобы это было с событием кнопки и клика, но все равно текст не обновляется, но обновляется страница, когда я нажимаю кнопку. Я делаю что-то неправильно?

Answer 1

Если вы разрабатываете таймер для веб-страницы - вам нужно сделать это на стороне клиента, используя JavaScript, потому что, когда серверный код запускается, а страница отображается в браузере - код на стороне сервера заканчивается и больше не участвует в жизни страницы.

Ниже приведен упрощенный пример таймера на стороне клиента. Он имеет метку (которая в браузере становится SPAN) и 2 кнопки - для запуска и остановки таймера:

<span id="Label1" >Seconds: 0</span> 

<button id="Button1" onclick="startResetTimer()">Start/Reset</button> 
<button id="Button2" onclick="stopTimer()" disabled="disabled">Stop</button> 

А вот JavaScript код, который отвечает за таймер:

var time; 
var interval; 

function startResetTimer() { 

    document.getElementById('Button1').disabled = "disabled"; 
    document.getElementById('Button2').disabled = ""; 

    time = 0; 
    interval = setInterval(function() { 
     time++; 
     document.getElementById('Label1').innerHTML = "Seconds: " + time 
    }, 1000) 
} 

function stopTimer() { 

    document.getElementById('Button1').disabled = ""; 
    document.getElementById('Button2').disabled = "disabled"; 

    clearInterval(interval) 
} 

Когда вы щелкаете " Пуск/Сброс "- таймер начинается через функцию setInterval. Когда вы нажимаете «Стоп», таймер останавливается через функцию clearInterval.

Вы можете попробовать рабочую демонстрационную версию here, она отображает только секунды, но вы должны получить эту идею.