Tab Navigation - Frames or AJAX?

Question

I have what I imagine to be a pretty standard web-interface.

There are 4 different ListViews (grid controls) which are accessed by a series of Tabs on the top.

I have implemented this as follows:

alt text http://img402.imageshack.us/img402/1530/pagedu8.jpg

Tab 1 will load Page 1 containing Grid 1 into Frame 2, Tab 2 will load Page 2 containing Grid 2 into Frame 2 etc.

However this then means that if you click on an item in the Grid, and I load DetailsPage1.aspx into Frame 2, then Frame 1 and the tabs are still visible and active.

I've been advised that I should just have one Frame, and load the Pages in dynamically based on the tab click, using HttpRequest (or WebRequest in asp.net).

Is this the correct approach to take? If you have any resources or tips at hand, it would be appreciated!

Thanks

Answer 1

Frames are an absolute no-no. There is no benefit to frames that can't be achieved using other techniques.

Does that mean you must use AJAX? Not necessarily. AJAX is a perfectly good solution if you feel the need to provide a rich, seamless interface, but it's not strictly necessary.

You could use server-side includes to separate your tabs into a another (common) sub-page, but since you mention ASP.NET, (assuming you are running on framework v2 or greater) you might want to use Master Pages, where your tabs are in one content section or in the Master itself, and your grids/details are in another content section.

The key difference between the two techniques is that using AJAX, the transition from tab to tab will be slick and seamless, but a) it takes a little extra work (particularly if you are unfamiliar with any give AJAX framework) and b) since you essentially have 4 pages rolled into one, the pages are 'heavier' and are more complex to maintain. If you opt for the non-AJAX route, the key difference is that there will be a small but distinct refresh effect when you click on each tab (since it loads a new page each time).

Of course, Master Pages are useful for maintaining a consistent site style and structure anyway, so there is no reason why you can't use AJAX with a Master Page system.

Answer 2

Frames are lame: you will get problems, if users want to set a bookmark and if users visit your site via google: Then your navigational frame is not visible. So you need a lot of dirty javascript. to check this. If you need javascript, do it right from the start and use AJAX

Answer 3

Ajax is the best pick. But keep in mind to make it browse-able via back/forward. The best pick is to change page hash. I used something like this:

domain.com/#tab1 for first tab domain.com/#tab2 for second tab

and so on.

If you use jQuery, this can be a good start (i use that and i had NO problem with). I'm sure there is a solution for all popular framework though :)

Answer 4

Instead of using frames, you should just include your navigation page in all of your other pages. The browser will see that you're including the same document in all of your pages and cache it.

Answer 5

Have you tried the TabContainer or loading all 4 detail panes and just showing/hiding panels on tab selection change?

Depending on what screens your users will see, if you load the detail views dynamically (Ajax or postback) you may have trouble persisting any information that the user has entered, and you will incur a wait (users dont like to wait)

Answer 6

I would recommend using jQuery and jQuery UI plugin. No frames will be needed, just div containers.

Answer 7

Like StingyJack, I would suggest having a look at the TabContainer control, but you might want to take care that your ViewState doesn't get too large if you do.

So for example, don't load anything into a GridView until that Tab is being viewed and remove it contents if it is not (saving back to the database of course if required. Using the TabContainer's ActiveTabChanged event would be key to this strategy.You diable ViewState for the grids but leave it on for the container.

Answer 8

You're using ASP.NET, so just load all 4 controls into a mutliview and then on postback set the visible one to be which ever button has been clicked.

http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.multiview.aspx

Answer 9

DO NOT uses frames (or iframes for that matter) unless you absolutely must...

The only valid reasons I can think of to use (i)frames is file upload controls in fact, and I am not sure it's valid there either...