How to use ShowModalDialog Polyfill in ASP.NET Web Form?

Question

How to use ShowModalDialog Polyfill in ASP.NET Web Form?

1.2k Views Asked by Valdas At 25 November 2020 at 08:37

I have a simple web form with a single button:

<%@ 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>

How do I make that button open Popup.aspx with ShowModalDialog Polyfill from https://github.com/niutech/showModalDialog?

I tried Default.aspx.cs like this:

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)
        {
        }
    }
}

It works in IE with old showModalDialog, but in Chrome popup appears and immediately disappears.

Original Q&A

There are 2 best solutions below

**Albert D. Kallal** · Answer 1 · 2020-11-25T19:31:23.087000

Well, if you button click is to run server side code, then you get a full page post back, and that will re-load the page.

But, you CAN have that asp.net button call 100% browser side code and NOT run the button click event stub on the server.

You can use this format:

<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>

So, when you click on the asp.net button, it will call the client side function. (you use OnClientClick(). Also, we added a return false to that click event, and this will prevent the server side Button1_Click event from running. However, you can have the js code return true or false, and if the routine returns true, then the button_click (server side) code will run, but if your js returns false, then the server side event code will not run.

Also, showModalDialog has been REMOVED from most browsers. So it will not work. I suggest you adopt jQuery and also adopt jQuery.ui, and use that to pop up a dialog.

Also if a browser STILL DOES support showModalDialgo (and it HAS been removed), even if it worked, then 99% of popup blocks which now even browsers have turned on by default will block anyway.

So, to run the above with jQuery and also jQuery.ui, then your code to pop up the dialog will become this:

<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>

So you CAN use a alert(); in pure js, or you can prompt the user with a confirm('do you want to do this'). But if you want to pop up a dialog - especially another page, then I would quite much suggest that jQuery and jQuery.UI are the way to go here.

**Danish Taqvi** · Answer 2 · 2021-08-26T18:05:29.723000

Polyfill won't work with a server side control. Replace your asp button with an input type="button" and add the click event using addEventhandler with async and await. Control flow should stop on ShowModelDialog call then and will resume when you close the popup.

How to use ShowModalDialog Polyfill in ASP.NET Web Form?

There are 2 best solutions below

Related Questions in C#

Related Questions in ASP.NET

Related Questions in POLYFILLS

Related Questions in SHOWMODALDIALOG

Trending Questions

Popular # Hahtags

Popular Questions