Блог

Главная - Вопросы по программированию - Использование модального всплывающего окна для отображения aspx-страницы внутри другой aspx-страницы

Использование модального всплывающего окна для отображения aspx-страницы внутри другой aspx-страницы

#c# #jquery #asp.net #webforms

#c# #jquery #asp.net #веб-формы

Вопрос:

У меня есть приведенный ниже код, который я использую для открытия 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 -> Щелкните всплывающее окно -> Загрузите PayrollScope.aspx внутри модального

Но как только я нажимаю на MainPage.aspx, он перенаправляется на PayrollScope.aspx. Я также пытался использовать модальное всплывающее окно jQuery, но возникает та же проблема. Может кто-нибудь, пожалуйста, сказать мне, почему это перенаправление.

Спасибо

Комментарии:

1. Пожалуйста, покажите всю страницу aspx? Должно быть, вам не хватает важных элементов.

2. Пожалуйста, опубликуйте также код позади, невозможно определить, что происходит, только по разметке.

Ответ №1:

Если вы используете jQuery dialog для загрузки этой другой страницы?

Что ж, оно отобразится, но затем, если какой-либо код на странице имеет обратную запись, тогда да, он перенаправит на эту страницу.(Диалоговое окно jQuery просто помещает всю другую страницу прямо в этот div и «объединяет» ее с dom вашей текущей страницы. Таким образом, вы можете отобразить страницу, и перенаправление не произойдет. Однако любой код события кнопки на стороне сервера (нажатие кнопки или даже, скажем, событие редактирования текстового поля после обновления (при изменении) вызовет отправку обратной записи. И любая обратная отправка, таким образом, приведет к перенаправлению страницы (в конце концов, любой код, лежащий в основе события, отправляет ВСЮ страницу обратно и URL-адрес в IIS. Итак, это во многом зависит от того, ПРОСТО ли вы отображаете эту страницу, или вы хотите / нуждаетесь / чтобы взаимодействие с пользователем на 2-й странице загружалось в виде диалогового окна.

Итак, сбрасываем всплывающее окно ajax и контролируем почтение к идентификатору всплывающего окна. (не пытайтесь использовать 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), таким образом, откроется 2-я страница при нажатии на указанную выше кнопку. (и обратите внимание на значение return=false). Если у вас есть какая-либо обратная передача на странице, то все это сильно затмит диалоговое окно. (и это также означает, что 2-я страница, которую мы показываем (загружаем), как указано выше.

Однако, если вам нужно взаимодействие на этой 2-й странице? (приходится нажимать на кнопки и т.д.).

Тогда идея iframe — это ОЧЕНЬ хорошая идея.

Итак, у вас то же самое, что и раньше, но теперь мы не «загружаем» страницу с помощью jQuery.ui, а ПРОСТО показываем (и, следовательно, всплываем) div с iframe, который вы разместили внутри.

Итак, 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, похоже, работает намного лучше