locked
Timer in VB.NET RRS feed

  • Question

  • User-1578974752 posted


    I have a timer in my form . There are 20 questions in that form with in a List View control

    Have a scroll bar.

    Now my issue is,If I reach the below question then due to timer refreshing ,form is going to the top question. Appreciate the Help

    Wednesday, May 8, 2019 10:10 AM

Answers

  • User753101303 posted

    Hi,

    And the purpose of this timer is ? You refresh the page to just show the remaining time ?

    It would likely best to use a JavaScript side timer for example based on https://www.w3schools.com/howto/howto_js_countdown.asp so that you don't refresh the page while the user is currently working on it.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, May 21, 2019 11:53 AM
  • User753101303 posted

    Hi,

    It may never reach 0 exactly maybe? For this kind of thing you rather do a if (remainingTime<0)  test.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, May 23, 2019 11:17 AM
  • User665608656 posted

    Hi shsu, 

    According to your question, you could get the lost focus event of textbox through jquery, that is, when you enter the number, your timer starts restarting. 

    Then you could get the current input value of texbox through jQuery and add it to SystemTIME.

    If you only want to show hour,mintue and seconds, you could comment out the parameter day and add it (Math. floor (distance / 1000 * 60 * 60 * 24)* 24) after the hour parameter (Convert the value of day* 24 into hours).

    For the problem of not redirect page, what does your page show when the rest of the time is 0? Or is there any error message shows?

    First of all, you could better to confirm whether your Result.aspx exists and whether its file path is the same as that of your current page.

    You could refer to this link :  https://stackoverflow.com/questions/4796254/relative-path-to-absolute-path-in-c

    Because I'm testing the same method here, when distance = 0, I can successfully redirect the page.

    For more details, you could refer to the following code:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="../Scripts/WebForms/DetailsView.js"></script>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
        <script>
            $(function () {
                var x;
                $("#TextBox1").blur(function () {
                    clearInterval(x);
                    document.getElementById("demo").innerHTML = "";
                    // Set the date we're counting down to
                    var text = $("#TextBox1").val();
                    if (text != "" && (/(^[1-9]\d*$)/.test(text))) {
                        text = parseInt(text);
                    } else {
                        alert("please enter the right mintue");
                        return;
                    }
                    var countDownDate = new Date();
                    var min = countDownDate.getMinutes();
                    countDownDate.setMinutes(min + text);
                    // var countDownDate = new Date("May 22, 2022 10:30:00").getTime();
    
                    // Update the count down every 1 second
                    x = setInterval(function () {
                        // Get today's date and time
                        var now = new Date().getTime();
    
                        // Find the distance between now and the count down date
                        var distance = countDownDate - now;
    
                        // Time calculations for days, hours, minutes and seconds
                        // var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    
                        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)) + (Math.floor(distance / (1000 * 60 * 60 * 24)) * 24);
                        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                        var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
                        // Output the result in an element with id="demo"
                        document.getElementById("demo").innerHTML = hours + "h "
                            + minutes + "m " + seconds + "s ";
                        document.getElementById("message").innerHTML = "";
                        if (hours == 0 && minutes == 5 && seconds == 0) {
                            document.getElementById("message").innerHTML = "There are five mintues left!";
                        }
                        if (distance == 0) {
                            window.location.href = "Result.aspx";
                        }
                        // If the count down is over, write some text 
                        if (distance < 0) {
                            clearInterval(x);
                            document.getElementById("demo").innerHTML = "EXPIRED";
                        }
                    }, 1000);
    
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:TextBox ID="TextBox1" runat="server" Text=""></asp:TextBox>
            <p id="demo"></p>
            <p id="message"></p>
        </form>
    </body>
    </html>
    

    The result of my work demo:


       


    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, May 24, 2019 8:01 AM

All replies

  • User665608656 posted

    Hi   shsu,

    As far as I know , the Timer controls refresh the entire page every time when they are triggered , so the scrollbar will return to the top position.

    If you want to ensure  the scrollbar does not change its place with the Timer control postback, I suggest you could try to use  the UpdatePanel control.

    The updatepanel control will avoid refreshing the whole page instead of the control inside  the update panel.

    More details, you could refer to below code sampe:

    <form id="form1" runat="server">
     <div>
               <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    
                <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    
                    <ContentTemplate>
    
                        <asp:Timer ID="Timer1" runat="server" Interval="1000" OnTick="Timer1_Tick"></asp:Timer>
    
                        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    
                        <asp:Repeater ID="rptrTables" runat="server" DataSourceID="SqlDataSource1" OnItemDataBound="rptrTables_ItemDataBound">
    
                            <ItemTemplate>
    
                                <asp:GridView ID="grdOrder" runat="server" AutoGenerateColumns="false" CssClass="table table-bordered table-hover table-responsive" GridLines="None" ShowFooter="true">
    
                                    <Columns>
    
                                        <asp:TemplateField>
    
                                            <ItemTemplate>
    
                                                <asp:TextBox ID="Name" runat="server" CssClass="form-control" Text='<%# Eval("Name")%>'></asp:TextBox>
    
                                            </ItemTemplate>
    
                                        </asp:TemplateField>
    
                                    </Columns>
    
                                </asp:GridView>
    
                            </ItemTemplate>
    
                        </asp:Repeater>
    
                    </ContentTemplate>
    
                </asp:UpdatePanel>
    
                <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TestConnectionString1 %>" SelectCommand="SELECT * FROM [Test]"></asp:SqlDataSource>
            </div>
    </form>

    code behind 

     protected void Timer1_Tick(object sender, EventArgs e)
     {
        Label1.Text = DateTime.Now.ToLongTimeString();
     }

    Here is the result:

    Best Regards,

    YongQing.


     

    Thursday, May 9, 2019 9:43 AM
  • User-1578974752 posted

    Timer is inside the update panel as below. When I added the full list view inside the update panel, same issue is happening. when cursor reaches below questions, then it starts jumping.

    <asp:UpdatePanel ID="upMain" runat="server">

    <ContentTemplate>

    <table>

    <tr>

    <td class="auto-style149">

    <asp:Label ID="Label3" runat="server" Width="140px" Text="Current Time" Visible="False"></asp:Label>

    </td>

    <td class="auto-style147">

    <asp:TextBox ID="txbCurrentTime" runat="server" Width="200px"></asp:TextBox>

    </td>

    </tr>

    <tr>

    <td class="auto-style149">Time Left&nbsp; [Sec]</td>

    <td class="auto-style147">

    <asp:TextBox ID="txbExecutedTime" runat="server" AutoPostBack="True" Width="200px"></asp:TextBox>

    </td>

    </tr>

    </table>

    <asp:Timer ID="tmrMain" runat="server" Enabled="False" Interval="1000">

    </asp:Timer>

    </ContentTemplate>

    <Triggers>

    <asp:AsyncPostBackTrigger ControlID="tmrMain" EventName="Tick" />

    <asp:AsyncPostBackTrigger ControlID="txbExecutedTime" EventName="TextChanged" />

    </Triggers>

    </asp:UpdatePanel>

    Tuesday, May 21, 2019 10:52 AM
  • User753101303 posted

    Hi,

    And the purpose of this timer is ? You refresh the page to just show the remaining time ?

    It would likely best to use a JavaScript side timer for example based on https://www.w3schools.com/howto/howto_js_countdown.asp so that you don't refresh the page while the user is currently working on it.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, May 21, 2019 11:53 AM
  • User-1578974752 posted

    Yes, Now the purpose of Timer is just to show remaining time .

    In the below code ,How can I put the countDownDate as current date time + 20 minutes always. Because the test is always 20 minutes and must calculate from the system time.

    and if 5 minutes left then a message to be shown and upon 0 seconds need to redirect to another form -> response.redirect("result.aspx")

    I am not familiar with JavaScript. Appreciate the Help.
    <script>
    // Set the date we're counting down to
       
    var countDownDate = new Date("May 22, 2019 10:30:00").getTime();

    // Update the count down every 1 second
    var x = setInterval(function() {

      // Get today's date and time
      var now = new Date().getTime();
       
      // Find the distance between now and the count down date
      var distance = countDownDate - now;
       
      // Time calculations for days, hours, minutes and seconds
      var days = Math.floor(distance / (1000 * 60 * 60 * 24));
      var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.floor((distance % (1000 * 60)) / 1000);
       
      // Output the result in an element with id="demo"
      document.getElementById("demo").innerHTML = days + "d " + hours + "h "
      + minutes + "m " + seconds + "s ";
       
      // If the count down is over, write some text
      if (distance < 0) {
        clearInterval(x);
        document.getElementById("demo").innerHTML = "EXPIRED";
      }
    }, 1000);
    </script>

    Wednesday, May 22, 2019 2:09 AM
  • User665608656 posted

    Hi shsu,

    According yo your description and the js code you provided, you could set countDownDate to the current time + 20 minutes, and then show the message you want in the p tag when there are five minutes left in the method per second.

    At the same time, you could make page redirect to another form when the total remaining time distance in the method is 0.

    For more details, you could refer to the following code:

    <head runat="server">
        <title></title>
        <script>
            // Set the date we're counting down to
            var countDownDate = new Date();
            var min = countDownDate.getMinutes();
            countDownDate.setMinutes(min + 20);
            // var countDownDate = new Date("May 22, 2022 10:30:00").getTime();
    
            // Update the count down every 1 second
            var x = setInterval(function () {
    
                // Get today's date and time
                var now = new Date().getTime();
    
                // Find the distance between now and the count down date
                var distance = countDownDate - now;
    
                // Time calculations for days, hours, minutes and seconds
                var days = Math.floor(distance / (1000 * 60 * 60 * 24));
                var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
                // Output the result in an element with id="demo"
                document.getElementById("demo").innerHTML = days + "d " + hours + "h "
                    + minutes + "m " + seconds + "s ";
                document.getElementById("message").innerHTML = "";
                if (days == 0 && hours == 0 && minutes == 5 && seconds == 0) {
                    document.getElementById("message").innerHTML = "There are five minutes left!";
                }
                if (distance == 0) {
                    window.location.href = "result.aspx";
                }
                // If the count down is over, write some text 
                if (distance < 0) {
                    clearInterval(x);
                    document.getElementById("demo").innerHTML = "EXPIRED";
                }
            }, 1000);
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <p id="demo"></p>
            <p id="message"></p>
        </form>
    </body>
    </html>
    

    Best Regards,

    YongQing.

    Thursday, May 23, 2019 2:42 AM
  • User-1578974752 posted

    Thanks

    1. If 20 min is a value from textbox ( SYSTEMTIME+ 20 MIN),How can I use Text box here in javascript.
    2. And If I don't want the date only Hour:Min: Sec needed ,

    then how can I incorporate in to java script.

    And also below is not working. When it become 0,the form is not redirecting Result.aspx

    if (distance == 0) {

    window.location.href = "Result.aspx";

    }

    Thursday, May 23, 2019 3:02 AM
  • User753101303 posted

    Hi,

    It may never reach 0 exactly maybe? For this kind of thing you rather do a if (remainingTime<0)  test.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, May 23, 2019 11:17 AM
  • User665608656 posted

    Hi shsu, 

    According to your question, you could get the lost focus event of textbox through jquery, that is, when you enter the number, your timer starts restarting. 

    Then you could get the current input value of texbox through jQuery and add it to SystemTIME.

    If you only want to show hour,mintue and seconds, you could comment out the parameter day and add it (Math. floor (distance / 1000 * 60 * 60 * 24)* 24) after the hour parameter (Convert the value of day* 24 into hours).

    For the problem of not redirect page, what does your page show when the rest of the time is 0? Or is there any error message shows?

    First of all, you could better to confirm whether your Result.aspx exists and whether its file path is the same as that of your current page.

    You could refer to this link :  https://stackoverflow.com/questions/4796254/relative-path-to-absolute-path-in-c

    Because I'm testing the same method here, when distance = 0, I can successfully redirect the page.

    For more details, you could refer to the following code:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="../Scripts/WebForms/DetailsView.js"></script>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
        <script>
            $(function () {
                var x;
                $("#TextBox1").blur(function () {
                    clearInterval(x);
                    document.getElementById("demo").innerHTML = "";
                    // Set the date we're counting down to
                    var text = $("#TextBox1").val();
                    if (text != "" && (/(^[1-9]\d*$)/.test(text))) {
                        text = parseInt(text);
                    } else {
                        alert("please enter the right mintue");
                        return;
                    }
                    var countDownDate = new Date();
                    var min = countDownDate.getMinutes();
                    countDownDate.setMinutes(min + text);
                    // var countDownDate = new Date("May 22, 2022 10:30:00").getTime();
    
                    // Update the count down every 1 second
                    x = setInterval(function () {
                        // Get today's date and time
                        var now = new Date().getTime();
    
                        // Find the distance between now and the count down date
                        var distance = countDownDate - now;
    
                        // Time calculations for days, hours, minutes and seconds
                        // var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    
                        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)) + (Math.floor(distance / (1000 * 60 * 60 * 24)) * 24);
                        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                        var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
                        // Output the result in an element with id="demo"
                        document.getElementById("demo").innerHTML = hours + "h "
                            + minutes + "m " + seconds + "s ";
                        document.getElementById("message").innerHTML = "";
                        if (hours == 0 && minutes == 5 && seconds == 0) {
                            document.getElementById("message").innerHTML = "There are five mintues left!";
                        }
                        if (distance == 0) {
                            window.location.href = "Result.aspx";
                        }
                        // If the count down is over, write some text 
                        if (distance < 0) {
                            clearInterval(x);
                            document.getElementById("demo").innerHTML = "EXPIRED";
                        }
                    }, 1000);
    
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:TextBox ID="TextBox1" runat="server" Text=""></asp:TextBox>
            <p id="demo"></p>
            <p id="message"></p>
        </form>
    </body>
    </html>
    

    The result of my work demo:


       


    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, May 24, 2019 8:01 AM