Rewrite website from iframes to AJAX

Question

I just finished working on my first website (ASP.NET). All I wanted was just some simple navigation menu on the top and content at the bottom. First I started using MasterPages, but I didnt want the whole page to refresh when browsing between pages and it seemed impossible to achieve with MasterPages. So I switched to iframes - all looks good, but I cant bookmark or access subpages.

I am willing to rewrite web again, but I am not sure which technology to use. Should I try AJAX asp.net? In tutorials I found online they always updated just few strings, never whole page with images, text etc. Would I have to put html code of all pages into one big file with numerous panels or is it somehow possible to keep separated aspx files? Or is there some other approach I overlooked so far? All I want is a website with menu which doesnt reload all the time and possibility to navigate to subpages. For better understanding, my current page is www.caucasus-trekking.com

Thank you, Jozef

Why specifically don't you want the browser to navigate from one page to another? AJAX isn't a magic wand, it's a specific tool which does a specific thing. There are pros and cons to using any tool. — David, May 07 '15 at 12:51
I want to avoid the refresh of the whole page. Also I want to have all menus-related content at one place. I am not too familiar with website design but I am afraid that having separate pages would mean lots of redundant hmtl code. — Jozef, May 07 '15 at 12:59
Well, if you switch to some other approach and do not modify browser url you will be still unable to bookmark specific page. I think that you are trying to go against the normal web navigation. Why do you wish to avoid page reload - is it making you some problems you need to solve? — Dusan, May 07 '15 at 13:06
Also, loading parts of page via script will prevent search engines to pick up your content. I agree that full page reloads are kind of ugly but sometimes they are essential, there for a good reason. — Dusan, May 07 '15 at 13:11
@Jozef: `"I want to avoid the refresh of the whole page."` - Then put all of the content on one page? — David, May 07 '15 at 13:26

clement · Answer 1 · 2015-05-07T12:57:13.157

If you really want to keep the header/footer, then you maybe want to make a single page app (SPA), as with AngularJS for instance, but it require to re-write a few thousand of line of codes because you change of "philosophy". SPA on Wikipedia

The easiest solution for you at the moment should be AJAX calls that refresh the body only, but for a complex website I didn't recommand it. You have to write a _YourPage.cshtml that you load trough controller that you call in jquery, by the use of the ajax function, for instance:

$.ajax({
                    url: "@Url.Action("Search", "Home")",
                    cache: false,
                    type: "GET",
                    dataType: "html",
                    traditional: true,
                    data: {
                        page: // Your page id found in the a href thanks to data-*?
                    },
                    success: function (result) {
                        // replace the body
                    }
                });

We used to use MasterPage as you have done before, or Single page Application

score 0 · Accepted Answer · edited May 23 '17 at 12:21

By me, the best approach is to switch to Asp.Net MVC because the standard web forms do not offer flexibility you need, can be very tricky.

Here is how you can do this using MVC:

Make the controllers and views for the pages.
Use the _Layout.cshtml for header, navigation, ... (instead of master page).
On the navigation links, put normal href values that navigate to specific pages in a normal, standard way.
Up to this point, this is a just a standard, regular website.
Now, On the navigation links, attach click handlers that load content from server using Ajax and URL from href. Put this loaded content inside your content div.
On the server, inside controller actions, return View for normal requests and PartialView for the ajax requests.
Also, use some of these approaches to modify browser URL. Modify the URL without reloading the page
Finally, you get partial page reloads, visitor is able to bookmark page and your content is visible to search engines. win-win.

Rewrite website from iframes to AJAX

2 Answers2