skip to Main Content

Thought I would experiment with a timer and update panel.

I have a simple page that I put an updatepanel control, a label, and a timer.
The "TICK" code updates the label with the current time.
The panel never refreshes. If I put the timer object outside the updatepanel, the whole page refreshes every 1 second. So that tells me that AJAX is in fact working. Just never for the update panel only with the time tag inside the updatepanel. I’ve tried it with Triggers tags and without. No change. I put a "STOP" directive in the Timer1_Tick sub/code, and when I inspect the value of the lbl1.text value, it does in fact have the updated value, but it just won’t render it in the updatepanel. This is why it’s a mystery. After several hours of trying anything I could find, I thought I would just ask the experts.

ASPX objects –
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

        <asp:UpdatePanel ID="updPnl1" runat="server" UpdateMode="Conditional">
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
            </Triggers>
            <ContentTemplate>
                <asp:Timer ID="Timer1" runat="server" OnTick="Timer1_Tick" Interval="1000"></asp:Timer>
                <asp:Label ID="lbl1" runat="server" Text="THIS IS MY LABEL"  />
            </ContentTemplate>
            
        </asp:UpdatePanel>

Code behind – (I tried with and without the updPnl1.Update statement), and like I said, if I STOP the code, the value of lbl1.text is actually updated, but no displaying it as such)
Protected Sub Timer1_Tick(ByVal sender As Object, ByVal e As System.EventArgs) Handles Timer1.Tick
lbl1.Text = "UpdatePanel1 refreshed at: " & DateTime.Now.ToLongTimeString()
‘Stop
updPnl1.Update()
End Sub

Thanks folks

I tried various examples I’ve found. I was expecting the lbl1.text to update with the current time.

2

Answers


  1. Chosen as BEST ANSWER

    SOLVED! The takeaway from this. When having a response.write on the page, a timer will work for the entire page but a timer in an UPDATEPANEL will not render at all, although the code behind will function for the timer in the update panel. Thanks Albert for the helps.


  2. Really, in 99% of cases, you don’t need nor want a trigger. Why???

    Any button, or anything inside of the update panel that cases a post-back works like a regular page lifecycle.

    So, if you want the UP to update say due to a button click? Then just make sure the button is inside of the UP and you are 100% fine. (no triggers required).

    So, say we want a count down clock of some type.

    So, in the update panel, drop in your text boxes (to display the time). Add a button to start, and even one to stop the timer.

    And MAKE sure you drop the timer inside of the update panel.

    Remember, you can think of a Update Panel as a self contained web page inside of the current page.

    Keep in mind while a update panel LOOKS like there is not a post-back?

    There is!!! In fact even the page’s "load" event fires and triggers each time!!

    The correct term here is what we call a "partial" page post-back. So, the full page life cycle occurs here, but ONLY for the things inside of the Update Panel.

    So, lets drop in 3 text boxes and a start and stop button inside of a update panel.

    Say this:

        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    
        <div style="padding: 20px">
    
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
    
                    <div style="float: left">
                        <asp:Label ID="lblHours" runat="server" Text="Hours" Font-Size="Larger"></asp:Label>
                        <br />
                        <asp:TextBox ID="txtHours" runat="server" Text="0" CssClass="tbox"></asp:TextBox>
                    </div>
    
                    <div style="float: left; margin-left: 20px">
                        <asp:Label ID="lblMin" runat="server" Text="Minutes" Font-Size="Larger"></asp:Label>
                        <br />
                        <asp:TextBox ID="txtMin" runat="server" Text="0" CssClass="tbox"></asp:TextBox>
                    </div>
    
                    <div style="float: left; margin-left: 15px">
                        <asp:Label ID="lblsec" runat="server" Text="Seconds" Font-Size="Larger"></asp:Label>
                        <br />
                        <asp:TextBox ID="txtSec" runat="server" BorderStyle="Solid" CssClass="tbox"></asp:TextBox>
                    </div>
    
                    <div style="clear: both; height: 15px"></div>
                    <asp:Button ID="cmdStart" runat="server" Text="Start" CssClass="btn btn-info" />
                    <asp:Button ID="cmdStop" runat="server" Text="Stop" CssClass="btn btn-danger" Style="margin-left: 20px" />
    
                    <br />
                    <asp:Label ID="lblDone" runat="server"></asp:Label>
                    <asp:Timer ID="Timer1" runat="server" Enabled="False"></asp:Timer>
    
                </ContentTemplate>
            </asp:UpdatePanel>
    
        </div>
    

    Note how we dropped the timer control inside of the panel. A timer control is actually like a button click – it will "post back" the page based on the interval – it really not much different then dropping a button on the page and clicking it.

    Note how I have the timer as disabled to start out.

    So, now the user can enter values in to the text boxes, and hit the start button.

    So, the start stop code (code behind) is this:

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    
        If Not IsPostBack Then
            txtSec.Text = "5" ' setup a starting value
        End If
    
    End Sub
    
    Protected Sub cmdStart_Click(sender As Object, e As EventArgs) Handles cmdStart.Click
    
        ' take entered values - convert to time
        Dim MyTime As DateTime
        MyTime = TimeSerial(txtHours.Text, txtMin.Text, txtSec.Text)
    
        ViewState("MyTime") = MyTime   ' save our time
        Timer1.Interval = 1000  ' upddate every one second
        Timer1.Enabled = True   ' start the timer.
        lblDone.Text = "Started"
    
        cmdStart.Enabled = False  ' disable our start button
    
    End Sub
    
    Protected Sub Timer1_Tick(sender As Object, e As EventArgs) Handles Timer1.Tick
    
        Dim myTime As DateTime = ViewState("MyTime")
    
        ' check if we are to stop
        If myTime <= TimeSerial(0, 0, 0) Then
            Timer1.Enabled = False      ' turn off timer
            ' do whatever for end of timer
            lblDone.Text = "Done!"
            cmdStart.Enabled = True
            Exit Sub
        End If
    
        Dim OneSecond As TimeSpan = TimeSpan.FromSeconds(1)
    
        myTime = myTime - OneSecond
        ' update text boxes
        txtHours.Text = myTime.Hour
        txtMin.Text = myTime.Minute
        txtSec.Text = myTime.Second
        ViewState("MyTime") = myTime
    
    End Sub
    
    Protected Sub cmdStop_Click(sender As Object, e As EventArgs) Handles cmdStop.Click
        Timer1.Enabled = False
        cmdStart.Enabled = True
    End Sub
    

    Edit: Here is the style I used for the 3 boxes

    So, you can drop in this style for the boxes right after the form tag

    eg this:

            <style>
                .tbox
                   {font:x-large bold;border-style:solid;
                    height:34px;width:37px;
                    text-align:center;
                   }
            </style>
    

    So, the result now looks like this:

    enter image description here

    Edit3: Example working code based on quesiton

    Ok, so the posted markup is this:

        <asp:UpdatePanel ID="updPnl1" runat="server" UpdateMode="Conditional">
    
            <ContentTemplate>
    
                <asp:Timer ID="Timer1" runat="server"
                    Interval="1000"
                    Enabled="true"  >
                </asp:Timer>
    
                <asp:Label ID="lbl1" runat="server" Text="THIS IS MY LABEL" />
    
            </ContentTemplate>
    
        </asp:UpdatePanel>
    

    And code behind is this:

    Protected Sub Timer1_Tick(sender As Object, e As EventArgs) Handles Timer1.Tick
    
        lbl1.Text = "UpdatePanel1 refreshed at: " & DateTime.Now.ToLongTimeString()
    
    End Sub
    

    So, now we see this:

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search