locked
how to display session timeout warning popup on a web page in asp.net and c#? RRS feed

  • Question

  • User2143564534 posted

    Hi,

    Can someone please help me here my code did work for a while but now it stopped, the popup was showing and was doing a count down before logging me out but now  this code <h3 style="font-size: 0px; margin: 0px;">Session Idle:&nbsp;<span id="secondsIdle"></span>&nbsp;seconds.</h3> does not do anything anymore. Please see my code below.

    <h3 style="font-size: 0px; margin: 0px;">Session Idle:&nbsp;<span id="secondsIdle"></span>&nbsp;seconds.</h3>
    <asp:LinkButton ID="lnkFake" runat="server"/>
     
    <asp:ModalPopupExtender ID="mpeTimeout" BehaviorID ="mpeTimeout" runat="server" PopupControlID="pnlPopup" TargetControlID="lnkFake"
        OkControlID="btnYes" CancelControlID="btnNo" BackgroundCssClass="modalBackground" OnOkScript = "ResetSession()">
    </asp:ModalPopupExtender>
     
     
     
     
     
    <asp:Panel ID="pnlPopup" runat="server" CssClass="modalPopup" Style="text-align:center" BorderColor="#cee2e5" BorderStyle="Solid" BackColor="white">
        <div class="header" >
         <h4 style="color:white"><b>  Session Expiry Alert</b> </h4>
        </div>
        <asp:Label ID="Label1" runat="server" BackColor="#cee2e5" Font-Bold="True" Text="Session Expiry Alert"
                                    Font-Size="Large" ForeColor="DarkBlue" style="margin-top: 0px" Width="363px" Visible="true"></asp:Label>
        <div class="body">
            Your Session will expire in&nbsp;<span id="seconds"></span>&nbsp;seconds.<br />
            Do you want to continue?
        </div>
        <div class="footer" align="right">
            <asp:Button ID="btnYes" runat="server" Text="Yes" CssClass="yes" />
            <asp:Button ID="btnNo" runat="server" Text="No" CssClass="no" />
        </div>
    </asp:Panel>
    <script type="text/javascript">
    function SessionExpireAlert(timeout) {
    var seconds = timeout / 1000;
    document.getElementsByName("secondsIdle").innerHTML = seconds;
    document.getElementsByName("seconds").innerHTML = seconds;
    setInterval(function () {
    seconds--;
    document.getElementById("seconds").innerHTML = seconds;
    document.getElementById("secondsIdle").innerHTML = seconds;
    }, 1000);
    setTimeout(function () {
    //Show Popup before 20 seconds of timeout.
    $find("mpeTimeout").show();
    }, timeout -20 * 1000);
    setTimeout(function () {
    window.location.href = "/Login.aspx";
    }, timeout);
    return false;
    };
    function ResetSession() {
    //Redirect to refresh Session.
    window.location = "/Login.aspx";
    }
    </script>--%>
    protected void Page_Load(object sender, EventArgs e)
    {
    Response.Cache.SetCacheability(HttpCacheability.NoCache);
    if (!this.IsPostBack)
    {
    Session["Reset"] = true;
    Configuration config = WebConfigurationManager.OpenWebConfiguration("~/Web.Config");
    SessionStateSection section = (SessionStateSection)config.GetSection("system.web/sessionState");
    int timeout = (int)section.Timeout.TotalMinutes * 1000 * 60;
    Page.ClientScript.RegisterStartupScript(this.GetType(), "SessionAlert", "SessionExpireAlert(" + timeout + ");", true);

    Thank you

    Thursday, May 10, 2018 12:46 PM

Answers

  • User-330142929 posted

    Hi Eosia,

    According to your description and code, I create a test demo to reproduce your problem. I found the secondsIdle’s h3 element’s property “font-size” value is 0, so the session idle disappear.

    I suggest you could assign 10px to the font-size.

    Besides, I change the session timeout to 25 seconds so that we could perform the demo better. Wish it can help you.

    Gif Demo.

    Aspx

    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <h3 style="font-size: 10px; margin: 0px;">Session Idle:<span id="secondsIdle"></span>seconds.</h3>
            <asp:LinkButton ID="lnkFake" runat="server"/>
            <asp:ModalPopupExtender ID="mpeTimeout" BehaviorID="mpeTimeout" runat="server" 
             PopupControlID="pnlPopup" TargetControlID="lnkFake" OkControlID="btnYes" CancelControlID="btnNo" BackgroundCssClass="modalBackground" OnOkScript="ResetSession()"></asp:ModalPopupExtender>
            <asp:Panel ID="pnlPopup" runat="server" CssClass="modalPopup" Style="text-align: center" BorderColor="#cee2e5" BorderStyle="Solid" BackColor="white" class="header">
                <h4 style="color: white"><b>Session Expiry Alert</b> </h4>
                <asp:Label ID="Label1" runat="server" BackColor="#cee2e5" Font-Bold="True" Text="Session Expiry Alert" Font-Size="Large" ForeColor="DarkBlue" Style="margin-top: 0px" Width="363px" Visible="true"></asp:Label>
                Your Session will expire in<span id="seconds"></span>seconds.
                Do you want to continue?
                <div class="footer">
                    <asp:Button ID="btnYes" runat="server" Text="Yes" CssClass="yes" />
                    <asp:Button ID="btnNo" runat="server" Text="No" CssClass="no" />
                </div>
            </asp:Panel>

    Script.

       <script type="text/javascript">
            function SessionExpireAlert(timeout) {
                var seconds = timeout / 1000;
                document.getElementsByName("secondsIdle").innerHTML = seconds;
                document.getElementsByName("seconds").innerHTML = seconds;
                setInterval(function () {
                    seconds--;
                    document.getElementById("seconds").innerHTML = seconds;
                    document.getElementById("secondsIdle").innerHTML = seconds;
                }, 1000);
                setTimeout(function () {
                    //Show Popup before 20 seconds of timeout.
                    $find("mpeTimeout").show();
                }, timeout - 20 * 1000);
                setTimeout(function () {
                    window.location.href = "/WebForm5.aspx";
                }, timeout);
                return false;
            };
            function ResetSession() {
                //Redirect to refresh Session.
                window.location = "/WebForm5.aspx";
            }
        </script>
    

    Code Behind

            protected void Page_Load(object sender, EventArgs e)
            {
                Response.Cache.SetCacheability(HttpCacheability.NoCache);
                if (!this.IsPostBack)
                {
                    Session["Reset"] = true;
                    Configuration config = WebConfigurationManager.OpenWebConfiguration("~/Web.Config");
                    SessionStateSection section = (SessionStateSection)config.GetSection("system.web/sessionState");
                    int timeout = (int)section.Timeout.TotalMinutes * 1000; //I change the timeout value to 25 seconds
                    Page.ClientScript.RegisterStartupScript(this.GetType(), "SessionAlert", "SessionExpireAlert(" + timeout + ");", true);
                }
            }
    

    WebConfig

       <sessionState timeout="25">
        </sessionState>
      </system.web>
    

    If the solution could not solve your problem, please feel free to let me know.

    Best Regards

    Abraham

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, May 11, 2018 7:42 AM

All replies

  • User-330142929 posted

    Hi Eosia,

    According to your description and code, I create a test demo to reproduce your problem. I found the secondsIdle’s h3 element’s property “font-size” value is 0, so the session idle disappear.

    I suggest you could assign 10px to the font-size.

    Besides, I change the session timeout to 25 seconds so that we could perform the demo better. Wish it can help you.

    Gif Demo.

    Aspx

    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <h3 style="font-size: 10px; margin: 0px;">Session Idle:<span id="secondsIdle"></span>seconds.</h3>
            <asp:LinkButton ID="lnkFake" runat="server"/>
            <asp:ModalPopupExtender ID="mpeTimeout" BehaviorID="mpeTimeout" runat="server" 
             PopupControlID="pnlPopup" TargetControlID="lnkFake" OkControlID="btnYes" CancelControlID="btnNo" BackgroundCssClass="modalBackground" OnOkScript="ResetSession()"></asp:ModalPopupExtender>
            <asp:Panel ID="pnlPopup" runat="server" CssClass="modalPopup" Style="text-align: center" BorderColor="#cee2e5" BorderStyle="Solid" BackColor="white" class="header">
                <h4 style="color: white"><b>Session Expiry Alert</b> </h4>
                <asp:Label ID="Label1" runat="server" BackColor="#cee2e5" Font-Bold="True" Text="Session Expiry Alert" Font-Size="Large" ForeColor="DarkBlue" Style="margin-top: 0px" Width="363px" Visible="true"></asp:Label>
                Your Session will expire in<span id="seconds"></span>seconds.
                Do you want to continue?
                <div class="footer">
                    <asp:Button ID="btnYes" runat="server" Text="Yes" CssClass="yes" />
                    <asp:Button ID="btnNo" runat="server" Text="No" CssClass="no" />
                </div>
            </asp:Panel>

    Script.

       <script type="text/javascript">
            function SessionExpireAlert(timeout) {
                var seconds = timeout / 1000;
                document.getElementsByName("secondsIdle").innerHTML = seconds;
                document.getElementsByName("seconds").innerHTML = seconds;
                setInterval(function () {
                    seconds--;
                    document.getElementById("seconds").innerHTML = seconds;
                    document.getElementById("secondsIdle").innerHTML = seconds;
                }, 1000);
                setTimeout(function () {
                    //Show Popup before 20 seconds of timeout.
                    $find("mpeTimeout").show();
                }, timeout - 20 * 1000);
                setTimeout(function () {
                    window.location.href = "/WebForm5.aspx";
                }, timeout);
                return false;
            };
            function ResetSession() {
                //Redirect to refresh Session.
                window.location = "/WebForm5.aspx";
            }
        </script>
    

    Code Behind

            protected void Page_Load(object sender, EventArgs e)
            {
                Response.Cache.SetCacheability(HttpCacheability.NoCache);
                if (!this.IsPostBack)
                {
                    Session["Reset"] = true;
                    Configuration config = WebConfigurationManager.OpenWebConfiguration("~/Web.Config");
                    SessionStateSection section = (SessionStateSection)config.GetSection("system.web/sessionState");
                    int timeout = (int)section.Timeout.TotalMinutes * 1000; //I change the timeout value to 25 seconds
                    Page.ClientScript.RegisterStartupScript(this.GetType(), "SessionAlert", "SessionExpireAlert(" + timeout + ");", true);
                }
            }
    

    WebConfig

       <sessionState timeout="25">
        </sessionState>
      </system.web>
    

    If the solution could not solve your problem, please feel free to let me know.

    Best Regards

    Abraham

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, May 11, 2018 7:42 AM
  • User2143564534 posted

    Good Afternoon Abraham

    Thank you so much for your answer it really helped me so much, but now i am having an issue with the popup on a particular page. for instance i have a calendar which i use to view all my events so each event on that specific date appears as a link that you can click on and it takes you to the page which has all the events details.

    So now the problem is when i click on the link of the event it does take me to the event page but the session timeout popup just appears out of nowhere and the session automatically logs me out but the timer continues counting and the current page that i am on is still there it does not even take me to the login page.

    i honestly wish there was a way i can show you this so you can understand it better, please let me know if there is a way you can think of.

    Thank you so much

    Monday, June 11, 2018 11:49 AM