如何在 ASP.NET Web 窗体中使用 ShowModalDialog Polyfill？答案

【问题标题】：How to use ShowModalDialog Polyfill in ASP.NET Web Form?如何在 ASP.NET Web 窗体中使用 ShowModalDialog Polyfill？
【发布时间】：2021-03-08 02:18:36
【问题描述】：

我有一个带有单个按钮的简单网络表单：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="DemoWeb.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://unpkg.com/showmodaldialog"></script>
    <script>
        function showPopup() {
            var ret = window.showModalDialog("Popup.aspx");
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
        </div>
    </form>
</body>
</html>

如何使用 https://github.com/niutech/showModalDialog 的 ShowModalDialog Polyfill 使该按钮打开 Popup.aspx？

我尝试过这样的 Default.aspx.cs：

using System;

namespace DemoWeb
{
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Button1.Attributes.Add("OnClick", "showPopup()");
        }

        protected void Button1_Click(object sender, EventArgs e)
        {
        }
    }
}

它在 IE 中使用旧的 showModalDialog 有效，但在 Chrome 中出现并立即消失。

【问题讨论】：

标签： c# asp.net polyfills showmodaldialog

【解决方案1】：

好吧，如果你点击按钮是为了运行服务器端代码，那么你会得到一个完整的页面回传，这将重新加载页面。

但是，您可以让 asp.net 按钮调用 100% 浏览器端代码，而不是在服务器上运行按钮单击事件存根。

您可以使用这种格式：

<form id="form1" runat="server">
   <div>
     <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" OnClientClick="showpopup()";return false;" />
   </div>
   <script>
     function showpopup() {
       var ret = window.showModalDialog("Popup.aspx");
     }
   </script>
</form>

因此，当您单击 asp.net 按钮时，它将调用客户端函数。（您使用 OnClientClick()。另外，我们在该单击事件中添加了 return false，这将阻止服务器端 Button1_Click 事件运行。但是，您可以让 js 代码返回 true 或 false，如果例程返回 true ，那么button_click（服务器端）代码就会运行，但是如果你的js返回false，那么服务器端事件代码就不会运行。

此外，showModalDialog 已从大多数浏览器中移除。所以它不会起作用。我建议你采用jQuery，也采用jQuery.ui，并用它来弹出一个对话框。

此外，如果浏览器仍然支持 showModalDialgo（并且它已被删除），即使它可以工作，那么现在甚至浏览器默认打开的 99% 的弹出块都会被阻止。

所以，用 jQuery 和 jQuery.ui 运行上面的代码，那么你弹出对话框的代码将变成这样：

<form id="form1" runat="server">
    <asp:Button ID="Button1" runat="server" Text="Button" Width="94px" OnClientClick="showpage();return false;" />
    <br />
    <br />
    <div id="poppagearea">
    </div>
    <br />
    <script>
        function showpage() {

            var mydiv = $('#poppagearea');
            mydiv.dialog({
                autoOpen: false, modal: true, title: 'My cool other page', width: '30%',
                position: { my: 'top', at: 'top+150' },
                buttons: {
                    'ok': function () {
                        mydiv.dialog('close');
                        // code here for ok click alert('user click ok');
                    },
                    'cancel': function () {
                        mydiv.dialog('close');
                        // code here for a cancel click alert('user click cancel');
                    }
                }
            });
        }
    </script>
</form>

所以你可以使用 alert();在纯 js 中，或者您可以通过确认提示用户（'你想这样做'）。但是如果你想弹出一个对话框——尤其是另一个页面，那么我非常建议 jQuery 和 jQuery.UI 是这里的方式。

【讨论】：

这不起作用，我添加了OnClientClick="showpopup()";return false;" 并从Page_Load 中删除了Button1.Attributes.Add("OnClick", "showPopup()");，对话框仍然立即消失。我也知道 showModalDialog 已被删除，这就是我尝试用 polyfill 替换它的原因。
对话框将消失，因为如果您的 js 代码中有任何错误，则 return false 不会运行，因此您会收到一个页面回发，这会破坏您的弹出窗口。因此，要么修复 js 代码，要么删除 asp:button 并放入 html（输入按钮）并将 OnClick 连接到 js 事件。直到此时所有错误都从 js 代码中删除，然后弹出窗口只会“似乎”显示和消失 - 它这样做是因为如果代码出错，则 return false 永远不会运行，因此你会做一个回发.破坏对话框的是回发。

【解决方案2】：

Polyfill 不适用于服务器端控件。将您的 asp 按钮替换为 input type="button"，并使用 addEventhandler 与 async 和 await 添加点击事件。控制流应在ShowModelDialog 调用时停止，并在您关闭弹出窗口时恢复。

【讨论】：