使用模态弹出窗口在另一个 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 -> 单击 PopUp -> 在模态

中加载 PayrollScope.aspx

但是我一点击 MainPage.aspx 它就重定向到 PayrollScope.aspx。我也尝试使用 jQuery 模式弹出窗口，但发生了同样的问题。谁能告诉我为什么要重定向。

谢谢

Answer 1

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

好吧，它会显示，但是如果页面中的任何代码有 post 返回，那么是的，它会 re-direct 到该页面。（jQuery 对话框简单将整个其他页面直接拉入 div 并将其“合并”到您当前页面的 dom。因此，您可以显示该页面，并且不会出现 re-direct。但是，任何服务器侧面按钮事件代码（按下按钮，甚至说编辑文本框（更改后）的更新后事件将导致 post 返回。因此，任何 post-back 都会导致页面 re-direct（毕竟任何代码隐藏事件都会将整个页面和 URL 发送回 IIS。因此，这在很大程度上取决于您是否只显示该页面，或者如果您 want/need/have 用户交互第二页作为对话框加载。

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

我建议使用 jQuery。

这可行（但考虑到以上 post 后备问题）。

<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）。如果您在页面上有任何 postback，那么所有内容都会使对话框消失。（这也意味着我们按照上面显示（加载）的第二页。

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

那么 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，因此您可以进行交互 - post 回到那个 iframe 应该可以正常工作.

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

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

Using Modal Popup for Displaying aspx page inside another aspx page

c#

asp.net

jquery

webforms