使用模态弹出窗口在另一个 aspx 页面中显示 aspx 页面

Question

我有以下代码，用于在模式弹出窗口中打开 aspx 页面，但问题是，一旦我加载模式弹出窗口的主机页面，它就会重定向到 iFrame 内部的页面。

<cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panl1" TargetControlID="Button1"  
    CancelControlID="Button2" BackgroundCssClass="Background">  
</cc1:ModalPopupExtender>  
<asp:Panel ID="Panl1" runat="server" CssClass="Popup" align="center" Style="display: none">
    <iframe style="width: 350px; height: 300px;" id="irm1" src="PayrollScope.aspx?id=49437" runat="server"></iframe>
    <br />
    <asp:Button ID="Button2" runat="server" Text="Close" />
</asp:Panel>

所以顺序是 MainPage.aspx -> Click PopUp -> Load PayrollScope.aspx inside the modal

但只要我点击 MainPage.aspx，它就会重定向到 PayrollScope.aspx。 我也尝试使用 jQuery 模态弹出窗口，但同样的问题正在发生。 有人可以告诉我为什么它会重定向。

谢谢

Answer 1

如果您使用 jQuery 对话框加载其他页面？

好吧，它会显示，但是如果页面中的任何代码有回发，那么是的，它将重定向到该页面。（jQuery 对话框只是将整个其他页面直接拉入该 div 并将其“合并”到您当前页面的 dom。因此，您可以显示该页面，并且不会发生重定向。但是，任何服务器端按钮事件代码（按钮按下，甚至说编辑文本框的更新后事件（已更改）都会导致回发。因此，任何回发都会导致页面重定向（毕竟任何隐藏事件的代码确实将整个页面发回，并将 URL 发送到 IIS。所以，这很大程度上取决于您是否只显示该页面，或者如果您希望/需要/在作为对话框加载的第二页上进行用户交互。

因此，转储 ajax 弹出窗口并控制对弹出窗口 id 的尊重。 （不要尝试 jQuery 和 ajaxtool 工具包来“两者”尝试并弹出一个控件/div - 他们往往不能很好地相互配合。

我建议使用 jQuery。

这会起作用（但要考虑到上述回发问题）。

<body>
<form id="form1" runat="server">
<br />
<asp:Button ID="Button1" runat="server" Text="Show page as dialog" OnClientClick="showpage1();return false"/>

<div id="poppage" runat="server" style="display:none">
</div>

<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<script>

    function showpage1() {
        var mydiv = $('#poppage');
        mydiv.dialog({
            autoOpen: false, modal: true, title: 'My cool other page', width: '50%',
            position: { my: 'top', at: 'top+150' }
        });
        mydiv.load('MyOtherPage.aspx');
        // Open the dialog
        mydiv.dialog('open');
      }

因此，上面将加载另一个页面（进入该 div），因此当您单击上面的按钮时会弹出第二个页面。 （并注意 return=false）。 如果您在页面上有任何回发，那么所有内容都会使对话框崩溃。 （这也意味着我们按照上面显示（加载）的第二页。

但是，如果您需要在第二页上进行交互？ （必须点击按钮等）。

那么 iframe 的想法是一个非常好的想法。

所以，你和以前一样，但我们现在不使用 jQuery.ui 来“加载”页面，而是只显示（并因此弹出）你放置在里面的 iframe 的 div。

所以，div变成了这样：

<div id="poppage" runat="server" style="display:none">
    <iframe src="MyOtherPage.aspx" class="auto-style1"></iframe>
</div>

js代码变成了这样：

    function showpage1() {
        var mydiv = $('#poppage');
        mydiv.dialog({
            autoOpen: false, modal: true, title: 'My cool other page', width: '50%',
            position: { my: 'top', at: 'top+150' }
        });
        // Open the dialog
        mydiv.dialog('open');
      }

因此，现在上面将只显示 div 中的其他页面，并且由于它是 iFrame，因此您可以进行交互 - 并在 iframe 中回发应该可以正常工作。

所以，删除 ajax 面板的东西 - 试试 jQuery.ui。 我使用了 ajaxtool 工具包的东西，但是为了在对话框中显示另一个整个页面，然后我发现 jQuery.ui 似乎工作得更好

使用模态弹出窗口在另一个 aspx 页面中显示 aspx 页面

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-08-13 12:48:41

使用模态弹出窗口在另一个 aspx 页面中显示 aspx 页面

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-08-13 12:48:41

解决方案1
1 已采纳 2020-08-13 12:48:41