自定义倒数计时器可在每个网页上继续倒数 [英] Custom countdown timer to continue countdown on every webpage

问题描述

下面是我单击登录页面上的登录"按钮时用于登录页面(使用Visual Studio)的代码(C#)，以激活母版"页面上的倒数计时器.系统能够重定向到StaffWelcome页面，但是未执行master.site上的Timer()函数(javascript.js).但是，如果我删除了Respond.Redirect语句，则master.site处的Timer()函数已成功执行.因此，我需要有关如何使Timer()在每个网页上继续倒计时，同时在身份验证成功后重定向到欢迎页面"的专业建议.

Below are my coding (C#) for the Login webpage (using Visual Studio) to activate a countdown timer at the Master page when I clicked on the "Login" button at the Login Page. The system are able to redirect to the StaffWelcome Page but the Timer() function (javascript.js) at the master.site was not executed. But if I removed the Respond.Redirect statement the Timer() function at the master.site was executed successfully. Thus, I need the expertise advice on how to make the Timer() continue to countdown on every webpage while redirect to the Welcome Page upon authentication successfully.

protected void LoginBtn_Click(object sender, EventArgs e) //Staff Login
{
    if (AuthenticateUser(txtUserName.Text, txtPassword.Text))
    {
        Master.Timer();

        Session["username"] = txtUserName.Text;

        Response.Redirect("~/StaffWelcomePage.aspx?UserName=" + txtUserName.Text);

    }
    else
    {
        MsgBox("Invalid User Name and/or Password");
        lblMessage.Text = "Invalid User Name and/or Password";
    }
}

site.master上的编码方法如下所示.

The coding method at the site.master are shown below.

public void Timer()
{
    //lblTimer.Text = "TimerActivated";
    Page.ClientScript.RegisterStartupScript(GetType(), "Javascript", "countdownJS()", true);
}

脚本文件夹中的倒计时脚本文件如下所示:

The Countdown script file at the script folder are as shown below:

function countdownJS() 
{

    //document.getElementById(''timer'').innerHTML = 6 + ":" + 00;
    startTimer();

    function startTimer() {
        var presentTime, timeArray, m, s, x;
        presentTime = document.getElementById(''lblTimer'').innerHTML;
        timeArray = presentTime.split(/[:]+/);
        m = timeArray[0];
        s = checkSecond((timeArray[1] - 1));

        x = m.toString() + s.toString();

        if (s == 59) { m = m - 1 }

        if (x == 500) { window.open("http://asc-insilico/ASCDomainFB/Reminder5Min.aspx", "CountdownTimer", "height=200,width=500"); }

        if (x < 1) { window.location = "http://asc-insilico/ASCDomainFB/LoginPage.aspx"; }


        document.getElementById(''lblTimer'').innerHTML = m + ":" + s;

        setTimeout(startTimer, 1000);
    }

    function checkSecond(sec) {
        if (sec < 10 && sec >= 0) { sec = "0" + sec }; // add zero in front of numbers < 10
        if (sec < 0) { sec = "59" };
        return sec;
    }

}

我尝试过的事情:

What I have tried:

CodeProject, W3Schools, Google Search, Stackoverflow.

推荐答案

简单地说，您只需要将Master.Timer()调用移至StaffWelcomePage.aspx页面的代码隐藏.

但是，您需要了解ASP.NET的工作方式.当您单击链接或单击按钮，或以其他方式导致回发或导航时，任何Javascript都将停止执行.根据您单击的内容，<form runat="server">的内容可能会提交到服务器.服务器将处理该请求，执行服务器端代码，生成响应并将其发送给客户端.然后，客户端将加载响应，通常是用服务器的新响应替换旧页面.

这就是您的代码当前不起作用的原因:包含调用您的countdownJS函数的Javascript代码的HTML响应永远不会发送到客户端，因为Response.Redirect调用告诉浏览器立即请求新的页面，而忽略当前响应中返回的任何内容.

至关重要的是，如果用户停留在该页面上，而未单击任何链接或按钮，直到定时器触发，则将呼叫移至StaffWelcomePage将仅对起作用.

您还会发现window.open调用将被浏览器的弹出窗口阻止程序阻止，因为它未响应用户操作而打开.

Simplistically, you just need to move the Master.Timer() call to the code-behind of the StaffWelcomePage.aspx page.

However, you need to understand how ASP.NET works. When you click on a link, or click on a button, or otherwise cause a post-back or navigation, any Javascript will stop executing. Depending on what you''ve clicked, the contents of the <form runat="server"> might be submitted to the server. The server will handle the request, execute your server-side code, generate a response, and send it to the client. The client will then load the response, typically replacing the old page with the new response from the server.

That''s why your code doesn''t currently work: the HTML response that contains the Javascript code to call your countdownJS function is never sent to the client, because the Response.Redirect call tells the browser to immediately request a new page, ignoring any content returned in the current response.

And crucially, moving the call to the StaffWelcomePage will only work if the user stays on that page, without clicking any links or buttons, until the timer fires.

You''ll also find that the window.open call will be blocked by the browser''s popup blocker, because it''s not being opened in response to a user action.

这篇关于自定义倒数计时器可在每个网页上继续倒数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！