Asked by:
Making the page grey that is outside of Update panel

Question
-
User351619809 posted
I have an update panel on my page. This update panel has a timer. Once the timer is up, I want to make entire page outside the update panel to be grey and uneditable. Below is the code for Update panel with a Timer :
<asp:ScriptManager ID="ScriptManager1" runat="server" ></asp:ScriptManager> <asp:Timer ID="Timer1" OnTick="Timer1_Tick" runat="server" Interval="1000" /> <asp:UpdatePanel ID="securityQuestPanel" runat="server" UpdateMode="Conditional"> <Triggers> <asp:AsyncPostBackTrigger ControlID="Timer1" /> </Triggers> <ContentTemplate> <div class="sticky"> <span style="border:2px; color:red;font-size:25px;" >Time Remaining: <asp:Label ID="Label1" runat="server"></asp:Label></span> <br /> </div> </ContentTemplate> </asp:UpdatePanel>
I have lot of code outside of update Panel. Is their any way, I can make that code background grey and uneditable. I cannot move that code inside the content template of the existing update panel. I created a small working sample to show what I mean:
Below is the aspx page:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="SendBulkEmail.WebForm4" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="src1" runat="server"></asp:ScriptManager> <div> <asp:Timer ID="Timer1" OnTick="Timer1_Tick" runat="server" Interval="1000" /> <asp:UpdatePanel ID="StockPricePanel" runat="server" UpdateMode="Conditional"> <Triggers> <asp:AsyncPostBackTrigger ControlID="Timer1" /> </Triggers> <ContentTemplate> <div class="sticky"> <span style="border:2px; color:red;font-size:25px;" >Time Remaining: <asp:Label ID="Label1" runat="server"></asp:Label></span> <br /> </ContentTemplate> </asp:UpdatePanel> </div> <div> <asp:Button ID="btnTest" runat="server" Text="Test" OnClick="test_click" /></div> </form> </body> </html>
below is my .cs page code:
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace SendBulkEmail { public partial class WebForm4 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { if (Session["CountdownTimer"] == null) { Session["CountdownTimer"] = new TimeSpan(0, 1, 0); } TimeSpan current = (TimeSpan)Session["CountdownTimer"]; Label1.Text = current.ToString("%m") + " minutes and " + current.ToString("%s") + " seconds"; } } protected void Timer1_Tick(object sender, EventArgs e) { TimeSpan ts2sec = new TimeSpan(0, 0, 2); // 2 seconds TimeSpan ts = (TimeSpan)Session["CountdownTimer"]; // current remaining time from Session TimeSpan current = ts - ts2sec; // Subtract 5 seconds Label1.Text = current.ToString("%m") + " minutes and " + current.ToString("%s") + " seconds"; Session["CountdownTimer"] = current; // put new remaining time in Session if (current.Seconds == 0 && current.Minutes == 0) { Session["CountdownTimer"] = ""; Timer1.Enabled = false; Label1.Text = "Your Session is timed out. "; btnTest.Visible = false; } } protected void test_click(object sender, EventArgs e) { string a = "This is Test"; } } }
I want to make btnTest invisible when the timer is up. I cannot move the btnTest inside the existing update panel. This is just a working example of what I need.
Any help will be highly appreciated.
Sunday, August 30, 2020 10:18 PM
All replies
-
User1535942433 posted
Below is the aspx page:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="SendBulkEmail.WebForm4" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="src1" runat="server"></asp:ScriptManager> <div> <asp:Timer ID="Timer1" OnTick="Timer1_Tick" runat="server" Interval="1000" /> <asp:UpdatePanel ID="StockPricePanel" runat="server" UpdateMode="Conditional"> <Triggers> <asp:AsyncPostBackTrigger ControlID="Timer1" /> </Triggers> <ContentTemplate> <div class="sticky"> <span style="border:2px; color:red;font-size:25px;" >Time Remaining: <asp:Label ID="Label1" runat="server"></asp:Label></span> <br /> </ContentTemplate> </asp:UpdatePanel> </div> <div> <asp:Button ID="btnTest" runat="server" Text="Test" OnClick="test_click" /></div> </form> </body> </html>
below is my .cs page code:
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace SendBulkEmail { public partial class WebForm4 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { if (Session["CountdownTimer"] == null) { Session["CountdownTimer"] = new TimeSpan(0, 1, 0); } TimeSpan current = (TimeSpan)Session["CountdownTimer"]; Label1.Text = current.ToString("%m") + " minutes and " + current.ToString("%s") + " seconds"; } } protected void Timer1_Tick(object sender, EventArgs e) { TimeSpan ts2sec = new TimeSpan(0, 0, 2); // 2 seconds TimeSpan ts = (TimeSpan)Session["CountdownTimer"]; // current remaining time from Session TimeSpan current = ts - ts2sec; // Subtract 5 seconds Label1.Text = current.ToString("%m") + " minutes and " + current.ToString("%s") + " seconds"; Session["CountdownTimer"] = current; // put new remaining time in Session if (current.Seconds == 0 && current.Minutes == 0) { Session["CountdownTimer"] = ""; Timer1.Enabled = false; Label1.Text = "Your Session is timed out. "; btnTest.Visible = false; } } protected void test_click(object sender, EventArgs e) { string a = "This is Test"; } } }
I want to make btnTest invisible when the timer is up. I cannot move the btnTest inside the existing update panel. This is just a working example of what I need.
Accroding to your description and codes,I have a test and the btnTest cann't be invisible when the timer is up.And in your codes,when the page loads,the timer will start.
I'm guessing that you need to make the control outside the updatepanel to be uneditable when the time is up.If you need to achieve this requirment,I suggest you could contain all controls into a panel and you could make panel enabled to be false.
More details,you could refer to below codes:
<asp:ScriptManager ID="src1" runat="server"></asp:ScriptManager> <div> <asp:Timer ID="Timer1" OnTick="Timer1_Tick" runat="server" Interval="1000" /> <asp:UpdatePanel ID="StockPricePanel" runat="server" UpdateMode="Conditional"> <Triggers> <asp:AsyncPostBackTrigger ControlID="Timer1" /> </Triggers> <ContentTemplate> <div class="sticky"> <span style="border: 2px; color: red; font-size: 25px;">Time Remaining: <asp:Label ID="Label1" runat="server"></asp:Label></span> <br /> </ContentTemplate> </asp:UpdatePanel> </div> <asp:Panel id="panel1" runat="server"> <asp:Button ID="btnTest" runat="server" Text="Test" OnClick="btnTest_Click" /> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> </asp:Panel>
Code-Behind:
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { panel1.Enabled = false; if (Session["CountdownTimer"] == null) { Session["CountdownTimer"] = new TimeSpan(0, 1, 0); } TimeSpan current = (TimeSpan)Session["CountdownTimer"]; Label1.Text = current.ToString("%m") + " minutes and " + current.ToString("%s") + " seconds"; } } protected void btnTest_Click(object sender, EventArgs e) { string a = "This is Test"; } protected void Timer1_Tick(object sender, EventArgs e) { TimeSpan ts2sec = new TimeSpan(0, 0, 2); // 2 seconds TimeSpan ts = (TimeSpan)Session["CountdownTimer"]; // current remaining time from Session TimeSpan current = ts - ts2sec; // Subtract 5 seconds Label1.Text = current.ToString("%m") + " minutes and " + current.ToString("%s") + " seconds"; Session["CountdownTimer"] = current; // put new remaining time in Session if (current.Seconds == 0 && current.Minutes == 0) { Session["CountdownTimer"] = ""; Timer1.Enabled = false; Label1.Text = "Your Session is timed out. "; btnTest.Visible = false; } }
Best regards,
Yijing Sun
Monday, August 31, 2020 6:20 AM -
User351619809 posted
I am not sure how will this resolve my issue. Everything inside the panel1 will always be disabled. I want users to click on the button before the timer is up. With your code, everything including the button will always be disabled. In other words, button and all the controls inside the panel will be disabled since the page load and timer starts ticking and they will be disabled even after the timer is up. I tried the code and btntest is disabled for the entire time.
Monday, August 31, 2020 4:36 PM -
User1535942433 posted
As far as I think,you need to do Partial-Page Updates with button showing when timer is ending.
More details,you could refer to below article:
https://docs.microsoft.com/en-us/previous-versions/bb386573(v=vs.140)?redirectedfrom=MSDN
Best regards,
Yijing Sun
Tuesday, September 1, 2020 7:19 AM