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

asp.net include dynamic

40,992

Solution 1

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.

Solution 2

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" onclick="updateObjectIframe(this); return false;">this is an object test not an iframe test</a>
</div>

</body>
</html>

Solution 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).

40,992

Author by

Liao

Updated on July 17, 2022

Comments

Liao almost 2 years

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.
SirDemon over 14 years

UFrame still uses an iframe, which was not an option according to the question.
Liao over 14 years

So, if Page99 is instead a User Control, this "embedding" can be done at runtime when the Button is clicked by using AJAX? [Could you point me to some examples you know of, because I have not been able to find any specific information about doing so (found info about includes, but thats not going to work in my case).]
SirDemon over 14 years

@Liao - You should read up about UpdatePanel : asp.net/Ajax/Documentation/Live/overview/…
Liao over 14 years

That's great and super simple! As an aside, when things have a simple solution, sometime you wonder "could it be so easy!". Is there any pitfall/caveats you can think in this approach?
Liao over 14 years

I read a bit about it, but not much; will do more reading on that (apprently it's slow in some cases).
Liao over 14 years

I guess that could work; but I suppose the approach will not work if Page99 had Web controls on it. Am I right?
Martin Booth over 14 years

You would end up trying to insert multiple html, body and head tags into the page. The viewstate field would be duplicated too so posting back would likely not work any more, and as you correctly point out, and control on Page99 would (if it works) cause the whole page to postback, and the necessary postback information would certainly not get routed back to page99, but instead would end up with the parent page (probably causing a "The control tree into which viewstate is being loaded must match the control tree that was used to save viewstate during the previous request" error)
Coxy over 14 years

@Martin, very good points. I had assumed based on the lack of frames that the 'child' pages were to be quite basic. The question has since been updated.
Mehdi Golchin over 14 years

@SirDemon, UFrame does not use IFrame as Omar mentioned in this article. codeproject.com/KB/aspnet/uframe.aspx
BA TabNabber almost 7 years

One likely pitfall with this approach (if your inner page is indeed aspx) is that your viewState and postbacks with the two pages could conflict with each other, though there are workarounds.
BA TabNabber almost 7 years

ascx is probably the best way, but there ARE ways to load an aspx page inside another using jquery.load or see the answer below - stackoverflow.com/a/2099318/2340825
Anish over 6 years

Generally HTML approach does not work. In my case, it is not able to render the Report URL. It is cross-scripting issue seems to me BUT it is working when accessing through admin account through which pages have been hosted in IIS. I am facing this, need to go with some other approach.
GµårÐïåñ almost 4 years

Just in case anyone comes across this, the project seems to have been archived and no longer actively developed and given the number of posts about errors that have gone unanswered, personally I would advise against using this solution, although it would have been great if it was up to date.
Mehdi Golchin almost 4 years

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