How to display an ASPX in another ASPX's DIV dynamically at runtime?

Here is what I am trying to do in ASP.NET:

Create one page called Main.aspx. This page has a DIV and a buttons.

The browser loads Main.aspx. Then when I click the button, I want to load page Page99.aspx into the DIV in Main.aspx dynamically, but without Main.aspx requiring a postback.

So, Main.aspx loads once, and thereafter all the content displayed in Main.aspx will come from different .aspx pages.

Ps. I’m looking for a solution as above, but not using frames.

UPDATE 1
I should mention that Page99 is not a simple HTML page. It will contain Web controls.

Contents hide

Answers:

Method 1

Method 2

Method 3

Method 4

Method 5

Update

Original Answer

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 don’t want to use the iFrames, you can very well use Object element of HTML. Follow here to see and html example. You can very well use this for aspx also with some change, like using OnClientClick property for aspx button etc.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>mouseover image position</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<style type="text/css">
/*<![CDATA[*/
body
   {
    background-color:#aaaaff;
   }
#one
   {
    position:absolute;
    left:50%;
    top:50%;
    margin:-150px 0 0 -250px;
   }
object
   {
    width:500px; 
    height:300px; 
    border:solid 1px #000000;
   }
 /*//]]>*/
</style>

<script type="text/javascript">
//<![CDATA[
// written by: Coothead
function updateObjectIframe(which){
    document.getElementById('one').innerHTML = '<'+'object id="foo" name="foo" type="text/html" data="'+which.href+'"></object>';
}

//]]>
</script>

</head>
<body>

<div id="one">
<object id="foo" name="foo" type="text/html" data="http://www.w3schools.com/"></object>
</div>
<div>
<a href="http://www.google.com" rel="nofollow noreferrer noopener" onclick="updateObjectIframe(this); return false;">this is an object test not an iframe test</a>
</div>

</body>
</html>

Method 2

As far as I know, barring the use of iframes, there is no way to load one aspx page into another.

With postbacks or ajax, you can use UserControls (ascx) instead. They can contain pretty much the same content a page can anyway, or use a MasterPage.

If you wish to have no postbacks, ajax is probably the way to go, though again, it does not allow you to load an aspx page into another, only to change the content of the page you’re on (amongst other things).

I’m not sure about other platforms for web development though, they may have a solution closer to what you want to do, so if asp.net is not a “must”, you should consider checking out other platforms.

Method 3

If you’re using the AJAX toolkit it should be possible to do this using a webcontrol rather than an ASPX page.

If you try to pursue this idea using ASPX pages, and without using an iframe, you will find that there is no isolation provided for javascript variable names and element ids, therefore almost guaranteeing conflicts if you put the rendered aspx’s content into a div using innerHTML; The page will definitely not be able to perform a partial postback as I imagine you would like.

Using a webcontrol instead: A better solution would be to install the AJAX toolkit if you haven’t already, and use an updatepanel control. Either dynamically load and unload webcontrols inside this panel (using LoadControl()), or place a Multiview control inside it and change the activeview to simulate changing this content.

The updatepanel will allow its contents to update without a full postback (page refresh).

Method 4

I would think that you could do this using AJAX and a web method on the server.

The button(s) on the page calls the web method using AJAX, with various arguments for the correct page to load into the DIV.
The web method loads the correct page using a normal web request.

Eg:

HttpWebRequest request = (HttpWebRequest)WebRequest.Create("http://servername/filename.aspx");
WebResponse response = request.GetResponse();

Then the method would return the HTML generated by the ASPX file back to the client.
When the client gets the callback, it can un-encode the HTML and put it into the div.

Eg:

var startOfHTML = response.indexOf('&lt;');
var endOfHTML = response.indexOf('</string>');

response = response.substring(startOfHTML, endOfHTML);
response = response.replace(/&lt;/g, "<");
response = response.replace(/&gt;/g, ">");

var div = document.getElementById("myDIV");
div.innerHTML = response;

Method 5

Update

Thanks @GµårÐïåñ for the heads up.

The UFrame seems to have been archived and no longer actively
developed and given the number of posts about errors that have gone
unanswered.

Original Answer

Maybe I’m missing something. But you can use UFrame in this case.

http://msmvps.com/blogs/omar/archive/2008/05/24/uframe-goodness-of-updatepanel-and-iframe-combined.aspx (No longer works)

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