Loading different aspx pages into an area without reloading the entire page - asp.net

I have written a longer text on this subject posted earlier today. Perhaps the text was too long, so I rephrase it very briefly here:
I want to design a very standard site where the user gets the opportunity to navigate to different aspx pages with the aid of navigation menus (left, top). I do not want the entire page to be reloaded when changing the content page for three reasons: state handling, flickering and bandwidth conservation. I just want to load a new aspx page into a "main content area" with the rest of the site untouched.
What is the best way to achieve this? I must not rely on master pages or not master pages or AJAX or not AJAX. It must not rely on anything specific. I just wonder what the standard method would be to achieve this. It must be a pretty common wish.
Thanks
/DT

You can use iframe for this.
The <iframe> tag specifies an inline frame.
An inline frame is used to embed another document within the current HTML document.
<iframe src="http://www.w3schools.com"></iframe>

Related

How to not reload iFrame between page clicks

I'm having a tough nut to crack here.
I have the following situation:
- in an iFrame (no way around it) I'm loading an external website/application.
- This iFrame is on one page and one page only.
- Whenever you visit the iFrame page the first time a certain load time is needed for the applicaton (about 5seconds on average).
- In the application you can change the view and parameters etc.
- When you leave that page and go to another, and return later on to the iFrame page the requirement is that there is no load, and the content of the iFrame is as you have left it earlier.
I know this can be done by using frames (which are so 90's) but I really don't want to do that. There has to be a more modern way of doing it.
Just to note, the website around the iFrame is using Sitecore, so this might be a limiting factor in some solutions.
The things I have thought of:
- use 2 frames, one for the header with navigation, and another for the content. In that way the iframe never has to reload and we have moved back in time... :(
- ever click is an Ajax call, the iFrame is in a div that is hidden until the right button is clicked.
And then I found something called BigPipe. I haven't found an ASP.NET implementation yet, but I was hoping someone already had some experience with this.
Anyone any better ideas?
Thx
If your iFrame is a control on a Sitecore sublayout or rendering (or can be moved to a rendering/sublyaout), you can check off the Cacheable option on the sublayout and set it to vary by content or device or whatever depending on what it is. Then you will have the content of that frame in Sitecore's cache, which is managed by Sitecore and it'll always render the cached version whenever possible and should basically solve your dilemma.

Using Javascript to get around SEO concerns

I would like to know at which stage is it okay to start manipulating HTML elements/content using Javascript so as not to impair SEO?
I have read somewhere that HTML content that is hidden using the CSS property display:none is often penalized by Google crawlers, with good reason from what I'm led to believe...I ask this as I intend to have some div panels that are initially hidden, but shown once the user clicks on an appropriate link. My intention is therefore not to hide content from users entirely - just intially to give them a better user experience - I'm afraid Google may not see it that way!
My reason for doing this is to prevent the split second (or in some cases, a full 2 seconds) of ghastly unstyled html elements (positioning), before my Javascript comes in to position, hide and neaten everything up. So adding the display:none at the forefront, and then using Javascript to toggle visibility would have been ideal, but is apparently a no-no with Google Search Engine bot.
Do you experts have any advice? Thank you!
google can now crawl AJAX sites using a simple URL substitution trick; you might be able to take advantage of this to let googlebot see a plain html version of the page for indexing instead of your load-optimized page; see http://code.google.com/web/ajaxcrawling/docs/getting-started.html
If the content in question exists on the page in the html, and is accessible to the user by the time the page finishes loading initially, then you are okay. You want to make sure google can lead a user to your page and see the content in question without requiring further interaction. Adding new content to the html after the initial load (i.e. content from the server), can be problematic for SEO. However if all content is in the html by the end of the page load, then you shouldn't get docked. Keep in mind, good SEO strategy dictates using standard methods of usability so the web crawler can access your content.
Also, each page should follow a content theme. Example: Don't abuse users by hiding five different unrelated blocks of content "medical devices, kazoos, best diners, motorcycles, toxic waste" on one page. Theoretically you could take all of your site's content and lay it out on one page using javascript and 'display:none' waiting for an 'onClick', but that smells like spam.
EDIT, additional info as pertaining to the original question:
The search engine friendly way to display content dynamically is to load it, then hide it from the user.

Edit what displays in an iframe

I'm trying to display content from anther site on to mine using an iframe. I'm just wondering if its possible to only display certain parts (divs) of this external page in the iframe.
Thanks!
You could try and use some jQuery on your site to dynamically alter the styles of the external site. I did something similar with SSRS where we had an iframe containing SSRS reports which we wanted to style. We used jQuery in the master page to find the matching elements inside the frame target and alter them as required.
As long as the external site is well marked up (plenty of ids, good semantic structure) you may be able to hide/re-arrange elements as you require. You may also need to delay the jQuery execution as the frame contents may not be completely loaded by the time your JavaScript executes.
You can find a VERY simple example here.
BUT, be careful of the legalities involved with showing partial content from someone else's site. If you're presenting their site as your own or without identifying information, you could be infringing on their copyright.

Does the iframe have any effect on page load time? Why not?

Like the headline says: What effect does iframe have on page load time? Thanks.
iFrames are somewhat costly, even when left blank when compared with other HTML elements. The biggest drawback is that they block the window onload event until complete, which can make the users perceive that the page they requested is slow.
The do have their uses though in allowing you to compartmentalize external web pages or sandboxing another DOM structure outside of the main page.
Here is a good article on them

Resources for taking an existing design template and putting it into a masterpage?

I am not a designer, so I took a design template from http://www.opendesigns.org/ and was successful in implementing the design in one page, but when I tried to put it into a masterpage, it came out funny looking, so I was curious if there were any resources/tutorials on taking design templates and putting them in masterpages.
A master page is just HTML / ASP with a placeholder for the content.
As long as everything is well-formed, it should display as normal.
When I am building a master page, I build my design, then copy and paste into the master page and insert the placeholder where I need it.
some of what you say is quite confusing, i think you need to be clearer. A master page is a template for layout on your site or subsite, you would never serve a master page as content, you would always use the master page as a basis for a content page, the master page allows you to define a set of placeholders and, in principle, a global definition of the skeleton of your pages, for the area within which the master page will be used. Its usual to place site wide (or sub site wide - depends what you are doing) content onto the master page itself, things like menus, banners etc. And then let the pages that use the master page define what is held in the content placeholders that will be specific to the page instances.
when you say you put the design in a page, was it pure html ? or was it an aspx ? you arent clear on how you got from
1) design template to "page" (please explain html or aspx)
2) how you took your page and "put it in" your master page (i think if you explain, it might be easier to help)

Resources