扩展会话弹出母版页 ASP.Net

Question

我希望在会话即将到期时出现一个弹出窗口，询问用户是否要延长他们的会话。我尝试了很多选择，但我无法让它工作。这是我到目前为止的代码

这是.aspx

 </asp:ScriptManager>
<center><h1>Session Time :: <span id="secondsExpire"></span>Seconds.</h1></center>
<asp:LinkButton ID="extendedSession" runat="server"></asp:LinkButton>
<ajaxToolkit:ModalPopupExtender ID="ModalPop" TargetControlID="extendedSession" behaviorID="ModalPop" PopupControlID="Panel" BackgroundCssClass="modalBackground" CancelControlID="BtnNo" OkControlID="BtnYes"  OnOKScript="reset()"  runat ="server">
    
</ajaxToolkit:ModalPopupExtender>
<asp:Panel ID ="Panel" runat="server">
    <div class="header">
        Session is Expiring!
    </div>
    <div class="body">
        Your session will be expire<span id="seconds">
                                   </span>
        <br />
        <br />
        Do you want to reset?

    </div>
    <div class="footer"></div>
    <asp:Button ID="BtnYes" runat="server" CssClass="yes" Text="Yes" />
     <asp:Button ID="BtnNo" runat="server" CssClass="no" Text="No" />



</asp:Panel>

这是我在 .cs 中的内容

 protected void Page_Load(object sender, EventArgs e)
    {
        Response.Cache.SetCacheability(HttpCacheability.NoCache);
        if(!Page.IsPostBack)
        {
            Session["role"] = true;
            Configuration con = WebConfigurationManager.OpenWebConfiguration("~/Web.config/");
            SessionStateSection section = (SessionStateSection)con.GetSection("system.web/sessionState");
            int timeout = (int)section.Timeout.TotalMinutes * 100 * 60;
            ClientScript.RegisterStartupScript(this.GetType(), "sessionAlert", "sessionExpireAlert(" + timeout + ")", true);
        }
    }

我将以下脚本放在母版页中

<script type="text/javascript">
    function sessionExpireAlert(timeout) {
        var seconds = timeout / 1000;
        document.getElementById("seconds").innerHTML = seconds;
        document.getElementById("secondsExpire").innerHTML = seconds;
        setInterval(function () {
            seconds--;
            document.getElementById("seconds").innerHTML = seconds;
            document.getElementById("secondsExpire").innerHTML = seconds;
        }, 1000);
        setTimeout(function () {
            $find("ModalPop").show();
        }, timeout - 20 * 1000);
        setTimeout(function () {
            window.location = "loginPage.aspx";


        }, timeout);
    };
    function reset() {

        window.location = window.location.href;


    };
</script>

请帮忙。现在弹出窗口没有隐藏，计数器也不起作用。

Answer 1

所以我尝试了很多东西，最终我决定自己做。这就是它的样子。

`

<script>

    window.onload = function () {

        (function () {
            var counter = 60*19;

            setInterval(function () {
                counter--;
                if (counter >= 0) {
                    span = document.getElementById("demo");
                    span.innerHTML = counter;
                }
                if (counter === 60) {
                    document.getElementById('<%= SessionTimeOutPopup.ClientID %>').style.visibility = 'visible';


                }
                if (counter === 0) {
                    window.location = "loginPage.aspx";


                }


            }, 1000);

        })();

    }

</script>`


       
<div id="SessionTimeOutPopup" class="fixed-top" runat="server" style="visibility: hidden">

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-4">
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12">
                                <div class="row">
                                    <asp:Label ID="Label1" runat="server" Text="Your session is about to expire." Font-Bold="True"> </asp:Label>
                                </div>
                                <div class="row">
                                    <asp:Label ID="Label2" runat="server" Text="Would you like to continue?" Font-Bold="True"> </asp:Label>
                                </div>
                                <div class="row">
                                    <div class="mx-auto">
                                        <span id="count"></span>
                                        <p id="demo"></p>
                                    </div>

                                </div>

                                <div class="row">
                                    <div class="col-6">
                                        <asp:Button ID="sessionRestartBtn" CssClass="form-control" runat="server" Text="Yes" Font-Bold="True"></asp:Button>
                                    </div>
                                    <div class="col-6">
                                        <asp:Button ID="sessionEndBtn" CssClass="form-control" runat="server" Text="No" Font-Bold="True" OnClick="sessionEndBtn_Click"></asp:Button>
                                    </div>

                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4"></div>
    </div>
</div>

这是一个母版页，并使用引导程序进行设计。