使用模态弹出窗口在另一个 aspx 页面中显示 aspx 页面
Posted
技术标签:
【中文标题】使用模态弹出窗口在另一个 aspx 页面中显示 aspx 页面【英文标题】：Using Modal Popup for Displaying aspx page inside another aspx page 【发布时间】：2020-12-02 14:51:06 【问题描述】：我有以下代码，用于在模式弹出窗口中打开 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 -> 在 modal 中加载 PayrollScope.aspx
但只要我点击 MainPage.aspx，它就会重定向到 PayrollScope.aspx。我也尝试使用 jQuery 模态弹出窗口，但同样的问题正在发生。有人可以告诉我为什么它会重定向。
谢谢
【问题讨论】：
请显示整个aspx页面？您一定缺少关键元素。 请把后面的代码也贴出来，光看标记是无法判断发生了什么的。 【参考方案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 页面的主要内容，如果未能解决你的问题，请参考以下文章
Parsley js：如何验证模态弹出窗口内的输入字段并在模态本身内显示错误消息
在同一个aspx页面中同时使用jqgrid和jquery-ui，ui的dialog弹窗一闪就关闭，如何让弹窗留住？
使用 ModalPopupextender 作为弹出窗口打开时调整 iframe 高度的问题