Polling with two UpdatePanels
Source Code
While browsing the ASP.NET Forums I came to a thread with a request for implementing a polling scheme with two UpdatePanels.
In the specific scenario, we have a Timer control (Timer1) that is acting as a trigger for two UpdatePanels, let's say UpdatePanel1 and UpdatePanel2.
While UpdatePanel1 is always polling based on the time interval set on Timer1, UpdatePanel2 starts polling only when a button is clicked inside UpdatePanel1. Similarly, clicking another button stops UpdatePanel2 from updating.
The first thing I thought was to programmatically add and remove from the second UpdatePanel the trigger pointing to Timer1 but this is not the best approach because a dynamic trigger should be added on every request and this leads to very ugly code.
In the implementation, I've used a single trigger in UpdatePanel1 pointing to Timer1 and a server side flag called EnablePolling to determine if UpdatePanel2 is polling. Then, in the Tick event handler for Timer1, UpdatePanel2 is programmatically updated with a call to the Update method.
| <%@ Page Language="C#" %> |
|
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
|
| <script runat="server"> |
| private bool EnablePolling |
| { |
| get |
| { |
| object ret = ViewState["EnablePolling"]; |
| return (ret != null) ? (bool)ret : false; |
| } |
| set { ViewState["EnablePolling"] = value; } |
| } |
|
| protected void LinkButton1_Click(object sender, EventArgs e) |
| { |
| EnablePolling = true; |
| } |
|
| protected void LinkButton2_Click(object sender, EventArgs e) |
| { |
| EnablePolling = false; |
| } |
|
| protected void Timer1_Tick(object sender, EventArgs e) |
| { |
| Label1.Text = Label2.Text = DateTime.Now.ToString(); |
|
| if (EnablePolling) |
| { |
| UpdatePanel2.Update(); |
| } |
| } |
| </script> |
|
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head runat="server"> |
| <title>Polling Scheme Demo</title> |
| <style type="text/css"> |
| div div { |
| padding: 20px; |
| margin: 10px; |
| border: solid 2px #808080; |
| background-color: #efefef; |
| } |
| |
| div span { |
| color: Red; |
| } |
| </style> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <asp:ScriptManager ID="ScriptManager1" runat="server" /> |
| |
| <asp:Timer ID="Timer1" runat="server" Interval="5000" OnTick="Timer1_Tick" /> |
| |
| <div> |
| <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> |
| <Triggers> |
| <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" /> |
| </Triggers> |
| <ContentTemplate> |
| <asp:LinkButton ID="LinkButton1" runat="server" |
| OnClick="LinkButton1_Click">Start Panel 2 Polling</asp:LinkButton> |
| <asp:LinkButton ID="LinkButton2" runat="server" |
| OnClick="LinkButton2_Click">Stop Panel 2 Polling</asp:LinkButton> |
| <div>Changed at: <asp:Label ID="Label1" runat="server"></asp:Label></div> |
| </ContentTemplate> |
| </asp:UpdatePanel> |
| </div> |
| <div> |
| <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional"> |
| <ContentTemplate> |
| <div>Changed at: <asp:Label ID="Label2" runat="server"></asp:Label></div> |
| </ContentTemplate> |
| </asp:UpdatePanel> |
| </div> |
| </form> |
| </body> |
| </html> |