如何在不重新加载页面的情况下使 asp.net 按钮显示弹出窗口？答案

【问题标题】：How can I make an asp.net button show a popup without reloading the page?如何在不重新加载页面的情况下使 asp.net 按钮显示弹出窗口？
【发布时间】：2017-03-08 19:49:22
【问题描述】：

弹出窗口是指 w3school 的弹出窗口 javascript： https://www.w3schools.com/howto/howto_js_popup.asp

我尝试将按钮放在 Ajax 更新面板中，但由于某种原因，javascript 函数不会触发。

<asp:ScriptManager ID="ScriptManager" runat="server"></asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <div id="footerbuttons" class="questioncard">
                <div class="popup" onclick="savedPopup()">
                    <asp:Button ID="SaveChangesButton" runat="server" Text="Save Changes" OnClick="SaveChangesButton_Click" BackColor="#F9AF19" Font-Size="Medium" />
                    <span class="popuptext" id="savedPopup">Saved!</span>
                </div>
                <div class="popup" onclick="sentPopup">
                    <asp:Button ID="SubmitButton" runat="server" Text="Submit to Supervisor" OnClick="SubmitButton_Click" BackColor="#F9AF19" Font-Size="Medium"/>
                    <span class="popuptext" id="sentPopup">Sent!</span>
                </div>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>


    <script type="text/javascript">
    function savedPopup() {
        var popup = document.getElementById("savedPopup");
        eval(popup.classList.toggle("show"));
    }

    function sentPopup() {
        var popup = document.getElementById("sentPopup");
        eval(popup.classList.toggle("show"));
    }
    </script>

【问题讨论】：

Div 和 asp:Button 都有 onclicks 吗？尝试删除 DIV 中的 Onclick 和 asp:Button 位置 OnClientClick="savedPopup"
刚刚试过。这样做时，它不会触发 javascript 或执行后端代码。
更新函数 savedPopup() { var popup = document.getElementById("savedPopup"); eval(popup.classList.toggle("show"));返回假；并在 asp:Button OnclientClick="return savedPopup();"
这样就触发了 javascript，但 onclick="SaveChangesButton_Click" 没有。
SaveChangesButton_Click 是另一个 JavaScript 吗？或回发方法？记住回发会重新加载页面。否则你需要进行 Ajax 调用。

标签： javascript asp.net ajax

【解决方案1】：

我认为您需要在关闭 ContentTemplate 标记后添加 asyncPostBackTrigger。

   <Triggers>
 <asp:AsyncPostBackTrigger ControlID="SaveChangesButton" EventName="Click" />
 <asp:AsyncPostBackTrigger ControlID="SubmitButton" EventName="Click" />
   </Triggers>

然后在代码后面

SaveChangesButton 按钮的点击事件

ScriptManager.RegisterStartupScript(this, this.GetType(), "savedPopup", "savedPopup();", true);

和SubmitButton按钮的点击事件

ScriptManager.RegisterStartupScript(this, this.GetType(), "sentPopup", "sentPopup();", true);

【讨论】：