Tabs for a ASP.NET website

Question

I would like to add tabs for my website and I understand I can use the tab control in the AJAX toolkit or I can choose to go with JQuery UI tabs. Each tab would need to load a separate asp.net page and I need to customize the tabs to look slick.

Any thoughts on what approach I can use?

Answer 1

JQuery tabs are designed to make pure client-side and AJAX tabbing as easy as possible. Your requirements are to have each tab go to a distinct web page. In this case this might be the wrong approach.

Since each tab is going to be a different ASP.NET page you'll want something that's easy to configure on the server side so that 1) the tab control can easily be reused; 2) it's easy to specify which tab is "opened" from the server-side. I suspect ASP.NET AJAX's version will be easier on both counts.

Then again, my own experience has been with RadControls' RadTabStrip. If you have a few bucks to spend, you can get a great set of reusable widgets from these guys that are very customizable.

Answer 2

there are 1001 ways to accomplish the behavior...

you can even go with jQuery Tools and load each tab asynchronously from each page

can you be more detailed on what's the exact problem, as your question is kinda vague ...

Answer 3

You can see a demo of the AjaxControlToolkit tabs offering here:

• http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/Tabs/Tabs.aspx

If you look at the bottom you will see a section on themeing it. You can fully change the layout to suit your needs.

As for loading separate pages into each tab you need to clarify what you mean as there are several options here:

1. Put an iframe inside the tab which points to an external file
2. Pull in the contents of another file using ajax and inject it into the tab (not directly supported by the ajaxcontroltoolkit tabs)
3. User Controls. You can create separate user controls to represent pages. This will allow you to compartmentalise up functionality and develop it separate from the main clutter of the page.

If having search engines being able to see and index the contents of these tabs then you should also indicate this as not all of the solutions above are Google friendly (or accessible for blind users).

Answer 4

My question is given that the content of my tab pages are separate aspx pages, should I go with JQuery tabs or tabs control from the ajax toolkit

Given that, AjaxControltoolkit isn't really an option. AjaxControlToolkit tabs are controls, which means they need to live inside a server side form. Even if you could get them to load the contents of another ASPX page, the most likely result of that would be nested html forms, which isn't really supported.

If you go the jQuery UI tabs route, you will most likely run into different issues: page redirects on postback. You could try to work around that problem using the jQuery Form (something along these lines), but you might have a hard time working around controls that submit forms using the __doPostBack method. If your ASPX pages rely on postbacks, your best bet is probably to host an iframe for each tab and load your aspx pages that way. That will allow your pages to still function properly with postbacks.

ASP.NET MVC lands itself much better to the setup you're trying to achieve if that's at all an option.