Using Modal Popup for Displaying aspx page inside another aspx page

I have the below code which I am using to open a aspx page inside a modal popup but the issue is as soon as I load the host page of the modal popup it is redirecting to the one which is inside the 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>

So the sequence is
MainPage.aspx -> Click PopUp -> Load PayrollScope.aspx inside the modal

But as soon as I hit the MainPage.aspx it is redirecting to PayrollScope.aspx. I tried to use jQuery modal popup also but the same issue is happening. Can someone please tell me why it’s redirecting.

Thanks

Contents hide

Answers:

Method 1

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

If you use jQuery dialog to load that other page?

Well, it will display, but THEN if any code in the page has a post back, then yes, it will re-direct to that page.(jQuery dialog simply pulls the whole other page right into that div and “merges” it into your current page’s dom. So, you can display the page, and no re-direct will occur. However, any server side button event code (button press, or even say a after update event of editing a text box (on changed) will cause a post back. And any post-back WILL thus cause the page to re-direct (after all any code behind event does send the WHOLE page back and the URL to IIS. So, it much depends on if you JUST displaying that page, or if you want/need/have user interaction on the 2nd page loaded as a dialog.

So, dump the ajax popup and controls reverence to the id of the popup. (don’t try jQuery an the ajaxtool kit to “both” try and pop up a control/div – they tend to not play nice with each other.

I do suggest using jQuery.

This would work (but with above post back issues in mind).

<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');
      }

So, above will LOAD the other page (into that div), thus pop up the 2nd page when you click on the above button. (and note the return=false). If you have any postback on the page, then everything will quite much blow out the dialog. (and this also means the 2nd page we display (load) as per above.

However, if you need interaction on that 2nd page? (have to click on buttons etc.).

Then the idea of a iframe is a VERY good idea.

So, you have same as before, but we now don’t “load” the page using jQuery.ui, but JUST display (and thus pop up) the div with a iframe you placed inside.

So,the div becomes this:

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

and the js code becomes this:

    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');
      }

So, now the above will just display that other page in the div, and since it is a iFrame, then you can interact – and post backs in that iframe should work just fine.

So, remove the ajax panel stuff – give jQuery.ui a try. I used the ajaxtool kit stuff, but for displaying another whole page in a dialog, then i found jQuery.ui seems to work a lot better

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating