net中的Timer和UpdatePanel

i'm trying to create a timer in asp.net

我试着在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

//update panel code

/ /更新面板的代码

<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>

now according to code timer call every second but its not happening i try same with button and click event but still text is not update but page refresh when i hit the button.Am i'm doing anything wrong?

现在根据代码定时器每秒钟调用一次但没有发生我尝试用按钮和点击事件但是当我点击按钮时文本不是更新而是页面刷新。我做错什么了吗?

1 个解决方案

#1

If you're developing timer for a Web Page - you have to do it on the client-side, using JavaScript, because once server-side code ran and page is rendered to the browser - server-side code finishes and no longer participates in page life.

如果您正在为Web页面开发定时器——您必须在客户端上使用JavaScript，因为一旦服务器端代码运行并将页面呈现给浏览器——服务器端代码将完成，不再参与页面生命周期。

Here is a simplified example of client-side timer. It has a label (which in browser becomes SPAN) and 2 buttons - to start and stop timer:

下面是一个客户端计时器的简化示例。它有一个标签(在浏览器中成为SPAN)和两个按钮-开始和停止计时器:

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

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

And here is JavaScript code that is responsible for timer:

下面是负责定时器的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)
}

When you click "Start/Reset" button - timer starts via setInterval function. When you click "Stop" timer is stopped via clearInterval function.

当你点击“开始/重置”按钮-定时器通过setInterval函数开始。当您单击“停止”计时器时，将通过clearInterval函数停止。

You can try a working demo here, it only displays seconds, but you should get the idea.

您可以在这里尝试一个工作演示，它只显示秒，但是您应该理解它。

#1