Question

我在UpdatePanel中遇到了计时器问题。我想设置倒计时（35分钟），当我按下按钮时，它将开始倒计时，但是当我点击它时没有任何反应。它在内容页面中，顺便说一句。

ASP代码：

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div class="container">
<div style="position:fixed; border:dotted 2px; z-index:1">
<asp:UpdatePanel ID="upTiempo" UpdateMode="Conditional" runat="server" ViewStateMode="Enabled">
    <ContentTemplate>
        <i class="fa fa-clock-o fa-3x"></i><asp:Label ID="lbMins" CssClass="h2" runat="server" Text="35" Font-Bold="True"></asp:Label><asp:Label ID="lbPts" runat="server" CssClass="h2" Font-Bold="true">:</asp:Label>
        <asp:Label ID="lbSecs" CssClass="h2" runat="server" Text="00" Font-Bold="True"></asp:Label>
        <asp:Button ID="btnEmpezar" runat="server" Text="Empezar" OnClick="btnEmpezar_Click"/>
        <asp:Timer ID="tmTimer" runat="server" Interval="1000" OnTick="tmTimer_Tick"></asp:Timer>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="tmTimer" EventName="Tick" />
    </Triggers>
</asp:UpdatePanel>
</div>

这里是C＃代码：

int mins = 35;
int secs = 0;

 protected void Page_Load(object sender, EventArgs e)
{
    tmTimer.Enabled = false;
}

protected void tmTimer_Tick(object sender, EventArgs e)
{
    if (secs < 0)
    {
        secs = 59;
        mins--;
    }

    if (secs < 10)
        lbSecs.Text = "0" + secs;
    else
        lbSecs.Text = "" + secs;

    if (mins < 10)
        lbMins.Text = "0" + mins;
    else
        lbMins.Text = "" + mins;

    if (secs == 0 && mins == 0)
    {
        lbMins.Text = "00";
        lbSecs.Text = "00";

        tmTimer.Enabled = false;
    }

    secs--;

    upTiempo.Update();
}

protected void btnEmpezar_Click(object sender, EventArgs e)
{
    tmTimer.Enabled = true;
}

我做错了吗？缺少什么？我应该自杀吗？

Answer 1

杀死自己现在不会有太多帮助，不是吗？

无论如何，您的计时器位于更新面板内。如果您致电upTiempo.Update();，则会重新加载整个面板，包括计时器。默认情况下，计时器处于禁用状态，这就是在第一个tick事件被触发后没有任何反应的原因。

像这样设置：

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:Timer ID="tmTimer" runat="server" Interval="1000" OnTick="tmTimer_Tick"></asp:Timer>
<div class="container">
<div style="position:fixed; border:dotted 2px; z-index:1">
<asp:UpdatePanel ID="upTiempo" UpdateMode="Conditional" runat="server" ViewStateMode="Enabled">
    <ContentTemplate>
        <i class="fa fa-clock-o fa-3x"></i><asp:Label ID="lbMins" CssClass="h2" runat="server" Text="35" Font-Bold="True"></asp:Label><asp:Label ID="lbPts" runat="server" CssClass="h2" Font-Bold="true">:</asp:Label>
        <asp:Label ID="lbSecs" CssClass="h2" runat="server" Text="00" Font-Bold="True"></asp:Label>
        <asp:Button ID="btnEmpezar" runat="server" Text="Empezar" OnClick="btnEmpezar_Click"/>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="tmTimer" EventName="Tick" />
    </Triggers>
</asp:UpdatePanel>
</div>

这样，当重新加载面板时，计时器保持不变并继续按预期运行。

希望这有帮助

Answer 2

好吧，我想我找到了一个解决方案......我只是将mins和secs值存储到Session变量中，所以......

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        Session["mins"] = mins;
        Session["secs"] = secs; 

        tmTimer.Enabled = true;
    }
}

protected void tmTimer_Tick(object sender, EventArgs e)
{
    mins = int.Parse(Session["mins"].ToString());
    secs = int.Parse(Session["secs"].ToString());

    if (secs < 0)
    {
        secs = 59;
        mins--;
    }

    if (secs < 10)
        lbSecs.Text = "0" + secs;
    else
        lbSecs.Text = "" + secs;

    if (mins < 10)
        lbMins.Text = "0" + mins;
    else
        lbMins.Text = "" + mins;

    if (secs == 0 && mins == 0)
    {
        lbMins.Text = "00";
        lbSecs.Text = "00";

        tmTimer.Enabled = false;
    }

    secs--;

    upTiempo.Update();

    Session["mins"] = mins;
    Session["secs"] = secs;
}

如何使用UpdatePanel在MasterPage中使用计时器？

2 个答案: