views:

132

answers:

2

Hey I just began working on a new project that requires, tab navigation, and within each page, more tab navigation, and then within those pages dynamic ASP.NET content. The problem is I do not want all of my code on one page, that would just be a very large and bloated page. I was wondering what available methods of approach there are for this issue. I checked jQuery tabs, and I see I can link html files using AJAX but I need aspx files not just HTML.

Thanks ahead of time.

A: 

what you could do is: make a tab a span when clicked on that tab/span, fire jquery and do a GET to a page on the server which represents the tab content

pro: no initial loading of the content of the tabs Con: slight delay when you click a tab (first time only if you can cache the content of the tab)

this is done when you think that only a few of all of your tabs are clicked: you don't have to load all the data users ain't gonna see.

If you think the user is going to look at all the tabs, then you can load everything in one page. You can use a user control for each tab so no super large page and wrap the output of the usercontrol in a DIV Then also make a tab a span, and when clicked on the tab/span, make the right DIV visible and hide the others.

Michel
+1  A: 

I've had to deal with this on many projects. After trying quite a few libraries my approach to tabs is to always do these myself using plain CSS.

But note having multiple layers of tabs is a but usability no-no. Remember Windows 3.x and 95 did this quite a bit. It's less an issue these days. You can try an accordion control along with the tabs to filter your screens

One one particular project, we used DevExpress ASPxTabPages for a while. These worked well, but were a bit heavy for such a simple task. We then moved the project to JQuery, but ran into situations where JQuery UI Tabs started to be an issue as well. Particularly when generating tabs using master pages and render actions in ASP.Net MVC. We finally settled on regular CSS and HTML. Javascript really isn't even needed. Though I'm sure JQuery can be used to spruce things up.

An example of CSS tabs can be found at http://www.htmldog.com/articles/tabs/. There are live examples on that page as well.

kervin
One problem with CSS tabs, if I use a master page for the tabs, how will I be able to updated the selected tab.
Jacob Nelson
You can access your Master page variables from your page. Check out http://msdn.microsoft.com/en-us/library/c8y19k6h.aspx . Your page then ges a chance to set the active tab. Also we have the code-behind ( well RenderAction in our case, since it's MVC ) set the tab class. So that selected tab gets the *ActiveTab* class. There is a good example of exactly this using MVC in "Apress Pro MVC" book.
kervin
If I'm using CSS to do the tabs, how does a click trigger a MVC code-behind? So am I using CSS w/ MVC?
Jacob Nelson
The CSS tabs are just for the frontend. Your clicks can go to any HTML page or ASP.Net page that you would like. It's only an web link. On the backend you can use whichever technology you like. We only recently switched from WebForms to MVC. You can even wrap the entire thing in a WebForm User Control.
kervin